Перейти к содержимому


Партнерская программа Kredov

Подскажите как избавиться от align='center'

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 732 сообщений
  • Репутация: 410
0

Отправлено 18 Апрель 2015 - 03:15

Пару тройку дней назад @yury подсказал как можно реализовать меню в виде блочных кнопок посредством списка... Сделал, все работает замечательно, начал украшать и возникла проблема позиционирования которую можно решить посредством align='center', но не хочется, так как хотелось бы написать валидный код... Стандартная замена упомянутого выражения "стилевым" margin: 0 auto; никак не помогает, вторая ночь в безрезультатных муках... (((

Памажите люди добрые, кто чем может, очень хочется решить задачку... "Поиграться" можно здесь >>>

 

Фрагмент кода:


<div align='center' class='mainmenu'>
  <div class='menu_box'>
    <ul id='menu'>
      <li>Надо&nbsp;</li>
      <li>позиционировать&nbsp;</li>
      <li>так</li>
    </ul>
  </div>
</div>
<br>
<div class='mainmenu'>
  <div class='menu_box'>
    <ul id='menu'>
      <li>Без применения&nbsp;</li>
      <li>align='center'&nbsp;</li>
      <li>не получается</li>
    </ul>
  </div>
</div>

css:


.mainmenu {
    padding:0; margin:0 5px;
    width: 100%;
    border: 1px solid black;
    border-radius: 16px;
    }
.menu_box {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid blue;
    margin: 0px auto;
    padding: 0px;
    }
ul#menu{
    list-style: none;
    overflow: visible;
    margin:0;padding:0;
    }
#menu li{
    float: left;
    padding:5px 0;
    margin:0 auto;
    }

Результат:

align.png

 

Заранее признателен за помощь...

 


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 18 Апрель 2015 - 08:38

За основу берем прошлый вариант с блочным меню.
По сравнению с тем, что было, добавяем внешний блок с id="parent", относительно которого центрируем наше меню.
 
1) внешнему блоку с id="parent" даем свойство
  text-align: center;
прочее оформление в виде фона и закруглений даны внешнему блоку для наглядности
2) центрируемому элементу (меню) даем свойство
  display: inline-block;
, которое превратит элемент в строчный блок.
 
Тонкости и хаки:
display: inline-block не работает в IE6-7. Потому в правилах для IE6-7 элемент строчным делается с помощью
  display: inline;
и добавлением layout
  zoom: 1;
у меня это сделано хаком (чтоб все в одном файле было), но правильнее (и для валидности css) делать это отдельным css для этих браузеров.
 
Результат:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#parent{
  text-align: center;
  border: none;
  border-radius: 15px;
  background: #ccc;
}
ul#menu{
  display: inline-block;
  //display: inline;
  zoom: 1;
  list-style: none;
  height: 38px;
  overflow: hidden;
}
#menu li{
  float: left;
  height: 38px;
}
#menu li a{
  float: left;
  height: 30px;
  background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
  font: 16px/30px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  text-decoration: none;
  padding: 0 10px;
  margin: 3px;
  color: #fff;
  border: 1px solid #333;
  border-radius: 15px;
}
#menu a:hover{
  background: linear-gradient(to top, #828c95 36%, #28343b, #b5bdc8);
}
</style>
</head>
<body>
<div id="parent">
  <ul id="menu">
    <li><a href="index.php">О компании</a></li>
    <li><a href="production.php">Продукция&nbsp;|&nbsp;Услуги</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</div>
</body>
</html>

Сообщение отредактировал yury: 18 Апрель 2015 - 08:54

  • 0

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 732 сообщений
  • Репутация: 410

Отправлено 18 Апрель 2015 - 12:39

display: inline-block;

 Не сильно соответствует моей идее - с его (Вашей) помощью отцентрировалось горизонтально, но потерялась возможность вертикального центрирования которая обеспечивалась посредством "display: table-cell"... Дело в том, что у меня parent имеет большую высоту, а inline-block прижимает содержимое "к потолку"... Плюс ко всему прилично смотрится когда всё меню помещается в одну строку, а когда не помещается - получается "кривовато"... (((

prtsc.png

В идеале хотелось бы добиться и горизонтального и вертикального центрирования, а если бы при этом на нижней картинке обе строки центрировались и горизонтально и вертикально - была бы вообще "сказка"...

 

Первопричиной "переделки и изысков" стало желание (при изменении стилей посредством @media) реализовать одно универсальное меню (а потом и весь контент) для ПК, планшетов и мозгофонов... )))

На данном этапе получается как-то так:prtsc-1.png

Именно поэтому изначально и собирался реализовывать это меню посредством <span>  - они как-то проще поддаются манипуляциям с выравниванием...

 

Или это надо реализовывать совсем другими способами?


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 18 Апрель 2015 - 17:57

Что бы не только меню центрировалось, но и отдельные пункты меню центрировались и переносились на след. строки им тоже следует дать свойство
display: inline-block;
 
Получится как-то так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#parent{
  text-align: center;
  border: none;
  border-radius: 15px;
  background: #ccc;
  overflow: hidden;
}
#menu li{
  display: inline-block;
  //display: inline;
  zoom: 1;
  list-style: none;
  height: 38px;
}
#menu li a{
  float: left;
  height: 30px;
  background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
  font: 16px/30px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  text-decoration: none;
  padding: 0 10px;
  margin: 3px;
  color: #fff;
  border: 1px solid #333;
  border-radius: 15px;
}
#menu li a:hover{
  background: linear-gradient(to top, #828c95 36%, #28343b, #b5bdc8);
}
</style>
</head>
<body>
<div id="parent">
  <ul id="menu">
    <li><a href="index.php">О компании</a></li>
    <li><a href="production.php">Продукция&nbsp;|&nbsp;Услуги</a></li>
    <li><a href="price.php">Стоимость&nbsp;|&nbsp;Цены</a></li>
    <li><a href="gal.php">Галерея</a></li>
    <li><a href="">Требования к макетам</a></li>
    <li><a href="">Полезные материалы</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</div>
<p>Как-то так.</p>
</body>
</html>

Сообщение отредактировал yury: 18 Апрель 2015 - 18:05

  • 0

#5 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 732 сообщений
  • Репутация: 410

Отправлено 18 Апрель 2015 - 18:25

@yury, inline-block я пробовал - не подходит...

Дело в том, что у меня parent имеет большую высоту, а inline-block прижимает содержимое "к потолку"... Плюс ко всему прилично смотрится когда всё меню помещается в одну строку, а когда не помещается - получается "кривовато"... (((

Пробовал обернуть в еще один div и его отцентрировать вертикально, но ничего не получилось...  :wacko:


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 18 Апрель 2015 - 18:56

Если еще вертикальное выравнивание нужно, то как-то так можно сделать:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
#main{
  position:relative;
  display:table;
  height: 400px;
  vertical-align: middle; 
  text-align: center;
  background: #ccc;
}
#parent{
  width:100%;
  display:table-cell;
  vertical-align:middle;
  position:relative;
  text-align:center;
}
ul#menu{
  display: inline-block;
  //display:inline;
  zoom: 1;
  vertical-align:middle;
}
#menu li{
  display: inline-block;
  //display: inline;
  zoom: 1;
  list-style: none;
  height: 38px;
}
#menu li a{
  float: left;
  height: 30px;
  background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
  font: 16px/30px Arial, "Nimbus Sans L", Helvetica, sans-serif;
  text-decoration: none;
  padding: 0 10px;
  margin: 3px;
  color: #fff;
  border: 1px solid #333;
  border-radius: 15px;
}
#menu li a:hover{
  background: linear-gradient(to top, #828c95 36%, #28343b, #b5bdc8);
}
</style>
</head>
<body>
<div id="main">
<div id="parent">
  <ul id="menu">
    <li><a href="index.php">О компании</a></li>
    <li><a href="production.php">Продукция&nbsp;|&nbsp;Услуги</a></li>
    <li><a href="price.php">Стоимость&nbsp;|&nbsp;Цены</a></li>
    <li><a href="gal.php">Галерея</a></li>
    <li><a href="">Требования к макетам</a></li>
    <li><a href="">Полезные материалы</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</div>
</div>
<p>Как-то так.</p>
</body>
</html>
И еще немножко стилей для IE6-7:
 
#main {
  overflow:hidden;
}
#main,
#parent {
display:block;
}
#parent {
top:50%;
left:0;
}
ul#menu {
top:-50%;
position:relative;
display:block;
}

Сообщение отредактировал yury: 19 Апрель 2015 - 08:49

  • 1

#7 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 732 сообщений
  • Репутация: 410

Отправлено 18 Апрель 2015 - 19:36

Спасибо, так уже пробовал тоже... Сейчас повторил... )))

Получается центрирование, но когда при изменении ширины окна элементы меню складываются в две строки, то вторая строка уходит "под" первую, которая стоит на месте...

То есть вертикальный центр "menu" становится ниже центра "parent", а хочется чтоб они совпадали, вне зависимости от количества строк, в которые сложились элементы меню, то есть высоты "menu"...

Мозг сломан окончательно... завтра попробую не исправлять а начать писать с чистого листа...

ОГРОМНОЕ СПАСИБО @yury, Вы реальный "волшебник вёрстки"!!!

 

"+" в репу не пролез - объявляется большой и жирный "плюс к карме"...

 

П.С. Есть мысль завтра попробовать реализовать мысль посредством "блочных" span-ов... По идее они должны центрироваться и переноситься как простой текст внутри div-а - больше шансов что я сумею одолеть задачу...


Сообщение отредактировал ShowPrint: 18 Апрель 2015 - 19:41

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#8 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 18 Апрель 2015 - 19:55

Получается центрирование, но когда при изменении ширины окна элементы меню складываются в две строки, то вторая строка уходит "под" первую, которая стоит на месте... То есть вертикальный центр "menu" становится ниже центра "parent", а хочется чтоб они совпадали, вне зависимости от количества строк, в которые сложились элементы меню, то есть высоты "menu"...


Не понял, что уходит и что не совпадает. Вроде все ерзает и центруется и по вертикали и по горизонтали: http://jsfiddle.net/ec5w2day/16/

Нарисуйте что ли, как вам хочется чтоб было.

Сообщение отредактировал yury: 18 Апрель 2015 - 19:59

  • 0

#9 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 732 сообщений
  • Репутация: 410

Отправлено 18 Апрель 2015 - 23:33

@yury, ну не знаю... У меня несколько вариантов:

1) Вы - волшебник!

2) Я - полный тупица

3) В одном флаконе 1) и 2)

 

Каким бы ни был правильный вариант - сейчас буду разбираться...

 

П.С. Всё работает и фунциклирует... Остается вопрос - чем я занимался весь день...

 

П.П.С. Задумался - а стоит ли прописывать "еще немножко стилей для IE6-7"... Залез в Я.Метрику: за год из 15 тонн уников на долю IE6 и 7 пришлось 30 визитов...


Сообщение отредактировал ShowPrint: 19 Апрель 2015 - 01:35

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#10 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 19 Апрель 2015 - 08:45

П.П.С. Задумался - а стоит ли прописывать "еще немножко стилей для IE6-7"... Залез в Я.Метрику: за год из 15 тонн уников на долю IE6 и 7 пришлось 30 визитов...

На ваше усмотрение.

Примечание:
Некоторые считают, что имеют право "воспитывать" посетителей и "подталкивать прогресс браузеров", заставляя пользователей отказом от поддержки старых и "неправильных" браузеров переходить на новые и "правильные". И есть мнение, что дело верстальщика не воспитывать, а сверстать так, чтоб максимально все смогли посмотреть страничку сайта. Если за счет этого может добавиться хотя бы 1 посетитель – хорошо.
Выбор за вами.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru