JIyHa

:before разве не только к тексту используется? Синтаксис: элемент:before { content: "текст" } изображение background-ом в before, вроде того h4 { position: relative; } h4:before { content: ''; display: block; width: 15px; height: 15px; position: absolute; top: 0; left: 0; background: url(blebul1a.gif); }

Точно? А на каком валидаторе так прошло? <a href="nadezh/methodex.doc" title "Скачать статью бесплатно"> По оглавлению - h3 отсутствует, h4 отсутствует, h5 присутствует. Картинки перед заголовками чтобы не засорять код или background-ом лучше вставлять или :before. По удобству пользования - Научно-популярные статьи, лекции и книги выглядит как ссылка, неудобно.

Могу сказать, что большинство пользователей интернета все-же не программисты, не веб-дизайнеры, а обычные люди профессий, имеющих мало отношения к интернету. Они заходят в интернет просто поразвлечься после работы, посидеть в соц сетях, поискать интересующую их информацию. И (сейчас скажу ужасную вещь) многие не знают что такое "браузер". Далеко не оттого что они глупы или отсталы. Им это не нужно. "чтобы зайти в интернет нужно нажать букву е на рабочем столе". Но что это браузер, они не задумываются. Когда они видят слова "смените браузер" для них это ни что иное как "абракадабра", ненужная информация. А пользуются IE7 потому что он устанавливается вместе с WindowsXP, который или шел уже установленный вместе с компьютером, или его установил Вася, который в компьютерах-то ого-го-го как понимает, он сказал, что XP круче чем семерка(и не важно, что не сказал что чем круче). Netscape же чтобы установить, нужно для начала знать что такое браузер, поискать где скачать, а это сложнее чем найти последнюю версию хрома или мозиллы.

Webkit, дело в том, что у вас и так #div_after идёт после содержимого элемента #div с фиксированной высотой, а цифра "2" просто вываливается из элемента с фиксированной высотой, хотя цифра "3" идет как раз там где вы задали, как вариант задайте #div overflow:hidden и лишнее из этого тега выпадать не будет, но и видно не будет, а чтобы цифра "3" шла после цифры "2" нужно отказаться от фиксированной высоты, возможен вариант с фоном (для IE7 можно будет pie добавить, чтобы работало) <style type="text/css"> #div { background: -moz-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%); background: -webkit-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%); background: -о-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%); background: -ms-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%); background: linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%); min-height: 10px; } #div_after { background: #ccf; height: 10px; } </style> <div id="div">1<br/>2</div> <div id="div_after">3</div>

к всему сказанному добавлю 1. Safari 5.1.2 - текст в контейнере s-text выходит за нижнюю границу при масштабировании 2. Firefox 11 - изображение baner.png по какой-то причине не загружается и верстка плывет (вид как на изображении из предыдущего сообщения, там тоже это изображение не загрузилось) 3. Нет заголовка h1

Первый раз такое вижу, на валидаторе 340 ошибок, это как же надо было постараться-то....

FireFox 8, картинки уехали а в хроме все на месте

Привет всем, вот сделала webreference из этой темы, оцените пожалуйста верстку. Нерезиновая,не кроссбраузерная, потому что html5 и css3, в IE картинки, кнопки, уголки некорректно отображаются. одна и вторая 1. Для верхнего меню в левой колонке на первой странице, которое как листок(статьи, книги, графика, верстка) ничего лучше не придумала, чем приделать верхний уголок и нижнюю часть листа на :before и :after. Догадываюсь, что есть лучшее решение, но приходит в голову только еще один див поставить и бэкграундом сделать. 2. В поиске надпись "поиск" placeholder-ом сделала, Но вот чтобы она еще и цветом была как макете...в файрфоксе работает, для вебкитов тоже нашла в гугле как сделать, а для оперы цвет надписи так и остаётся серый. Вот есть подозрение что тут только скрипты помогут. 3. На второй странице почему-то граница правой колонки когда задаю dotted, не отображается в вебкитах, в остальных нормально показывается. Так и не догадалась, с чем это связано, и сделала ее пунктирной dashed.

Если честно, вижу только то, что нет второй страницы из задания и ссылки на нее. И в выпадающем меню на ховере не черный шрифт, а белый(это видно из второй страницы), но это наверное мелочи.

А какой? Буду очень благодарна, если подскажете. Этот шрифт я действительно не смогла правильно определить, искала и через myfonts тоже. Опыта верстки очень мало, сложно пока, но я научусь.

Да вроде бы там похожий был, как мне кажется, может и ошиблась (макет)

Вот спасибо всем, теперь знаю что исправлять

Привет всем, покритикуйте, пожалуйста, верстку. На HTML5 верстаю перый раз, и критика очень нужна. http://bolg.ts9.ru/

Может #cen{ position: relative; margin:0 auto 0 auto; width: 1000px; top:-7; background: #ffffff; }?

Нет, а если не сложно вы не могли бы дать ссылку где в спецификации, или может быть в какой-то книге написано, что float может абсолютно позиционироваться и выпадать из нормального потока? Вот здесь читала-нет такого, и здесь тоже нет. А про позиционирование, повторюсь, очень понятно написано в книге "Языки HTML и CSS для создания веб-сайтов" М.Хольцшлаг в 12 главе.

troll Я в курсе. И в этом корневом элементе элементы с флоат позиционируются в нормальном потоке, но если ты для своего дива с флоат сделаешь родительский элемент с абсолютным позиционированием, то и родительский элемент, и все его содержимое будет абсолютно позиционировано для элементов в нормальном потоке <div class="upper" style="margin-bottom: 30px;">some content</div> <div class="absolute" style="position: absolute;"> <div class="floated" style="float: left;">some content</div> <div class="floated2" style="float: left;">some content</div> </div> <div class="lower" style="margin-top: 50px;">some content</div> В этом случае дивы с флоатами выпадут из нормального потока. Потому что их родитель выпал. А пока их родитель <html>, они будут в нормальном потоке.

troll, Не вижу разногласия. Чтобы элемент с флоатом в твоей разметке выпал из потока и не влиял на другие элементы его следует абсолютно позиционировать, либо его родительский элемент. Так как он не абсолютно, а статически позиционирован в твоем примере, из потока он не выпадает.

Насколько я понимаю, к схемам позиционирования относятся: Абсолютное Относительное Статическое Фиксированное И они позиционируются. Абсолютное - относительно блока-контейнера и выпадает из нормального потока и перемещает его в указанное место, а оставшаяся дырка схлопывается,элемент изъят из нормального потока и не влияет на другие элементы.(не с этим ли позиционированием путает автор флоаты?) Относительное позиционируется относительно нормального потока. Фиксированное относительно окна браузера. А вот плавающее размещение - это НЕ схема позиционирования (Языки HTML и CSS М. Хольцшлаг, стр.223) И также из книги Философия CSS дизайна Дэйв Ши и М. Хольцшлаг стр.94 "Достоинство верстки методом плавающих элементов состоит в том, что элемент не изымается из нормального потока и соседние элементы знают о его положении".

Ссылка играть нажимается, а где играть? Нет голубого прямоугольника... FireFox 4.0.1...