Как сделать чтобы в панели навигации

Re: Как правильно сделать горизонтальную панель навигации на

Здравствуйте, MBy, Вы писали:
MBy>Как привильно сделать блочной вёрсткой горизонтальную полосу навигации на всю ширину экрана?
MBy>То есть, грубо говоря, как перевести такую таблицу в блоки:
MBy> <table width="100%"><tr> <td width="25%"><a href="#">Item #1</a></td> <td width="25%"><a href="#">Item #2</a></td> <td width="25%"><a href="#">Item #3</a></td> <td width="25%"><a href="#">Item #4</a></td> </tr></table>
У тебя все правильно сделано, только проценты с колонок (ячеек) таблицы можно убрать, потому что браузер автоматически распределит ширниу каждого столбца. А 100% в атрибутах таблицы и так растянут полосу на всю ширину экрана

... << RSDN@Home 1.1.4 stable SR1 rev. 568>>

Re[4]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, Пацак, Вы писали:
MBy> <table width="100%"><tr> <td width="25%"><a href="#">Item #1</a></td> <td width="25%"><a href="#">Item #2</a></td> <td width="25%"><a href="#">Item #3</a></td> <td width="25%"><a href="#">Item #4</a></td> </tr></table>
П>hbar.html
П> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <TITLE>Horisontal!</TITLE> <LINK rel="stylesheet" type="text/css" href="hbar.css"> </head> <body> <div id="hnav"> <ul> <LI><a href="#">Item #1</a></LI> <LI><a href="#">Item #2</a></LI> <LI><a href="#">Item #3</a></LI> <LI><a href="#">Item #4</a></LI> </ul> </div> </body>
П>hbar.css
П> #hnav { color: red; witdh: 100%; margin: 0; padding: 0; } #hnav ul { width: 100%; margin: 0; padding: 0; clear: both; list-style: none; } #hnav ul li { float: left; width: 25%; text-align: center; } #hnav a { display: block; width: auto; padding: 0.1em; text-decoration: none; border: 1px solid brown; background: yellow; color: brown; } #hnav a:hover { background: red; color: yellow; }
Поговорим про оверхед?


[RSDN@Home][1.2.0][alpha][651]
[Hовые взгляды сквозь старые щели. [Г. Лихтенберг]]

http://sheridan.stavcom.ru/avatar.php#i.pnghttp://sheridan.stavcom.ru/data/filez/images/pin.gif
Matrix has you...

Re[3]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, MBy, Вы писали:
MBy>Ещё раз повтораю, что мне нужно сделать это блочной вёрсткой, т. е. без использования таблиц!
Так пойдет?
hbar.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <TITLE>Horisontal!</TITLE> <LINK rel="stylesheet" type="text/css" href="hbar.css"> </head> <body> <div id="hnav"> <ul> <LI><a href="#">Item #1</a></LI> <LI><a href="#">Item #2</a></LI> <LI><a href="#">Item #3</a></LI> <LI><a href="#">Item #4</a></LI> </ul> </div> </body>
hbar.css
#hnav { color: red; witdh: 100%; margin: 0; padding: 0; } #hnav ul { width: 100%; margin: 0; padding: 0; clear: both; list-style: none; } #hnav ul li { float: left; width: 25%; text-align: center; } #hnav a { display: block; width: auto; padding: 0.1em; text-decoration: none; border: 1px solid brown; background: yellow; color: brown; } #hnav a:hover { background: red; color: yellow; }
PS: В IE не проверял — нет под рукой.

Ку...

Re[5]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, MBy, Вы писали:
MBy>Кстати, в случае разной ширины кнопочек, прийдётсья ширину прописывать вручную каждой? Или можно сделать коем-то образом, типа как в таблицах — автоматической шириной?
Можно сделать
#hnav ul li {... width: auto;... }
но в этом случае элементы не будут распределяться по всей ширине экрана, а "соберутся в кучку" слева. Как сделать чтоб было точь-в-точь как таблица (то есть элементы во всю ширину и растянутые в зависимости от наполнения) я не знаю, наверное лучше в этом случае и правда сделать таблицей, по крайней мере это точно будет работать во всех браузерах.

Ку...

Re[6]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, Sheridan, Вы писали:
MBy>>Я даже спорить с тобой не буду, надоело
S>Давай не будем спорить. Мне тоже надоедать начало...
S>Объясни просто, для чего именно блоки, если тоже самое можно сделать таблицей и будет более совместимо и проще?
S>Я вот этого не понимаю
Во-первых, это не в моих интересах.
Во-вторых, это выходит за рамки данного топика.
В-третьих, это попахивает holy war, а это отдельный подфорум.
В-четвёртых, Гугл и Яндекс ещё никто не отменял
Да прибудет с нами истина!

Hoc est simplicissimum!

Re[7]: Как правильно сделать горизонтальную панель навигации

П>>но в этом случае элементы не будут распределяться по всей ширине экрана, а "соберутся в кучку" слева.
MBy>IMO, для этого и auto ставить не нужно
MBy>Спасибо за идею. Если у кого ещё какие мысли есть, с удовольствием выслушаю. Sheridan’а прошу не беспокоить
Я за него выступлю
Для того, чтобы сделать меню все одного размера (скажем, width: 100px), приходится для ссылок делать display:block, что меня напрягает. Потому что мне нужен размер не ссылки, а блока, в котором эта ссылка находится. Из-за того, что float превращает элемент в inline, а inline на width плевать хотел. display:inline-block поддерживается не всеми браузерами.
Невозможно сделать что-нибудь в таком стиле:
----------------------------------------------------- | | Long menu string | | | Menu | goes in this | Menu | | | cell | | -----------------------------------------------------
И вообще никак управлять элементами нельзя, кроме как набором margin, padding и (о, боги!) line-spacing.
Невозможно аккуратно разместить по центру экрана (из-за float: left). Придется извращаться с обертками
А вообще, сайт должен состоять из простой таблицы (никаких colspan и rowspan), внутри которой должны распологаться обCSSнутые элементы. Так намного меньше геморроя

... << RSDN@Home 1.2.0 alpha rev. 647>>


dmitriid.com … GitHub … LinkedIn

Re[11]: Как правильно сделать горизонтальную панель навигаци

Здравствуйте, Mamut, Вы писали:
M>Не обязательно
Ну, скажем так, как правило. В любом случае несколько "оверхедных" строчек в CSS-ке это такой мизер по отношению к навигации остальному трафику, что...
M>С блочной версткой следующий вопрос:
M>Как сделать абсолютный аналог Шеридановской таблицы в блочной верстке?
Уже писал — ИМХО никак. Таблицам-таблицево, блокам-блоково.
M>Как блочное меню разместить по центру страницы?
Можно, например, попробовать вот так, но в IE работать АФАИК не будет (проверить не могу — нет его под рукой):
#hnav { margin: 0; padding: 0; } #hnav { margin: 0 25% 0 25%; min-width: 50%; } #hnav ul { clear: both; list-style: none; } #hnav ul li { float: left; text-align: center; width: 25%; } #hnav a { display: block; width: auto; padding: 2px; text-decoration: none; background: yellow; color: brown; } #hnav a:hover { background: red; color: yellow; }
Вообще же согласен — глюков и подводных камней в блочной верстке предостаточно. Причем просвета особо не видно — браузеры на CSS кладут, а w3c вместо того, чтоб устранять двусмысленности и неудобства в стандарте наворачивает на него новые фенечки. А жаль — сама идея-то блочной верстки (и вообще отделения дизайна от содержимого) была очень хорошая...

Ку...

Как правильно сделать горизонтальную панель навигации на CSS

Привет!
Как привильно сделать блочной вёрсткой горизонтальную полосу навигации на всю ширину экрана?
То есть, грубо говоря, как перевести такую таблицу в блоки:
<table width="100%"><tr> <td width="25%"><a href="#">Item #1</a></td> <td width="25%"><a href="#">Item #2</a></td> <td width="25%"><a href="#">Item #3</a></td> <td width="25%"><a href="#">Item #4</a></td> </tr></table>

Hoc est simplicissimum!

Re[2]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, Xeon303, Вы писали:
X>У тебя все правильно сделано, только проценты с колонок (ячеек) таблицы можно убрать, потому что браузер автоматически распределит ширниу каждого столбца. А 100% в атрибутах таблицы и так растянут полосу на всю ширину экрана
Ещё раз повтораю, что мне нужно сделать это блочной вёрсткой, т. е. без использования таблиц!

Hoc est simplicissimum!

Re[3]: Как правильно сделать горизонтальную панель навигации

От: Sheridan Россия   Дата:  29.05.06 06:16 Оценка: Здравствуйте, MBy, Вы писали:
MBy>Ещё раз повтораю, что мне нужно сделать это блочной вёрсткой, т. е. без использования таблиц!
Забудь про блоки, делай по-человечески.


[RSDN@Home][1.2.0][alpha][651]
[Вытапливай воск, но сохраняй мед. [К. Прутков]]

http://sheridan.stavcom.ru/avatar.php#i.pnghttp://sheridan.stavcom.ru/data/filez/images/pin.gif
Matrix has you...

Re[5]: Как правильно сделать горизонтальную панель навигации

От: Пацак Россия   Дата:  29.05.06 07:14 Оценка: Здравствуйте, Sheridan, Вы писали:
S>Поговорим про оверхед?
Лучше про кэширование.

Ку...

Re[6]: Как правильно сделать горизонтальную панель навигации

От: Sheridan Россия   Дата:  29.05.06 10:29 Оценка: Здравствуйте, Пацак, Вы писали:
S>>Поговорим про оверхед?
П>Лучше про кэширование.
Может всетаки про оплату траффика сервера?


[RSDN@Home][1.2.0][alpha][651]
[Hужно остерегаться доведения скромности до степени унижения. [А. Бакиханов]]

http://sheridan.stavcom.ru/avatar.php#i.pnghttp://sheridan.stavcom.ru/data/filez/images/pin.gif
Matrix has you...

Re[7]: Как правильно сделать горизонтальную панель навигации

От: Пацак Россия   Дата:  29.05.06 10:46 Оценка: Здравствуйте, Sheridan, Вы писали:
S>Может всетаки про оплату траффика сервера?

Ку...

Re[4]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, Sheridan, Вы писали:
MBy>>Ещё раз повтораю, что мне нужно сделать это блочной вёрсткой, т. е. без использования таблиц!
S>Забудь про блоки, делай по-человечески.
Я даже спорить с тобой не буду, надоело Вот ты не любишь блочную вёрстку, страх! Пора делать сообщество антиблочников ADAT — Anti-Div Action Team
Но повторюсь, вопрос был не то, что лучше, а как сделать именно так. За тобой опять оффтопик

Hoc est simplicissimum!

Re[4]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, Пацак, Вы писали:
MBy>>Ещё раз повтораю, что мне нужно сделать это блочной вёрсткой, т. е. без использования таблиц!
П>Так пойдет?
П> П>#hnav ul li { П> float: left; П> width: 25%; П> text-align: center; П>} П>
Ах вот как ты решил проблему. Тоже вариант. Спасибо
Я уже думал делать абсолютное позиционирование относительно родителя ul. Но пока руки не долши попробовать. Потому позже ещё расмотрю какой вариант лучше.
Кстати, в случае разной ширины кнопочек, прийдётсья ширину прописывать вручную каждой? Или можно сделать коем-то образом, типа как в таблицах — автоматической шириной?

Hoc est simplicissimum!

Re[6]: Как правильно сделать горизонтальную панель навигации

Здравствуйте, Пацак, Вы писали:
MBy>>Кстати, в случае разной ширины кнопочек, прийдётсья ширину прописывать вручную каждой? Или можно сделать коем-то образом, типа как в таблицах — автоматической шириной?
П>Можно сделать
П> П>#hnav ul li { П>... П> width: auto; П>... П>} П>
П>но в этом случае элементы не будут распределяться по всей ширине экрана, а "соберутся в кучку" слева.
IMO, для этого и auto ставить не нужно
Спасибо за идею. Если у кого ещё какие мысли есть, с удовольствием выслушаю. Sheridan’а прошу не беспокоить

Hoc est simplicissimum!

Re[5]: Как правильно сделать горизонтальную панель навигации

От: Sheridan Россия   Дата:  30.05.06 03:28 Оценка: Здравствуйте, MBy, Вы писали:
S>>Забудь про блоки, делай по-человечески.
MBy>Я даже спорить с тобой не буду, надоело
Давай не будем спорить. Мне тоже надоедать начало...
Объясни просто, для чего именно блоки, если тоже самое можно сделать таблицей и будет более совместимо и проще?
Я вот этого не понимаю
MBy>Вот ты не любишь блочную вёрстку, страх! Пора делать сообщество антиблочников ADAT — Anti-Div Action Team
Пора.
MBy>Но повторюсь, вопрос был не то, что лучше, а как сделать именно так. За тобой опять оффтопик
Ну извини


[RSDN@Home][1.2.0][alpha][651]
[Иной сходит в могилу ста лет, а умер едва родившись. [Ж.-Ж. Руссо]]

http://sheridan.stavcom.ru/avatar.php#i.pnghttp://sheridan.stavcom.ru/data/filez/images/pin.gif
Matrix has you...

Re[8]: Как правильно сделать горизонтальную панель навигации

От: Sheridan Россия   Дата:  30.05.06 03:28 Оценка: Здравствуйте, Пацак, Вы писали:
S>>Может всетаки про оплату траффика сервера?
П>
Ты не знал что за траффик платить надо?
Лично я искал когда где разместить сервак в колокейшн, я этот вопрос поднимал у провов. За траффик оплата идет. Укого за входящий, у кого за исходящий...


[RSDN@Home][1.2.0][alpha][651]
[Мужчина, который умно говорит о любви, не очень любит. [Ж. Санд]]

http://sheridan.stavcom.ru/avatar.php#i.pnghttp://sheridan.stavcom.ru/data/filez/images/pin.gif
Matrix has you...

Re[9]: Как правильно сделать горизонтальную панель навигации

От: Пацак Россия   Дата:  31.05.06 06:01 Оценка: Здравствуйте, Sheridan, Вы писали:
S>Ты не знал что за траффик платить надо?
Я не понял какое это отношение имеет к теме. Насколько я понимаю css-файл модифицироваться не будет, и после первой же загрузки осядет в кэше клиента. Сама же html-ка в случае div'ов получается даже меньше, чем табличная. При чем же здесь трафик сервера?

Ку...

Re[10]: Как правильно сделать горизонтальную панель навигаци

П>Я не понял какое это отношение имеет к теме. Насколько я понимаю css-файл модифицироваться не будет, и после первой же загрузки осядет в кэше клиента.
Не обязательно
П>Сама же html-ка в случае div'ов получается даже меньше, чем табличная. При чем же здесь трафик сервера?
С блочной версткой следующий вопрос:
Как сделать абсолютный аналог Шеридановской таблицы в блочной верстке?
Как блочное меню разместить по центру страницы?

... << RSDN@Home 1.2.0 alpha rev. 647>>


dmitriid.com … GitHub … LinkedIn Подождите...Wait...

Пока на собственное сообщение не было ответов, его можно удалить.

Заголовок:


Источник: http://rsdn.org/forum/web/1922302.hot


Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как сделать блог. Видеоуроки Владимира Есипова: Как убрать панель Что делают с зубом при флюсе

Как сделать чтобы в панели навигации Как правильно сделать горизонтальную панель навигации на CSS - Веб
Как сделать чтобы в панели навигации Как сделать переходы в панели навигации? - Сообщение HTML
Как сделать чтобы в панели навигации Как сделать панель навигации для сайта через html
Как сделать чтобы в панели навигации Ответы Как сделать панель навигации в Blogger?
Как сделать чтобы в панели навигации Как сделать панель навигации для сайта
Как сделать чтобы в панели навигации Как скрыть панель навигации в Android
Как сделать чтобы в панели навигации Videotutorial - Лунтик. Подарок из конфет своими руками. Luntik
В домашних условиях своими руками создаем классные поделки Виниры на передние зубы: стоимость, фото, отзывы Внутреннее богатство отношений Емкостное реле Как пожаловаться на сайт мошенников в интернете Календарь стрижек 2017 по лунному гороскопу когда лучше стричь Купить Открытка "Ёжик и медвежонок " - тёмно-синий, ежик в тумане Модели пуловеров, джемперов и свитеров спицами

Похожие новости