DjTarik
-
Posts
698 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by DjTarik
-
Ха! =) Прикольно... Сделать из списка блочный элемент и при помощи "флоат - лефт" их выровнять... А я список делал инлайновым... Про блок даже и не подумал... P.S. Хотя сам это проблему решил через просто тупое добавление этой границы через "имг" и в отдельный li... Что-то типо этого, если кому интересно: <ul> <li><img src="images/li_bg.gif" class="li_bg" alt="" title=""><a href="#">Home</a></li> <li><img src="images/li_bg.gif" class="li_bg" alt="" title=""><a href="#">About Us</a></li> <li><img src="images/li_bg.gif" class="li_bg" alt="" title=""><a href="#">Contact Us</a></li> <li><img src="images/li_bg.gif" class="li_bg" alt="" title=""><a href="#">Help</a></li> <li><img src="images/li_bg.gif" class="li_bg" alt="" title=""><a href="#">Policy</a><img src="images/li_bg.gif" class="li_bg" alt="" title=""></li> </ul> Ну и кое что в классах прописал... P.S. Но Ванин метод нужно запомнить... Не раз ещё пригодится... =)))
-
Дивамии и таблицами это я тож сделаю =) ... Интересует именно на списках... Как сказал rash - так семантичнее... А на списках не получается в элементе li выровнять фоновый рисунок и сам текст ровно по центру, т.к. не получается задать li высоту 100%...
-
Собственно - сам вопрос: Реально ли сверстать такое меню на неупорядоченном списке? Проблема в том, что я не могу придумать, как сделать эти разделители... Есть у кого-нить варианты? Был вариант сделать через фоновый неповторяющийся рисунок, но элементы li не растягиваются по высоте на 100%...
-
По моему на валидность в данном случае это не влияет... Если картинки не несут информации и участвуют только в оформлении страницы - то забивай в фон... Если что-то значимое - типо там изображение продаваемого продукта - ставь через имг... Так и при отключённой графике будет видно, что что-то там есть... Да и альт с тайтл поможет... p.S. А вообще - каждый решант для себя сам...
-
mini: Точно... То, что надо... Это написано где-нить на HTMLBOOK или я просто не внимательно читал? (просто всё перерыл - ничего подобного не видел) Других решений нет??? =) По второму вопросу - интересует только при изменении размера шрифта в Мозилле при помощи Контрл+... Или сейчас это уже никто не практикует? O_o
-
Всё-таки не получается так, как нужно... Вот код, для наглядности: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Проверка</title> <style type="text/css"> body { margin: 100px auto; width: 700px; } div.son { float: left; width: 33%; border: 1px solid red; } div#mother { border: 1px solid green; padding: 20px; } </style> </head> <body> <div id="mother"> <div class="son">1<br>1<br>1<br>1<br>1<br></div> <div class="son">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br></div> <div class="son">3<br>3<br></div> </div> </body> </html> На нём сразу видна суть проблемы... Нужно, чтобы все дочерние дивы находились внутри родительского независимо от высоты контента в них... Не могу понять, в чём причина... P.S. Ну и по второму вопросу - тоже хотелось бы услышать ваше мнение (экспертное, кто как делает... сам вопрос - в первом сообщении)
-
По-ходу эт когда я прихожу в веб-студию и говорю: "Мне нужен сайт". А они делают и дизай, и вёрстку и устанавливают на CMS... Т.е. полностью делают тебе готовый сайт, а не только что-нить одно...
-
потому что я так всегда верстаю - и не задаю се такой вопрос... =) Так работает - а это главное... Можно ещё попробовать прописать сначала правый див, потом левый, а потом центр... Но центр ТОЧНО должен идти последним, т.к. он будет занимать всю оставшуюся ширину от дивов по 150px... проверял в: Opera_9.52, Internet Explorer_7, Mozilla Firefox_2. Всё гуд... Про IE6 - не скажу точно...
-
с 1-ым вопросом разобрался - через позишн вроде получилось... А кто что по поводу 2-ого посоветует??? Как кто верстает?
-
Смотри полный код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> #structure { position: relative; width: 80%; height: 100%; left: 10%; border-width: 1px; border-style: solid; border-color: red; } #header { height: 100px; background-color: green; } #l_menu { height: 100px; width: 150px; float: left; background-color: blue; } #content { height: 100px; margin: 0px 150px; background-color: yellow; } #r_menu { height: 100px; float: right; width: 150px; background-color: blue; } #bottom { height: 50px; clear: both; background-color: gray; } </style> </head> <body> <div id="structure"> <div id="header">header</div> <div id="l_menu">left<br></div> <div id="r_menu">right<br></div> <div id="content">center<br></div> <div id="bottom">bottom</div> </div> </body> </html>
-
для левого дива - float: left; width: 150px; для правого - float: right; width: 150px; для центрального - margin: 0px 150px; Вроде так.
-
не... так тож не пашет... O_o
-
Т.е. - указывать точную высоту не надо? Пусть подстраитвается под размер шрифта?
-
Равномерное распределение блоков по горизонтали
DjTarik replied to @LEXXX_NF's question in HTML Coding
А если попробовать засунуть ваши картинки в дивы, прописать к ним float: left; width: 20% (т.е. одинаковое расстояние для каждой); - а уже потом в дивах прописывать позиционирование и отступы... -
В общем - сразу к делу. 1. Нужно сверстать макет из 4-х колонок... С этим нет проблем... Но когда я все эти дивы помещаю в див-обертку - мои столбцы отображаются поверх него... Ширина и высота не известны... Всё зависит от контента... <div> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div> ————--> div.col { float: left; width: 25%; } Что я не так делаю? Или это анрил? O_o 2. Смотрим картинку: Как сверстать - всё понятно, списки и т.д. Вопрос вот в чём: - мне заранее известна высота этой "полоски" с элементами меню. Как её лучше верстать - указывать точную высоту - или оставлять её, чтобы она растягивалась при увеличении шрифта в em? (если в Мозилле нажать контрл+) P.S. Или при резиновой вёрстке считают только гороизонтальное растягивание? Просвятите молодого! =) P.P.S. Надеюсь понятно спросил... )))
-
я не профи конечно, но верстаю так: - беру шаблон - нарезаю его на куски инструментом "нож" (кнопка "K" или Shift+K) - при нарезке все расстояния можно узнать до пиксела. - сохраняю куски графики "для web", там же выбираю наиболее подходящий вариант. - открываю нотепад - и поехали...
-
По-ходу нужно просто задать отступы для ячеек 1 и 3... Т.к. IE не как все высчитывает высоту и длину... 100% - это вся высота да ещё + твои ячейки... p.S. Наверное так... O_o Проверял в строгом доктайпе...
-
Я всегда ставлю два вот таких: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> работает во всех броузерах... вроде как...
-
Как сделать так, чтобы DIV занял все свободное место?
DjTarik replied to hooey_ru's question in HTML Coding
Глпости... Смотри: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Проверка</title> <style type="text/css"> div#title { height: 7em; border-width: 1px; border-style: solid; border-color: red; } div#right { width: 15em; float: right; border-width: 1px; border-style: solid; border-color: blue; } div#left { margin-right: 15em; border-width: 1px; border-style: solid; border-color: green; } </style> </head> <body> <div id="title">title</div> <div id="right">right</div> <div id="left">left</div> </body> </html> Ток границы убери (я их для наглядности писал) и стили вынеси в файл... P.S. Или те не так надо? O_o -
Как сделать так, чтобы DIV занял все свободное место?
DjTarik replied to hooey_ru's question in HTML Coding
А зачем абсолютное позиционирование? -
Как сделать так, чтобы DIV занял все свободное место?
DjTarik replied to hooey_ru's question in HTML Coding
Дайте кусок вашего кода... P.S. Вроде как див растягивается по ширине экрана, если ему не прописывать длину... -
Satanael - очень интересный у вас макет... Если дадите оригинальный *.psd шаблон - покажу, как бы я его верстал... Стучите в асю, если что: 440-872-646.
-
если я правильно понял - просто сделать межстрочный интервал поменьше... Через свойство CSS - line-height... Добавитьт к блоку, в котором помещаются ссылки...
-
<!--[if gte IE]> - как это конструкция называется?
DjTarik replied to kipupik's question in HTML Coding
Раз уж тут зашла тема о комментах - расскажите, зачем писать комменты тут: <script type="text/javascript" language="javascript"> [b][i]<!--[/i][/b] операторы JS [b][i]//-->[/i][/b] </script> и тут: <style type="text/css"> [b][i]<!-- [/i][/b] стили CSS [b][i]-->[/i][/b] </style> Или такаие записи уже не актуальны? Стоит ли их использовать? P.S. Хотелось бы услышать мнение профи и как делают они... =) -
<!--[if gte IE]> - как это конструкция называется?
DjTarik replied to kipupik's question in HTML Coding
Эта конструкция называется "условные комментарии"... Посмотреть можно в Google, к примеру... Эти "комментарии" используются только для броузера Internet Explorer... Следовательно для Оперы и Лисы - никак...