Nanto

Надо чтобы блок c position:fixed (или эмуляцией) скроллился вместе с body при достижении min-width... JS тоже будет уместным

А мы то тут при чём? Ну мы типа должны за топикстартера сделать тестовое задание, а уж потом он это сам выучит...

http://htmlbook.ru/content/osobennosti-tablits Если так же лень читиать, вкратце: можно, но не всегда.

Сдаётся мне некорректно использовать <br> для чистки потока. Всё-таки служебный элемент форматирования текста, нулевого размера... Замените на div.

Бред! Вы представляете сколько сайтов с position:fixed и overflow:auto смотрели через IE7? Майкрософт бы уже такую кучу дерьма слопал!..

Идентично опере

В макете понадобился закрыть часть экрана блоком с "position:fixed". Из-за чего некоторые ссылки перекрылись этим блоком. Отслеживать поведение каждой - уйма времени. Вариант - задать всем перекрытым блокам position:relative и "вытолкнуть" их наверх через z-index. Какие при этом могут появится косяки? Например, переопределение родителя при абсолютном позиционировании (вместо body - позиционированный блок) или float будет корректно работать? Может ещё какие подводные камни?

html{ background:transparent url("/2.jpg") repeat 0 0; width:100%; height:100%; } body{ background: transparent url("/1.jpg") no-repeat 0 100%; width:100%; height:auto !important; height:100%; min-height:100%; }

А если попробовать http://htmlbook.ru/css/clip Правда я слабо представляю себе реализацию, так... просто мысль пришла а картинка бэкграундом или через img?

Порезать на три части!

Я прекрасно знаю (и даже понимаю) что такое супрематизм и прочее... Это нормально (то как я выразился) - пусть привыкает. Дизайновое комьюнити в РФ отличает какая-то гипертрофированная агрессивность к новичкам. Хотя по большей части 95% российского дизайна - шлак! К тому же не адаптированный под вёрстку! Я тут одному товарищу как-то объяснял нюансы вёрстки по дизайн-макетам, он был шокирован от того сколько там подводных камней, о которых дизайнеры то ли забывают, то ли "это проблемы верстальщика". Творческие личности, мля! Не один год макеты под веб делают, а в "фиксе с графикой" 20 пикселей под скролл-бар дядя резервировать будет? Это так, накипело... Просто дали тут один высер с половиной сведённых слоёв. Надо всё расковыривать, резать и слоями с перекрытием укладывать... Ей богу проще самому подобное рисовать! P.S. Это я ещё мягко выразился! Verder-a давно не видно!..

Ну покажите мне валидный "кросс" (IE6) на блоках!

Вот хоть убей не понимаю этих воплей насчёт семантики... w3c призывает отделять оформление от струкутры - ок, но где инструменты для номального офрмления? box-sizing? не смешно! единственную нормальную модель структуры (табличную) и ту хотят похоронить! "Таблицы для таблиц"... Дайте новые тэги, какой-нибудь <structure>... Хотя все-равно некроссбраузерно выйдет! Вот типичный пример! Новичок берётся за вёрстку. Полазил в интернете и вывел для себя две вещи: 1) Важен валидный код 2) Таблицы - зло. Нужна блочная вёрстка. Выбирает себе примитивнейший макет (хэдер, футер -резина, две колонки фикс.). И оп-па! Куча геммороя. ИЕ и Опера тупят. Какие-то хитрые финты нужно вставлять... А какие-то имбицилы орут про "семантику". Пусть попробуют свертать такой макетик валидно и кроссбраузерно - это возможно, конечно... Но это будет ТАКОЙ кусище кода со всякими хаками-хреняками, что о какой семантике может идти речь? Штаны через голову одевать и называть это "рациональностью"? И потихоньку эти вопли доходят до заказчиков (толком ничерта не понимающих) - многие уже особо прописывают в требованиях блочную вёрстку (не догдываясь о противоречии с кроссбраузерностью и валидностью!). Такое ощущение, что эти визги специально подняли старые мастера, с целью выдавить из профессии неопытный молодняк, хотя сами начинали с таблиц!.. Если у меня когда-нибудь попросят подобный макет в блочном исполнении и валидно-семантичный - назло отвечу: "В спецификациях html и css подобное не предусмотрено!" И буду прав на все 100%!

Ладно, раз уж Вы такой твердолобый упрямый, погнали по пунктам: 1) "Меню на своём месте" - ну убейте меня, не понимаю где его место! ОБЪЯСНИТЕ! Дайте наконец картинку. Относительно чего оно должно позиционироваться (правого или левого края, браузера или страницы)? 2) Лаги в Опере. Сделайте ресайз окна по высоте - Опера затупит с перемещением футера. 3) Почитайте эту тему http://forum.htmlbook.ru/index.php?showtopic=30815 , там в приницпе есть рецепты для Вашего макета. 4) Раз Вы только изучаете, то зачем Вам весь этот гемморой? Почему не так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <style type="text/css"> * { margin:0; padding:0; } html, body{ height:100%; width:100%; } table{ width:100%; height:100%; text-align:center; vertical-align:top; border-spacing:0; } .header{ background:red; height:40px; } .footer{ background:green; height:40px; } .wrapper{ height:100%; *height:auto; } .sidebar{ width:150px; background:blue; } .content{ background:yellow; width:700px; } .content p{ width:700px; } </style> </head> <body> <table> <tr class="header"> <td colspan="4">header</td> </tr> <tr class="wrapper"> <td> </td> <td class="sidebar"></td> <td class="content" valign="top"><p>Бла-бла...</p></td> <td> </td> <tr class="footer"> <td colspan="4">footer</td> </tr> </table> </body> </html>

Выделил. Именно что творчество! Малевание фломастерами по бумаге - отнюдь ещё не творчество, и уж точно не живопись.

Тогда вставляйте min-height:100%; /* и пусть опера тупит */ По-хорошему надо перевёрстывать, чтобы было кузяво. Вот зачем Вам height:100% для контента? Вам нужна подсвеченная колонка? На месте? На каком месте? Относительно чего? Ну уберите float:right и задайте нужный Вам margin-left Кстати, если бы не недавние обсуждения, я бы и не обратил внимание на глюки Оперы! Как часто Вы думаете, пользователь ресайзит окно?

Если вообще вылезут

А кто говорит, что можно ХОРОШО освоить профессию? На мой вгляд, пол-года - это как раз "уровень вхождения в профессию" (как сейчас очень полюбили говорить отчего-то). А выше уже правильно написали - минимальную базу наработал - устраивайся на работу. Продолжать обучение будешь уже в процессе работы (в вёрстке, это утверждение как никогда верно). Плюсы - постоянно набираешься опыта (сидя дома, можно на месяцок и отодвинуть вёрстку подальше. На работе не прокатит), нарабатываешь стаж (у обоих опыт вёрстки 2 года, только у одного ещё и полтора года официального трудоустройства - кому отдадут предпочтение при прочих равных?). Ну и наконец, подзабурев, через некоторое время можно элементарно сменить контору на более серъёзную (переходить на работу проще, чем устраиваться впервые). А так Вы пишите вполне себе прописные истины (я бы даже сказал штампы). В вёрстке, конечно, есть куча нюансов, которые требуют вдумчивого изучения (как в любой IT-специальности), но не боги горшки обжигают... Положа руку на сердце - давайте признаемся: не такой уж и огромный пласт знаний и уровень интеллекта необходим для овладения этой специальностью.

Ёлки-палки! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <style type="text/css"> * { margin:0; padding:0; } html, body{ height:100%; width:100%; } body{ min-width:890px; /* чтобы скроллились все элементы на странцие */ } .line{ margin:5px; outline:1px dashed #666; } .clear{ clear:both; } #header{ height:40px; width:100%; background:#0000CC; font-weight:bold; font-size:18px; position:relative; /* чтобы хэдер не перекрывался враппером */ } #top-menu{ padding:5px; float:right; list-style:none; } #top-menu li{ margin-right:10px; display:inline; /* чтобы меню в одну строку */ } #top-menu a{ font-family:verdana, sans; padding:2px; border:1px dotted #FFF; color:#FFF; text-decoration:none; } #wrapper{ height:100%; /* чтобы опера не тупила (вместо min-height) */ background-color:#EEE; margin:-40px auto 0; /* Чтобы освобдить место для хэдера */ width:890px; border-left:1px solid #DDD;/* Чтобы бордеры не плюсовались к высоте */ border-right:1px solid #DDD; } #sidebar{ border:1px dashed #CC0000; width:150px; float:left; } #sidebar a{ color:#AAA; padding:5px; text-decoration:none; font-size:18px; } #sidebar a:hover{ color:#666; } #content{ padding:7px; border:1px dashed #999; margin-left:155px; } .spacer{ height:40px; } #footer{ width:100%; background-color:#000; color:#FFF; height:40px; margin-top:-40px; } .footer{ text-align:center; padding-top:10px; font:bold 18px/normal italic, sans; } </style> </head> <body> <div id="header"> <ul id="top-menu"> <li><a href="#">Главная</a></li> <li><a href="#">Что-то</a></li> </ul> </div> <div id="wrapper"> <div class="spacer"></div> <!-- вставляем сюда отбивку, чтобы хедер не перекрывал контент (и меняем айди на класс) --> <div id="sidebar"> <p><a href="#">Рубрики</a></p> <div class="line"></div> <p><a href="#">Архив</a></p> <div class="line"></div> <p><a href="#">Блог</a></p> <div class="line"></div> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna, a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula, </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna, a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula, </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna, a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula, </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna, a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula, </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna, a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula, </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna, a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula, </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna, a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula, </p> </div> <div class="clear"></div> <div class="spacer"></div> </div> <div id="footer"><p class="footer">©zeR2one</p></div> </body> </html> Насчёт меню - до сих пор не понимаю, что Вы с ним хотите сделать? P.S. В шестом осле будет по прежнему (футер и хэдер не скроллятся), он не понимает min-width. Для него нужны танцы с бубном. Мне если честно лениво...

Но ведь есть же Гугл!.. Учиться чему-либо сейчас - это не то же самое, что 20 лет назад!

Я через пол-года, после того как узнал о HTML устроился верстальщиком

Сорри, здесь нет дизайна

Вы 40px уберите. Меню позиционируйте абсолютно или выносите из хэдера (имеется в виду код).

Знаю. Во-первых: <div id="footer"><p class="footer">©zeR2one</p></div> - зачем? "Не преумножайте сущностей без нужды" (с) Бритва Оккама Чем плох просто <p>? Или просто <div>, если собрались ещё что-то добавлять? Во-вторых (футер Ваш): У Вас потомок (#wrapper) перерос родителя (body), при ширине окна < 890px, 100% ширины у body и футера становятся меньше чем ширина #wrapper (поскольку width:100%; - это ширина ОКНА, а не страницы). Вариант решения: задать дополнительно min-width:900px; (890 + padding у Wrapper) для body или футера В-третьих: Вам так сильно нужен вертикальный скролл для любой высоты окна браузера? Если нет, то подумайте над смыслом вот этой конструкции: margin:40px auto 0;min-height:100%; 100% высоты окна + 40px отступа = футер без скроллирования никогда не виден если надо зарезервировать место под хедер, вставьте сверху такой же пустой блок (spacer), как и для футера...

пол-года Так вкратце: 1) почему у файла расширение .php? Ваше счастье что там самих php-сущностей нет - браузеры их не понимают 2) * {margin:0;padding:0;}html,body{height:100%;margin:0;padding:0;} ничего лишнего не видите? 3) font-weight:bold;font-size:18px;лучше так: font:bold 18px/normal "Ваш font-family";, а ещё лучше так: font:800 18px/normal "Ваш font-family"; 4) #top-menu{padding:5px;float:right;list-style:none;} #top-menu li{margin-right:10px;float:left;color:#FFF;} несколько косячная конструкция... почему не display:inline?