Позиционирование текста в меню

@KorPaEv · Регистрация: 08.07.2011

Author24 — интернет-сервис помощи студентам

Всем привет!
Значит создал менюшку, отрисовал ее картинкор, т.к.размер будет пока фиксированный , тянуться не будет.

интересует, как мне спозиционировать текст в этой менюшке. Длинна слов разная, а в каждом блоке меню он должен находиться по центру.Какие идеи?
Я делал так: див с картинкой меню - далее в нем див для текста - далее в этом диве список - далее флоатом сделал горизонтальным его и отступы между элементами списка делал паддингами. Но проблема что они не центрируются и список сваливается на другую строку.

Комментарий модератора

Прикрепляйте изображения и файлы к сообщениям.
https://www.cyberforum.ru/abou... 03521.html

@prince2011 · 17.08.2011, 11:41

Дак легче уже просто вырезать 4 куска для меню и прикрепить их вместе.

@KorPaEv · 17.08.2011, 13:05 **[ТС]**

Сообщение от prince2011

Дак легче уже просто вырезать 4 куска для меню и прикрепить их вместе.

а текст как тогда к каждому куску прикрепить? отдельными дивами получается?

@prince2011 · 17.08.2011, 13:06

Ну да.

@Alorian · 17.08.2011, 13:28

Сообщение от KorPaEv

Я делал так: див с картинкой меню - далее в нем див для текста - далее в этом диве список - далее флоатом сделал горизонтальным его и отступы между элементами списка делал паддингами.

Мда.
1. Картинку разрезать на три — левые два угла, градиент основного меню, правые два угла.
2. Углы два отдельных дива, посередине между этими дивами список ul.
3. В качестве background для списка ul поставить третью картинку.
4. Выровнять пункты списка и углы флоатами по горизонтали.

Сообщение от KorPaEv

т.к.размер будет пока фиксированный , тянуться не будет

Без разницы, в любом случае описанный выше вариант лучше расстановки текста отступами.
В будещем если меню все таки станет тянуться, либо при переименовании одного из пунктов для изменения понадобится несколько секунд.

@KorPaEv · 17.08.2011, 22:18 **[ТС]**

Сообщение от Alorian

Мда.
1. Картинку разрезать на три — левые два угла, градиент основного меню, правые два угла.
2. Углы два отдельных дива, посередине между этими дивами список ul.
3. В качестве background для списка ul поставить третью картинку.
4. Выровнять пункты списка и углы флоатами по горизонтали.

Без разницы, в любом случае описанный выше вариант лучше расстановки текста отступами.
В будещем если меню все таки станет тянуться, либо при переименовании одного из пунктов для изменения понадобится несколько секунд.

Спасиб но сделал проще замарачиываться с дивами не стал их слишком много, сделал табличку внутри дива потом выровнел в ней остально, смотрибельно))

HTML5

<div id="menu">             
                <table cellpadding="0" cellspacing="0">
                    <tr>
                    <td><a href="#">Печати</a></td>
                    <td><a href="#">Штампы</a></td>
                    <td><a href="#">Факсимиле</a></td>
                    <td><a href="#">Визитки</a></td>
                    </tr>
                </table>
            </div>

CSS

div#menu
 
    {
    margin:15px 15px 30px 15px;
    position:relative;
    background:url(../img/menu.png) no-repeat left top;
    width:770px;
    height:45px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:24px;
    font-weight:bold;
    }
 
div#menu table   
 
    {
    width:100%; /*ширина всей таблички относительно 800 растгивается на 100%*/
    }
    
div#menu table td    
 
    {
    width:25%; /*ширина колонки относительно 100%*/
    }
 
div#menu td a
 
    {
    display:table-cell; /*мнимая табличка*/
    text-align:center;
    vertical-align:middle;
    width:195px; /*ширина ячейки*/
    height:45px;
    text-decoration:none;
    color:#333333;
    }
 
div#menu td a:hover
 
    {
    background:url(../img/text_ahref.png) no-repeat center top;
    color:black
    }

Добавлено через 11 минут

Сообщение от KorPaEv

Спасиб но сделал проще замарачиываться с дивами не стал их слишком много, сделал табличку внутри дива потом выровнел в ней остально, смотрибельно))

HTML5

<div id="menu">             
                <table cellpadding="0" cellspacing="0">
                    <tr>
                    <td><a href="#">Печати</a></td>
                    <td><a href="#">Штампы</a></td>
                    <td><a href="#">Факсимиле</a></td>
                    <td><a href="#">Визитки</a></td>
                    </tr>
                </table>
            </div>

CSS

div#menu
 
    {
    margin:15px 15px 30px 15px;
    position:relative;
    background:url(../img/menu.png) no-repeat left top;
    width:770px;
    height:45px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:24px;
    font-weight:bold;
    }
 
div#menu table   
 
    {
    width:100%; /*ширина всей таблички относительно 800 растгивается на 100%*/
    }
    
div#menu table td    
 
    {
    width:25%; /*ширина колонки относительно 100%*/
    }
 
div#menu td a
 
    {
    display:table-cell; /*мнимая табличка*/
    text-align:center;
    vertical-align:middle;
    width:195px; /*ширина ячейки*/
    height:45px;
    text-decoration:none;
    color:#333333;
    }
 
div#menu td a:hover
 
    {
    background:url(../img/text_ahref.png) no-repeat center top;
    color:black
    }

Кстати сразу вопрос по кроссбраузерности!
Везде все норм, кроме ИЕ7, там текст уходит в угол менюшки и не тянется процентным позиционированием, как решить проблему?

Комментарий модератора

Используйте теги соответствующих языков. Тег CODE только если нет нужного языка.
https://www.cyberforum.ru/abou... 03521.html

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	17.08.2011, 11:41	2
	Дак легче уже просто вырезать 4 куска для меню и прикрепить их вместе. 0

@KorPaEv 58 / 34 / 8 Регистрация: 08.07.2011 Сообщений: 235
	17.08.2011, 13:05 [ТС]	3
	Сообщение от prince2011 Дак легче уже просто вырезать 4 куска для меню и прикрепить их вместе. а текст как тогда к каждому куску прикрепить? отдельными дивами получается? 0

@prince2011 97 / 36 / 6 Регистрация: 05.07.2011 Сообщений: 382
	17.08.2011, 13:06	4
	Ну да. 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	17.08.2011, 13:28	5
	Сообщение от KorPaEv Я делал так: див с картинкой меню - далее в нем див для текста - далее в этом диве список - далее флоатом сделал горизонтальным его и отступы между элементами списка делал паддингами. Мда. 1. Картинку разрезать на три — левые два угла, градиент основного меню, правые два угла. 2. Углы два отдельных дива, посередине между этими дивами список ul. 3. В качестве background для списка ul поставить третью картинку. 4. Выровнять пункты списка и углы флоатами по горизонтали. Сообщение от KorPaEv т.к.размер будет пока фиксированный , тянуться не будет Без разницы, в любом случае описанный выше вариант лучше расстановки текста отступами. В будещем если меню все таки станет тянуться, либо при переименовании одного из пунктов для изменения понадобится несколько секунд. 0

	17.08.2011, 22:18