deadmeat Posted October 20, 2008 Report Share Posted October 20, 2008 (edited) Здравствуйте, не могу понять как составить трёх колонный макет.Как на картинке: html:<div id="structure"><div id="header"></div><div id="l_menu"></div><div id="content"></div><div id="r_menu"></div></div>CSS:#structure { position: relative; width: 80%; height: 100%; left: 10%}#header {width: 100%; height: 100px}#l_menu {height: 100%; width: 150px; float: left}#content {height: 100%; float: left }#r_menu {height: 100%; width: 150px}#bottom {width: 100%; height: 50px }что здесь не так? надо что б content занимал всё оставшееся место после l_menu и r_menu Edited October 20, 2008 by deadmeat Quote Link to comment Share on other sites More sharing options...
0 DjTarik Posted October 20, 2008 Report Share Posted October 20, 2008 для левого дива - float: left; width: 150px;для правого - float: right; width: 150px;для центрального - margin: 0px 150px;Вроде так. Quote Link to comment Share on other sites More sharing options...
0 deadmeat Posted October 20, 2008 Author Report Share Posted October 20, 2008 к сожалению не так.. Quote Link to comment Share on other sites More sharing options...
0 DjTarik Posted October 20, 2008 Report Share Posted October 20, 2008 к сожалению не так..Смотри полный код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title></title><style type="text/css"> #structure { position: relative; width: 80%; height: 100%; left: 10%; border-width: 1px; border-style: solid; border-color: red;}#header { height: 100px; background-color: green;}#l_menu { height: 100px; width: 150px; float: left; background-color: blue;}#content { height: 100px; margin: 0px 150px; background-color: yellow;}#r_menu { height: 100px; float: right; width: 150px; background-color: blue;}#bottom { height: 50px; clear: both; background-color: gray;}</style></head><body><div id="structure"><div id="header">header</div><div id="l_menu">left<br></div><div id="r_menu">right<br></div><div id="content">center<br></div><div id="bottom">bottom</div></div></body></html> Quote Link to comment Share on other sites More sharing options...
0 Argus Posted October 20, 2008 Report Share Posted October 20, 2008 (edited) типа того, но только центральный тогда надо в коде перенести после двух боковыхв сообщении #4 верновот только лучше для #structure заменить:position:relative; left:10%;на:margin: 0 auto;height ему, кстати, тоже не поможет. Edited October 20, 2008 by Argus Quote Link to comment Share on other sites More sharing options...
0 deadmeat Posted October 21, 2008 Author Report Share Posted October 21, 2008 (edited) не могу понять почему r_menu идёт впереди contenta:<div id="l_menu">left<br></div><div id="r_menu">right<br></div><div id="content">center<br></div>при коде написанном в сообщении 4 в фаерфоксе всё отображается правильно, а вот в интернет эксплорере content вылезает за правую колонку Edited October 21, 2008 by deadmeat Quote Link to comment Share on other sites More sharing options...
0 DjTarik Posted October 21, 2008 Report Share Posted October 21, 2008 не могу понять почему r_menu идёт впереди contenta:<div id="l_menu">left<br></div><div id="r_menu">right<br></div><div id="content">center<br></div>при коде написанном в сообщении 4 в фаерфоксе всё отображается правильно, а вот в интернет эксплорере content вылезает за правую колонку потому что я так всегда верстаю - и не задаю се такой вопрос... =) Так работает - а это главное... Можно ещё попробовать прописать сначала правый див, потом левый, а потом центр... Но центр ТОЧНО должен идти последним, т.к. он будет занимать всю оставшуюся ширину от дивов по 150px...проверял в: Opera_9.52, Internet Explorer_7, Mozilla Firefox_2. Всё гуд... Про IE6 - не скажу точно... Quote Link to comment Share on other sites More sharing options...
0 usb_serg Posted October 21, 2008 Report Share Posted October 21, 2008 добрый день,я бы вот тут посмотрел, наверно есть то что вам нужно. Quote Link to comment Share on other sites More sharing options...
0 Argus Posted October 21, 2008 Report Share Posted October 21, 2008 (edited) не могу понять почему r_menu идёт впереди contenta:<div id="l_menu">left<br></div><div id="r_menu">right<br></div><div id="content">center<br></div>при коде написанном в сообщении 4 в фаерфоксе всё отображается правильно, а вот в интернет эксплорере content вылезает за правую колонкуконтентный блок не имеет float и потому здесь должен идти последним и подбирать под себя 2 предыдущие колонки.это надо вам попрактиковаться с плавающими блоками, чтобы понять механизм.сам код из 4 поста не проверял, но если уж есть какая проблема, то можете попробовать увелечить margin от краев, возможно что-то цепляется Edited October 21, 2008 by Argus Quote Link to comment Share on other sites More sharing options...
0 deadmeat Posted October 21, 2008 Author Report Share Posted October 21, 2008 благодарю за ответы Quote Link to comment Share on other sites More sharing options...
Question
deadmeat
Здравствуйте, не могу понять как составить трёх колонный макет.
Как на картинке:
html:
<div id="structure">
<div id="header">
</div>
<div id="l_menu">
</div>
<div id="content">
</div>
<div id="r_menu">
</div>
</div>
CSS:
#structure { position: relative; width: 80%; height: 100%; left: 10%}
#header {width: 100%; height: 100px}
#l_menu {height: 100%; width: 150px; float: left}
#content {height: 100%; float: left }
#r_menu {height: 100%; width: 150px}
#bottom {width: 100%; height: 50px }
что здесь не так?
надо что б content занимал всё оставшееся место после l_menu и r_menu
Edited by deadmeatLink to comment
Share on other sites
9 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.