Darkside
-
Posts
19 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Darkside
-
урааа!!! ночь пошла на пользу #container { width:100%; height:100%; background-color: #00CCFF; } вот и решение
-
вобщем пока все дрыхнут, кое чего проясняется. проблема в обвертке container. если ее убрать, то везде работает. т.е. вопрос в том, какие ей стили прописать
-
если так написать: #container { width:100%; min-height:100%; background-color: #00CCFF; } * html #container { height:100%; } #leftcol { float: left; width: 200px; min-height: 100%; background: #008000; } * html #leftcol { height:100%; } то ие показывает, а FF и Opera -- нет хм... спят уже все что ли
-
дочитался до такого: #leftcol { position:absolute; float: left; width: 200px; bottom:0; height:100%; min-height:100%; background: #008000; } * html #leftcol { height:100%; } Opera и FF тянут, а вот IE вообще перестал отображать этот слой. может ткнете, где об этом на сайте написано. в статье про высоту блочных элементов решения не нашел
-
сорри. параллельно читаю
-
Доброго дня! Есть раскладка на флоатах <!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></title> <link href="index-block.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="leftcol">MENU </div> <div id="rightcol"> <div id="head"> HEAD </div> <div id="content"> CONTENT </div> </div> <div id="footer">FOOTER</div> </div> </body> </html> стили html,body { margin:0; padding:0; } html { height:100%; } body { padding:0; margin:0 auto; width:80%; min-height:100%; position:relative; } * html body { height:100%; } #container { width:100%; height:100%; background:#FFFFFF; } #leftcol { float: left; width: 200px; background: #008000; } #rightcol { margin-left: 200px; background-color: #00CCFF; } #head { float:left; width:100%; height:200px; background:#FF0000; } #content { padding-bottom:82px; /* = 80+1+1 */ background:#999999; } #footer { height:80px; background: #333; clear: both; position:absolute; bottom:0; height:40px; width:100%; padding:1px 0; } Подскажите, как можно сделать, чтобы leftcol и content занимали все свободное пространство по высоте. Еще хочется узнать мнение по поводу правильности такой верстки (особенно по поводу стилей для вложенных дивов head и content) для вот такого макета:
-
вопросик. как лучше приведенный макет сделать 1 float'ом 2 позиционированием
-
спасбо... да точно, я про контейнер забыл... ARA далеко не уходи. буду совета спрашивать)))
-
говорю ж в Опере левая колонка не отображается. код блоками я выше привел я думаю заново начать. так правильно будет: делаем две колонки и футер. правую колонками дивами бьем на две части?
-
я начинал с блоков, но их некоторые засады склонили меня к таблицам. теперь опять думаю на блоки перейти
-
2 strix у меня даже есть вариант блочной версти, но в Опере не работает <!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></title> <style type="text/css"> /* CSS Document */ /* Layout ******************/ html,body { margin:0; padding:0; } html { height:100%; } body { padding:0; margin:0 auto; width:80%; min-height:100%; position:relative; } * html body { height:100%; } #wrap{ /* width:100%;*/ background:#999999; } #menu{ float:left; position:absolute; height: auto; min-height: 100%; bottom:0; width:30%; background:#3C7468; } * html #menu { height:100%; } #logo { margin-top:20px; background:#1B493E; } #head{ float:right; width:70%; background:#F8C300; height:200px; } #main{ float:right; width:70%; height:350px; background:#FFFFFF; } #footer{ position:absolute; bottom:0; width:100%; height:80px; background:#F8C300; clear:both; padding:1px 0; } /* Fonts *******************/ body { font:10pt Tahoma, Sans-Serif; } h1 { font-size:180%; letter-spacing:1px; } /* Colors ******************/ body { background:#FFFFFF } html { background:url(img/bg2.png) repeat-x; } </style> </head> <body> <div id="wrap"> <div id="menu">132 <div id="logo">logo </div> </div> <div id="head">123 </div> <div id="main">123 </div> <div id="footer">FOOTER (подвал) </div> </div> </body> </html>
-
вот макет (упрощенный) с основными блоками
-
ща нарисую попонятнее
-
2 ARA Макет такой как в моем примере. Требования: резиновый дизайн, 100% по высоте, 80% по ширине, высота шапки и футера фиксированная. Если непонятно, могу картинку залить
-
у меня еще попутный вопрос почему, когда в футере добавляешь div, то сверху и снизу появляются какие-то отступы <tr> <td colspan="2"><div style="height:80px; border:2px solid #0000FF;"></div></td> </tr>
-
2 strix сверстать то можно... но задать высоту футера наверное не получится
-
разобрался. спасибо огромное. доступно, логично и исчерпывающе
-
Доброго дня! Занимаюсь табличной версткой. Вот код макета (с вложенной таблицей): <!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>Table Layout</title> <style type="text/css"> html,body { margin:0; padding:0; } html { height:100%; } body { height:100%; padding:0; margin:0 auto; width:80%; min-height:100%; position:relative; } *html body { height:100%; } table { width:100%; height:100%; border:1px solid #000000; vertical-align:top; } td { border:1px solid #000000; } </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td width="200"> </td> <td> <table cellspacing="0" cellpadding="0" style="border-color:#FF0000; margin:3px;"> <tr> <td height="200"> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr> <tr> <td colspan="2" style="height:80px"></td> </tr> </table> </body> </html> проблема в том, что IE не понимает высоту 80px футера. и не выравнивает по вертикали вложенную таблицу когда убираешь <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> IE таблицы отображает правильно, но не воспринимает стиль body { width:80%; } В FF и Opera все отлично. И еще сопутствующий вопрос: не подскажете, сложно ли такой макет сверстать блоками и есть ли в этом случае смысл в переходе на блочную верстку. Спасибо за ответы
-
Доброго времени суток! Данное определение стиля не работает <!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"> #list1 ul li { list-style:none; } </style> </head> <body> <ul id="list1"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> А если указать <style type="text/css"> ul#list1 li { list-style:none; } </style> то все нормально. Подскажите, первый вариант является синтаксически неправильным? PS то же самое наблюдается и с классами