runet

ul.page{ list-style-type: none; text-align: center; margin: 10px 0; clear: both; } ul.page li{ display: inline; } ul.page li a{ text-decoration: none; border: 1px solid #DCDCDC; padding: 5px; } ul.page li a:hover{ border: 1px solid #F5F5F5; background: #DCDCDC; } Этот код вставляется в файл CSS

Скопируй текст и вставь в CSS файл, и посмотри вышло иль нет. <ul class="page"> <li><a href="modeliai1.html">1</a></li> <li><a href="modeliai2.html">2</a></li> <li><a href="modeliai3.html">3</a></li> <li><a href="modeliai4.html">4</a></li> <li><a href="modeliai5.html">5</a></li> </ul> Ты же сам написал как хочешь сделать.

<br clear="left" /> Это плохо. Попробуй так <ul class="page"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> </ul> ul.page{ list-style-type: none; text-align: center; margin: 10px 0; clear: both; } ul.page li{ display: inline; } ul.page li a{ text-decoration: none; border: 1px solid #DCDCDC; padding: 5px; } ul.page li a:hover{ border: 1px solid #F5F5F5; background: #DCDCDC; } Ну цвет можешь поменять

Сам пользуюсь Gedit. Хотя сам редактор для среды GNOME но есть и решение для Win

Я всегда считал, что лучше использовать дополнительный контейнер или еще лучше Псевдоэлемент :after. Но так как :after не работает в IE, приходится добавлять лишнюю конструкцию. Хотя можно было обойтись overflow: hidden или zoom:1 для родителя, но здесь в данном варианте влияло прижатия footer`a. Просто код <br clear="all" /> создает после себя пустую строку которую через стили не убрать. Кстати данный код не проходит валидацию в (X)HTML.

Всё вышло без дополнительного контейнера . Большое спасибо, Great Rash.

То есть нужно было вырезать | картинкой и закинуть в background тегу a? Я правильно Вас понял?

<div class='quotetop'>Цитата(Great Rash @ 25.2.2011, 10:08) <a href="index.php?act=findpost&pid=185126"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec--><!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><img src="img/img-1.jpg" width="542" height="237" alt="" /><!--c2--></div><!--ec2--> Зачем вы всем картинкам размеры прописываете? Без указания размеров все тоже будет работать. <!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><div class="clear"> </div><!--c2--></div><!--ec2--> Это очень плохо. Если вы не в курсе есть <i><br clear="all" /></i>. И вообще, разве тут нельзя обойтись просто <i>overflow: hidden;</i> для родителя? <!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><div id="footer"> <div class="f_b-copy"> <ul> <li><a href="#" title="#">Home</a><span>|</span></li> <li><a href="#" title="#">Products</a><span>|</span></li> <li><a href="#" title="#">Services</a><span>|</span></li> <li><a href="#" title="#">News</a><span>|</span></li> <li><a href="#" title="#">Contact</a></li> </ul> <hr class="hr" /> <p>Copyright 2009 Somara.com , All rights reserved. Design by Faisal Zahid</p> </div> </div><!--c2--></div><!--ec2--> Тут можно было легко обойтись без дополнительного контейнера.<!--QuoteEnd--></div> 1. Да, без указания размерам картинке все будет работать, но просто если указать размер то браузер резервирует место в памяти под картинку, а не сам вычисляет их. Это же влияет на скорость загрузки страницы. 2. <div class="clear"></div> Почему данная конструкция плохая? Я её использую не только чтобы очистить, но и для прижатия footer`a. Хотя можно было обойтись простым :after. Но у меня не вышло побороть IE. По этому пришлось использовать дополнительный контейнер. И разве атрибут clear рекомендуем в применении? 3. Ну здесь дополнительный контейнер служит для выравнивания "внутренностей" по середине. Но если можно обойтись без него, .... ща попробую.

Это apple mac показывает? Проверял в браузерах на windows, было все в порядке. Ну это скорей всего в разности размеров шрифта на разных ос.

Добрый вечер. Это моя первая верстка. По этому хотелось получить конструктивную критику, а также советы по улучшению кода. Данный макет(psd) был найден в просторах сети, так что по дизайну вопросы отсекаются. Макет Верстка css код

Обращайтесь.

Нууу, а теперь ТС возьмёт другую картинку и скажет что не по центру.

а теперь поделите ширину и высоту пополам

Куда она растягивается ???

Вам так нужно, посмотри. ЦЕнтр

Почитай здесьCdata

Не успел

Уже было так сказано 0 реакции.

Покажи как ты делаешь.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*<![CDATA[*/ .center{ width: 400px; height: 400px; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; } /*]]>*/ </style> </head> <body> <div class="center"> </div> </body> </html> Попробуй так или нет.

страница будет фиксированного размера или нет. Попробуй: .example { position: absolute; top: 50%; left: 50%; margin-top: -половины высоты рисунка px; margin-left: -половины ширины рисунка px; }

Ссылку на страницу с проблемой или рисунок что хотите получить. Ну правильно рисунок и должен ездить, ведь у тебя позиция в % стоит, а ты изменяешь размер окна и этим изменяешь расстояние от краев.

li li{ } или #category ul li li{ }Выбирай любой. UPD: Не увидел что уже ответили.

Просто overflow: hidden; отсекает отступы друг у друга. Кстати это не ошибка браузеров, а описываемое поведении боксовой модели. Чтобы блок не вываливался из контейнера, можно родителю прописать overflow: отличным от visible или сделать абсолютное позиционирование, float.

Про doctype уже сказали, а так можно добавить в #main { overflow: hidden; }. То что у тебя происходит называется схлопыванием внешних отступов. Здесь более подробно margin