Позиционирование текста в меню - HTML, CSS - Ответ 1920413

@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

Вернуться к обсуждению:
Позиционирование текста в меню HTML, CSS

Другие темы раздела
HTML, CSS Подскажите, как сверстать такой дизайн? Есть такой дизайн: Ширина фиксированная, в длину должен растягиваться. Пытался сверстать с помощью 8 дивов, с помощью абсолютного позиционирования - ничего не выходит :( Уже всю голову сломал :( https://www.cyberforum.ru/ html/ thread342578.html	Действие при закрытии popup-окна - возможно ли? HTML, CSS Есть страница авторизации, после упешного ввода клиентом логина-пароля ему открывается дополнительное popup-окно, в котором идет счет времени его сеанса, и присутствует кнопка "Отключиться". Проблема в том, что если клиент тупо ("крестиком" в правом верхнем углу) закрывает это popup-окно, то у него в итоге больше нет кнопки для завершения сеанса. Возможно ли каким-то способом определить,...
HTML, CSS Самый простой способ воспроизведения музыки https://www.cyberforum.ru/ html/ thread342239.html Здравствуйте, хочу создать на сайте раздел с музыкой. Нашел различную инфу напримет http://atimstudio.ucoz.ru/index/0-80. Но хочется сделать как vkontakte.ru. Я список файлов получаю из БД и вывожу его на страницу. А как воспроизводить не знаю. Подскажите.	HTML, CSS Подвинуть текст чуть левее, добавить отступы И ещё такой вопрос не по теме я поставил картинку на ссылку при наведении, но эта картинка начинается от начала текста и получается нужно ставить текст с самого начала без отступа. Вопрос такой как можно подвинуть чуть левее текст и чтобы картинка начиналась так же чуть левее текста ? На рисунке в 1 меню это видно при наведении меняется картинка на синюю и нужно подвинуть текст левее как на... https://www.cyberforum.ru/ html/ thread342150.html
Raphael JS & Opera 11 HTML, CSS Доброго времени суток! В процессе использования библиотечки raphael js наткнулся на очень неприятный баг - хотелось бы узнать, может кто видел такое и даже знает как справиться с бедой?) Суть в следующем - с помощью raphael js я отрисовываю карту, состоящую из svg'шных элементов path. При наведении мыши на него, отображается название области. Все работает отлично, но в opera 11 при масштабах,...	HTML, CSS Строка CSS Всем привет, Помогите разабрать строку CSS. .menu li{ background: url("title.png") no-repeat scroll 0 0 transparent; } background - фон no-repeat - который не повторятся https://www.cyberforum.ru/ html/ thread342034.html
HTML, CSS блоки по центру есть 2 блока: #menu{ background:oldlace; width:190px; height:300px;margin: 0 auto; } #content{ background:oldlace; width:525px; height:300px; position:absolute; left:190px; top:100px; } Нужно сделать так что бы они были по центру но не сливались. Меню слева, а контент справа. Подскажите как сделать? https://www.cyberforum.ru/ html/ thread341994.html	как это сделать? HTML, CSS Подскажите, пожалуйста, как можно сделать на сайт вот такую штуку, как на этом сайте http://www.amaloyar.admoblkaluga.ru/home С правой стороны экрана прикреплена к экрану Обратная связь. А так же если ниже опускаешься, вылезает слева кнопка - Назад.
HTML, CSS Положение картинки Добрый вечер. Подскажите, пожалуйста. Есть табличка. Необходимо вставить в ячейку этой таблицы картинку, что бы она была в правом нижнем углу. Как это задать? Пишу вот так, но картинка "прицепляется" только к правому краю. <img align="right" border="1" src="images/1.png" > https://www.cyberforum.ru/ html/ thread341988.html	HTML, CSS выподающее меню попадает под окно видео Как сделать чтоб меню было над оком видео? Меню реализованно в HTML+CSS видео вставлено на сайт с ютуба через фрейм. Подскажите параметр чтоб меню было поверх всего. https://www.cyberforum.ru/ html/ thread341964.html
Страници html HTML, CSS я перечитал про разные движки кучу информации и все то я понял это то что лучше всего сайт делать при помощи html страничек. Вот хотелось бы узнать можно ли при постарении такого сайта взять шаблон допустим с движка DLE (уж больно он мне понравился.) и использовать его???? Да и если кто может скиньте ссылок на схемы постарение таких сайтов... блок схемки там или тому подобное... ах да сайт с...	HTML, CSS вопрос по работе формы на сайте https://www.cyberforum.ru/ html/ thread341931.html есть форма для выборки товара в магазине код формы выглядит так: <form action="http://.../shop/podbor-shin/" method="get"> Производитель шин: <select size="1" name="producer_id" > <option value="0" selected>- - - </option> ... <option value="89">ЯШЗ</option>

Новые блоги и статьи
Из чего и как собрать свой домашний кинотеатр bt_guru 21.01.2025 Создание домашнего кинотеатра: от идеи до реализации В современном мире домашний кинотеатр стал неотъемлемой частью комфортного жилого пространства, предоставляя возможность наслаждаться. . .	Ошибки стиральных машин bt_guru 21.01.2025 Современные стиральные машины представляют собой сложные электронные устройства, оснащенные множеством датчиков и систем контроля. Они способны самостоятельно определять вес загруженного белья,. . .	Копирование (маппинг) объектов в JavaScript bytestream 21.01.2025 В современной разработке программного обеспечения копирование объектов представляет собой фундаментальную операцию, которая требует особого внимания и понимания. Маппинг объектов в JavaScript – это. . .	Как работать с Apache Kafka в C# .NET bytestream 21.01.2025 Apache Kafka представляет собой распределенную платформу потоковой передачи данных, которая произвела революцию в области обработки больших объемов информации в реальном времени. Эта система,. . .	Как использовать RabbitMQ в C# .NET bytestream 21.01.2025 RabbitMQ представляет собой мощный брокер сообщений, который эффективно решает эту задачу, обеспечивая надежную передачу данных между множеством приложений. Этот инструмент реализует протокол AMQP. . .	Как объединить последние коммиты в Git bytestream 21.01.2025 В мире разработки программного обеспечения система контроля версий Git стала незаменимым инструментом для управления исходным кодом. Одной из наиболее полезных, но порой сложных для освоения функций. . .
Как запушить новую локальную ветку (branch) в удалённый репозиторий Git и отслеживать её bytestream 21.01.2025 В современной разработке программного обеспечения система контроля версий Git стала неотъемлемым инструментом для эффективного управления кодом и организации командной работы. Одной из ключевых. . .	Как создать директорию и все родительские директории, указанные в пути, с помощью Python bytestream 21.01.2025 Python предоставляет мощные инструменты для работы с файловой системой через встроенные модули os и pathlib, которые значительно упрощают процесс манипуляции директориями. Эти модули содержат. . .	Как работать с массивами в JavaScript bytestream 21.01.2025 Массивы в JavaScript представляют собой один из фундаментальных типов данных, который позволяет хранить упорядоченные коллекции различных элементов в одной переменной. Эта структура данных является. . .	Какая максимальная длина адреса (URL) в различных браузерах и стандартах bytestream 21.01.2025 В современном мире интернет-технологий URL-адреса (Uniform Resource Locator) играют фундаментальную роль в функционировании веб-пространства. Эти уникальные идентификаторы ресурсов стали неотъемлемой. . .	Как сбросить локальный репозиторий до состояния удалённого репозитория Git bytestream 21.01.2025 При разработке программного обеспечения с использованием системы контроля версий Git разработчики часто сталкиваются с необходимостью синхронизации локального и удаленного репозиториев. Данная задача. . .	Как запретить подсветку выделенного текста с помощью CSS bytestream 20.01.2025 Подсветка текста при выделении является стандартным поведением браузера, которое не всегда соответствует дизайнерским решениям или функциональным требованиям веб-приложения. Выделение текста может. . .

	17.08.2011, 22:18