mozart

По сути ситуация такая: весь контент находится в центральной части дизайна, в блоке шириной 954 пиксела, по бокам идет как бы декоративный фон, состоящий из нескольких элементов, то есть необходимо к центральному диву (трехколоночной таблицей не получается, т.к. образуется вертикальное смещение и дырки на стыках колонок), добавить еще два дива побокам, которые равномерно растягиваются при увеличении размера окна браузера, и в них разместить еще дивы следующим образом: в левой два дива фиксированной высоты, а в правой четыре - верхние два фиксированной высоты, третий тянется, нижний снова фиксированной высоты. При этом всем центральный див обязательно должен быть по центру. КАТАСТРОФА!!! Попробовал все что знал, более менее нормально верстается только когда боковые дивы заданной ширины, но в этом случае часть с контентом находится далеко не по центру окна браузера. Пробовал позишн:релатив, в этом случае получается в принцыпе их разместить по бокам, но они смещаются относительно друг друга по высоте, находясь как бы один под другим, параметр ТОП: с отрицательным числом то же пробовал (этот вариант в принцыпе неплох, но все равно есть нюансы). В случае обычной трехколонной верстки с указанием ширины только для центральной колонки не дает результатов - боковые колонки вообще не отображаются (при указании мин и макс ширины та же ситуация), весь сайт сьезжает влево. Ко всему прочему параметр height дышит тока пикселами (height:100% - не работает ни в одно браузере ни с каким доктайпом), min- и max-width вообще не пашут.. Ниже код наиболее удачной верстки, мож нада просто внести в нее изменения? <div id="center"> <div id="left"> <div id="left_top"><img src..></div> <div id="desk_shad"><img src..></div> </div> <div id="main"> <table><tr><td></td></tr></table> </div> <div id="right"> <div id="right_top"><img src..></div> <div id="desk_shad"><img src..></div> <div id="list_shad"><img src..></div> <div id="list_end_shad"><img src..></div> </div> <center><div id="hand"><img src..></div></center> </div> #center {width:1280px; margin:0 auto;} #left {float:left; width:163px; (+хотелось бы height:100% - но не работает..)} #left_top {height:1011px; width:163px;} #desk_shad {width:163px; height:115px;} #main {float:left; width:954px;} #main table {width:100%; height:1227px; border-collapse:collapse;} #right {float:left; width:163px; (+просто необходим height:100% - но не работает..)} #right_top {height:1011px; width:163px;} #list_shad {width:163px; background:url(...) left repeat-y; должен тянуться до следующего дива и прижимать его к низу;} #list_end_shad {height:60px; width:163px;} #hand {height:102px; width:260px;} В результате всего вышеперечисленного, если разрешение монитора превышает 1280 пикселов, центрируется на ура, в противном случае скрывается правая часть сайта, соответственно основной блок с контентом меню и всем остальным благополучно уезжает вправо.. У кого нибудь есть предложения как сие отцентрировать и заставить хотябы правую колонку тянуться до низа экрана?

Есть проблема: не работает параметр height:100%. Пробовал разные браузеры и доктайпы. Че делать? Примерный код: <div id="right">tra-ta-ta</div> #right {float:right; height:100%}

Спасибо, очень помогло. А можно сделать так, чтобы этот блок обтекался текстом в блоке под ним?

Праблема такая: верстка дивами, три колонки, поверх границы между второй и третьей колонкой хочу повесить позиционированный див. Пытаюсь естественно применять position:relative. в результате сей операции внутри блока, относительно которого позиционируется элемент, образуется промежуток по высоте равный высоте позиционируемогоэлемента. Если применять абсолют, такойже прикол тока перед или после страницы. Ко всему прочему IE6 вообще не отображает сей элемент.. Чтоделать

Как зафиксировать я знаю, я не знаю как разместить зафиксированный DIV по центру окна браузера..

Задумка следующая: зафиксировать сверху по центру небольшую навигационную панель с выпадающим меню на CSS? Нимогу никак сообразить, как зафиксировать в центре по ширине DIV. Помогите!!!

РАБОТАЕТ! Премного благодарен!

Сделал страницу с фиксированным (position:fixed) положением хедера, ниже, в контенте, по средствам Dreamweaver'а вставлено флеш видео. Когда начинаешь прокручивать контент в IE6 и в Oper'е, это видео "заезжает" на хедер, а не под него! Что делать? Код в шапке страницы: <script type="text/javascript"> function MM_CheckFlashVersion(reqVerStr,msg){ with(navigator){ var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1); var isWin = (appVersion.toLowerCase().indexOf("win") != -1); if (!isIE || !isWin){ var flashVer = -1; if (plugins && plugins.length > 0){ var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : ""; desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc; if (desc == "") flashVer = -1; else{ var descArr = desc.split(" "); var tempArrMajor = descArr[2].split("."); var verMajor = tempArrMajor[0]; var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r"); var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0; flashVer = parseFloat(verMajor + "." + verMinor); } } // WebTV has Flash Player 4 or lower -- too low for video else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0; var verArr = reqVerStr.split(","); var reqVer = parseFloat(verArr[0] + "." + verArr[2]); if (flashVer < reqVer){ if (confirm(msg)) window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"; } } } } </script> Код в контенте: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="352" height="288" id="FLVPlayer"> <param name="movie" value="FLVPlayer_Progressive.swf" /> <param name="salign" value="lt" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=v/film1&autoPlay=false&autoRewind=false" /> <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=v/film1&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="352" height="288" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

Посмотри здесь, там есть фикс для IE6.

Спасибо! Все таки кое где напартачил.. буду исправлять.

Примерно следующее с фиксом для IE6 (меню слева): <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body > #sidebar {position:fixed;} body {margin:0;} #sidebar {position:absolute; top:0; right:0; height:100%; width:210px; text-align:center; background-color:#dadada;} </style> <!--[if IE 6]> <link rel="stylesheet" href="fix.css" type="text/css" /> <![endif]--> </head> <body> <div id="sidebar">MENU</div> </body> </html> Оптимизируешь сам. fix.css html {overflow:hidden;} body {height:100%; overflow:auto;} Для расположения иначе меняешь значения top, right, bottom, left, height, width. Для остальных элементов не забудь указать margin на размер своего меню. В целом это выглядит так: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body > #sidebar {position:fixed;} body {margin:0; text-align:center;} #sidebar {position:absolute; top:5px; left:5px; bottom:5px; height:100%; width:210px; background-color:#dadada;} #header {margin-left:220px; margin-top:5px; margin-right:5px; height:115px; border-bottom:solid #dadada 2px;} #linkpanel {margin-left:220px; margin-top:9px; margin-right:5px; border:solid #dadada 2px;} #content {margin-left:220px; margin-top:9px; margin-right:5px; border:solid #dadada 2px;} #footer {margin:9px 5px 5px 220px; border-top:solid #dadada 2px;} </style> <!--[if IE 6]> <link rel="stylesheet" href="fix.css" type="text/css" /> <![endif]--> <body> <div id="sidebar">MENU</div> <div id="header">HEADER</div> <div id="linkpanel">LINKPANEL</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </head> </body> </html> Замени "CONTENT" каким нибуть обьемным текстом и увидишь результат. Если располагать фиксированную панель по горизонтали, то в fix.css надо указать #sidebar {right: больше, чем 5px}, т.к. IE6 полосу прокрутки включает в ширину, соответственно панель залазит на нее.

Спасибо! Помогло!

Сколько не смотрю исходные коды страниц, везде вижу применение и id="" и class="", только не могу понять чем они отличаются, что в каких случаях применяется и т.д. и т.п. По функционалу вроде одно и тоже, единственная разница, которую заметил - это каким образом записывается в стилях (#id, .class). А еще то, что одному элементу двух и более id не присваивают, а с class история другая... Подскажите?! Может я вообще неправильно это все использую..

Никак не могу найти ответ на такой вопрос: как отцентрировать по вертикали в теге текст, изображение, дугой блок, или что-то еще?Простейший код: <div style="height:200px; vertical-align:middle; text-align:center; border:solid #dadada 3px;"> <h1>HAY!</h1> </div> Проблема в том, что текст внутри блока выравнивается по вертикали по верхнему краю, а нужно по середине... Как сделать?

Может кто нибудь подскажет заплатку для IE6, пост #4?..

И на том спасибо! Просвятил т?много...

Спасибо - работает! Тока несколько НО! 1) ширина колонки с текстом занимает не 60%, а примерно 40%, мож 50% - как бороться? 2) IE6 умудряется блокировать скрипт (Maxton2 - не блокирует), пока не разрешишь не увидишь нижней части текста, прокрутка не появляется и физически не работает - просмотреть можно только выделяя содержимое - как бороться? Пытался переписать тот же скрипт (JS - не знаю вообще) заменив height на width и подставив свои значения - ноль эмоций, фунт презрения... Что делать?..

Переработал код с использованием position:fixed (спасибо htmlbook.ru/рецепты). В FF, Opera, Netscape Navigator - все отлично, идеально отображается и растягивается вне зависимости от количества содержимого. При большом обьеме информации в блоке "CONTENT" появляется прокрутка. В IE6 и Maxton2 - блоки растягиваются только в зависимости от количества содержимого (если не заданы определенные высота и ширина). Складывается впечатление, что IE6 и Maxton2 не понимают top:, right:, bottom: и left:, а только float. Overflow в IE6 и Maxton2 тоже работает только при фиксированной высоте блока. Ставлю IE7 - все нормально... Может кто нибудь подскажет рецепт для IE6?.. Код ниже. <!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"> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251'> <title>Untitled Document</title> <style type="text/css"> body { margin:0; padding:0; text-align:center; } #menu { width:160px; position:fixed; float:left; top:10px; left:10px; bottom:40px; background-color:#4088b8; color:white; padding:10px; } #header { position:fixed; top:10px; left:200px; right:10px; height:100px; background-color:red; color:white; padding:10px; } #content { position:fixed; top:140px; left:200px; right:10px; bottom:40px; background-color:#003978; color:white; padding:10px; overflow:auto; } #footer { position:fixed; left:10px; bottom:10px; right:10px; height:20px; background-color:#dadada; } </style> </head> <body> <div id="menu"><h2>MENU</h2></div> <div id="header"><h1>HEADER</h1></div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </body> </html>

Туда, где написано "Сюда надо вставить блок с прокруткой!" надо вставить прокрутку содержимого с целью сделать сайт, который по высоте занимает только высоту окна браузера.

Примерно получается следующее: голый html без DOCTYPE! + CSS, таблицей заданы колонки: 200 пикс., 60% и 40% остального пространства (еще одна встроенная таблица). В колонке с шириной 60% надо встроить блок (не обязательно div, можно все что угодно в рамках html(xhtml)+css), который будет растягиваться по ширине на 100% колонки, и на 100% по высоте оставшегося ОКНА БРАУЗЕРА (под "оставшегося" понимается наличие сверху хедера и снизу - футера) и имел полосу прокрутки. То есть я хочу сделать так, что бы сайт не вылезал за пределы окна браузера вообще ни по горизонтали, ни по вертикали с, практически, любым разрешением мониторов (практически потому, что я не беру в учет разрешения мониторов 800х600 и ниже), а не поместившийся контент можно было просматривать по средствам полосы прокрутки. Искал долго! Это МОЖНО сделать, НО! НО только через фиксированную высоту сего блока! При задании DOCTYPE! пустая (или практически пустая) таблица не дотягивает высоту в 100% (очень заметно при просмотре с использованием больших разрешений мониторов). Подскажите пожалуйста как быть, может я где то что то не досмотрел или что упустил?! Может с DOCTYPE!'ом не правильно работал, и вообще его не правильный выбрал? Таблица: <table width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td rowspan="3" width="200px" height="100%">Здесь меню!</td> <td width="100%" height="160px">Хедер!</td> </tr> <tr> <td width="100%" height="30px">Дополнительная навигация!</td> </tr> <tr> <td width="100%" height="100%"> <table width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td width="60%" height="100%">Сюда надо вставить блок с прокруткой!</td> <td width="40%" height="100%">Дполнительная панель!</td> </tr> </table> </td> </tr> <tr> <td colspan="2" width="100%" height="20px">Футер!</td> </tr> </table> В margin и padding 0.

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

Подскажите, как создать блок с прокруткой, который растягивается на высоту окна браузера, но не вылазит за нижний край окна браузера. Может его вставить в другой тег или таблицу и тогда можно указать высоту в 100%, если да, то с какими атрибутами, какой DOCTYPE! использовать?