Помощник
|
Подскажите как избавиться от align='center' |
ShowPrint
|
Сообщение
#1
|
|||
|
|
|||
|
||||
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"> Сообщение отредактировал yury - 18.4.2015, 9:54 |
|
|
ShowPrint
|
Сообщение
#3
|
||
|
display: inline-block; Не сильно соответствует моей идее - с его (Вашей) помощью отцентрировалось горизонтально, но потерялась возможность вертикального центрирования которая обеспечивалась посредством "display: table-cell"... Дело в том, что у меня parent имеет большую высоту, а inline-block прижимает содержимое "к потолку"... Плюс ко всему прилично смотрится когда всё меню помещается в одну строку, а когда не помещается - получается "кривовато"... ((( В идеале хотелось бы добиться и горизонтального и вертикального центрирования, а если бы при этом на нижней картинке обе строки центрировались и горизонтально и вертикально - была бы вообще "сказка"... Первопричиной "переделки и изысков" стало желание (при изменении стилей посредством @media) реализовать одно универсальное меню (а потом и весь контент) для ПК, планшетов и мозгофонов... ))) На данном этапе получается как-то так: Именно поэтому изначально и собирался реализовывать это меню посредством <span> - они как-то проще поддаются манипуляциям с выравниванием... Или это надо реализовывать совсем другими способами? |
||
|
|||
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"> Сообщение отредактировал yury - 18.4.2015, 19:05 |
|
|
ShowPrint
|
Сообщение
#5
|
|
yury_mw, inline-block я пробовал - не подходит...
Дело в том, что у меня parent имеет большую высоту, а inline-block прижимает содержимое "к потолку"... Плюс ко всему прилично смотрится когда всё меню помещается в одну строку, а когда не помещается - получается "кривовато"... ((( Пробовал обернуть в еще один div и его отцентрировать вертикально, но ничего не получилось... :wacko: |
|
|
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">И еще немножко стилей для IE6-7: #main { Сообщение отредактировал yury - 19.4.2015, 9:49 |
|
|
ShowPrint
|
Сообщение
#7
|
|
Спасибо, так уже пробовал тоже... Сейчас повторил... )))
Получается центрирование, но когда при изменении ширины окна элементы меню складываются в две строки, то вторая строка уходит "под" первую, которая стоит на месте... То есть вертикальный центр "menu" становится ниже центра "parent", а хочется чтоб они совпадали, вне зависимости от количества строк, в которые сложились элементы меню, то есть высоты "menu"... Мозг сломан окончательно... завтра попробую не исправлять а начать писать с чистого листа... ОГРОМНОЕ СПАСИБО yury_mw, Вы реальный "волшебник вёрстки"!!! "+" в репу не пролез - объявляется большой и жирный "плюс к карме"... П.С. Есть мысль завтра попробовать реализовать мысль посредством "блочных" span-ов... По идее они должны центрироваться и переноситься как простой текст внутри div-а - больше шансов что я сумею одолеть задачу... Сообщение отредактировал ShowPrint - 18.4.2015, 20:41 |
|
|
yury_mw |
18.4.2015, 20:55;
Ответить: yury_mw
Сообщение
#8
|
|
Получается центрирование, но когда при изменении ширины окна элементы меню складываются в две строки, то вторая строка уходит "под" первую, которая стоит на месте... То есть вертикальный центр "menu" становится ниже центра "parent", а хочется чтоб они совпадали, вне зависимости от количества строк, в которые сложились элементы меню, то есть высоты "menu"... Не понял, что уходит и что не совпадает. Вроде все ерзает и центруется и по вертикали и по горизонтали: http://jsfiddle.net/ec5w2day/16/ Нарисуйте что ли, как вам хочется чтоб было. Сообщение отредактировал yury - 18.4.2015, 20:59 |
|
|
ShowPrint
|
Сообщение
#9
|
|
yury_mw, ну не знаю... У меня несколько вариантов:
1) Вы - волшебник! 2) Я - полный тупица 3) В одном флаконе 1) и 2) Каким бы ни был правильный вариант - сейчас буду разбираться... П.С. Всё работает и фунциклирует... Остается вопрос - чем я занимался весь день... П.П.С. Задумался - а стоит ли прописывать "еще немножко стилей для IE6-7"... Залез в Я.Метрику: за год из 15 тонн уников на долю IE6 и 7 пришлось 30 визитов... Сообщение отредактировал ShowPrint - 19.4.2015, 2:35 |
|
|
yury_mw |
19.4.2015, 9:45;
Ответить: yury_mw
Сообщение
#10
|
|
П.П.С. Задумался - а стоит ли прописывать "еще немножко стилей для IE6-7"... Залез в Я.Метрику: за год из 15 тонн уников на долю IE6 и 7 пришлось 30 визитов... На ваше усмотрение.Примечание: Некоторые считают, что имеют право "воспитывать" посетителей и "подталкивать прогресс браузеров", заставляя пользователей отказом от поддержки старых и "неправильных" браузеров переходить на новые и "правильные". И есть мнение, что дело верстальщика не воспитывать, а сверстать так, чтоб максимально все смогли посмотреть страничку сайта. Если за счет этого может добавиться хотя бы 1 посетитель – хорошо. Выбор за вами. |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Арбитражники, как ведете учет расходов и доходов? | 11 | Boymaster | 1754 | Вчера, 23:35 автор: Boymaster |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 29 | freeax | 4779 | Вчера, 1:19 автор: sergio11 |
|
Как вы отдыхаете от работы за компом | 148 | adw-kupon.ru | 19679 | 8.4.2024, 10:37 автор: Skyworker |
|
Как вы бросили работу и перешли на заработок с сайтов? | 18 | uahomka | 3088 | 5.4.2024, 5:53 автор: Skyworker |
|
Как бездомные хранят деньги? | 81 | metvekot | 13647 | 31.3.2024, 12:44 автор: Boymaster |
Текстовая версия | Сейчас: 18.4.2024, 13:26 |