X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Подскажите как избавиться от align='center'
ShowPrint
ShowPrint
Topic Starter сообщение 18.4.2015, 4:15; Ответить: ShowPrint
Сообщение #1


Пару тройку дней назад yury_mw подсказал как можно реализовать меню в виде блочных кнопок посредством списка... Сделал, все работает замечательно, начал украшать и возникла проблема позиционирования которую можно решить посредством 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;
    }

Результат:
Прикрепленное изображение


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


0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 18.4.2015, 9:38; Ответить: yury_mw
Сообщение #2


За основу берем прошлый вариант с блочным меню.
По сравнению с тем, что было, добавяем внешний блок с 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.4.2015, 9:54
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 18.4.2015, 13:39; Ответить: ShowPrint
Сообщение #3


( @ 18.4.2015, 11:38) *
display: inline-block;

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

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

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

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

Или это надо реализовывать совсем другими способами?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 18.4.2015, 18:57; Ответить: yury_mw
Сообщение #4


Что бы не только меню центрировалось, но и отдельные пункты меню центрировались и переносились на след. строки им тоже следует дать свойство
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.4.2015, 19:05
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 18.4.2015, 19:25; Ответить: ShowPrint
Сообщение #5


yury_mw, inline-block я пробовал - не подходит...
(ShowPrint @ 18.4.2015, 15:39) *
Дело в том, что у меня parent имеет большую высоту, а inline-block прижимает содержимое "к потолку"... Плюс ко всему прилично смотрится когда всё меню помещается в одну строку, а когда не помещается - получается "кривовато"... (((

Пробовал обернуть в еще один div и его отцентрировать вертикально, но ничего не получилось...  :wacko:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 18.4.2015, 19:56; Ответить: yury_mw
Сообщение #6


Если еще вертикальное выравнивание нужно, то как-то так можно сделать:
 
<!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.4.2015, 9:49
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 18.4.2015, 20:36; Ответить: ShowPrint
Сообщение #7


Спасибо, так уже пробовал тоже... Сейчас повторил... )))
Получается центрирование, но когда при изменении ширины окна элементы меню складываются в две строки, то вторая строка уходит "под" первую, которая стоит на месте...
То есть вертикальный центр "menu" становится ниже центра "parent", а хочется чтоб они совпадали, вне зависимости от количества строк, в которые сложились элементы меню, то есть высоты "menu"...
Мозг сломан окончательно... завтра попробую не исправлять а начать писать с чистого листа...
ОГРОМНОЕ СПАСИБО yury_mw, Вы реальный "волшебник вёрстки"!!!

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

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


Сообщение отредактировал ShowPrint - 18.4.2015, 20:41
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 18.4.2015, 20:55; Ответить: yury_mw
Сообщение #8


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

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

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

Сообщение отредактировал yury - 18.4.2015, 20:59
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 19.4.2015, 0:33; Ответить: ShowPrint
Сообщение #9


yury_mw, ну не знаю... У меня несколько вариантов:
1) Вы - волшебник!
2) Я - полный тупица
3) В одном флаконе 1) и 2)

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

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

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


Сообщение отредактировал ShowPrint - 19.4.2015, 2:35
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 19.4.2015, 9:45; Ответить: yury_mw
Сообщение #10


(ShowPrint @ 19.4.2015, 02:33) *
П.П.С. Задумался - а стоит ли прописывать "еще немножко стилей для IE6-7"... Залез в Я.Метрику: за год из 15 тонн уников на долю IE6 и 7 пришлось 30 визитов...
На ваше усмотрение.

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


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1124 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2295 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3920 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3646 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1942 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 29.3.2024, 11:25
Дизайн