#mainBlock { position: absolute; border: 1px solid; }
#leftBlock { float: left; margin-left: 0px; border: 2px solid #006666; }
#rightBlock { float: right; margin-left: 20px; border: 2px solid #996633; }
...
<div id="mainBlock">
<div id="leftBlock">left menu</div>
<div id="rightBlock">Lorem ipsum dolor sit amet</div>
</div>
Резиновая верстка: позиционирование marign-left & left для IE, FF & Opera
Имеется такой код:
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
H1 { margin: 0px;}
#tr { position: absolute; }
#leftcol1, #leftcol2, #leftcol3 {
width: 100px;
background: #800000;
padding: 5px;
}
#leftcol1 { position: absolute; left: 0px; }
#leftcol2 { position: relative; left: 100px;}
#leftcol3 { position: relative; left: 200px;}
#leftcol1 A, #leftcol2 A, #leftcol3 A { color: white; }
#rightcol {
position: relative;
margin-left: 300px;
background: #e0e0e0;
padding: 10px;
}
</style>
</head>
<body>
<div id="tr">
<div id="tr">
<div id="leftcol1"><a href="#">Link 1</a><br><a href="#">Link 2</a><br><a href="#">Link 3</a><br></div>
<div id="leftcol2"><a href="#">Link 4</a><br><a href="#">Link 5</a><br><a href="#">Link 6</a><br></div>
</div>
<div id="leftcol3"><a href="#">Link 7</a><br><a href="#">Link 8</a><br><a href="#">Link 9</a><br></div>
</div>
<div id="rightcol">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>
[/HTML]
В Opera и FireFox отображается как надо, а в IE слои налезают друг на друга.
Стоит только поменять margin-left на left в #rightcol:
#rightcol {
position: relative;
left: 300px;
background: #e0e0e0;
padding: 10px;
}
как IE все станет на свои места (разве только текст будет уходить за пределы экрана), а вот в FF и Opera появятся горизонтальные скроллбары и все растянется.
Вопрос: как с этим бороться?
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
H1 { margin: 0px;}
#tr { position: absolute; }
#leftcol1, #leftcol2, #leftcol3 {
width: 100px;
background: #800000;
padding: 5px;
}
#leftcol1 { position: absolute; left: 0px; }
#leftcol2 { position: relative; left: 100px;}
#leftcol3 { position: relative; left: 200px;}
#leftcol1 A, #leftcol2 A, #leftcol3 A { color: white; }
#rightcol {
position: relative;
margin-left: 300px;
background: #e0e0e0;
padding: 10px;
}
</style>
</head>
<body>
<div id="tr">
<div id="tr">
<div id="leftcol1"><a href="#">Link 1</a><br><a href="#">Link 2</a><br><a href="#">Link 3</a><br></div>
<div id="leftcol2"><a href="#">Link 4</a><br><a href="#">Link 5</a><br><a href="#">Link 6</a><br></div>
</div>
<div id="leftcol3"><a href="#">Link 7</a><br><a href="#">Link 8</a><br><a href="#">Link 9</a><br></div>
</div>
<div id="rightcol">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>
[/HTML]
В Opera и FireFox отображается как надо, а в IE слои налезают друг на друга.
Стоит только поменять margin-left на left в #rightcol:
#rightcol {
position: relative;
left: 300px;
background: #e0e0e0;
padding: 10px;
}
как IE все станет на свои места (разве только текст будет уходить за пределы экрана), а вот в FF и Opera появятся горизонтальные скроллбары и все растянется.
Вопрос: как с этим бороться?
Цитата:
<div id="tr">
<div id="tr">
<div id="tr">
Так не нужно делать. Используйте class.
Да уж, меня давно эта проблема мучает, но по свежей памяти могу кое-что посоветовать. Буквально вчера с этим полдня возился (две колонки).
Вывод я для себя сделал такой. Делается общий блок. Внутри него два блока - левый float: left; margin-left: 20px;, правый float: right; margin-left: 20px;. Обратите внимание: левый отступает от левого края экрана, а правый отступает от левого блока. Такой способ позиционирования работает нормально во всех трёх браузерах.
Если что, обращайтесь за подробностями, как только доделаю этот вариант, выложу и дам ссылку.
Вывод я для себя сделал такой. Делается общий блок. Внутри него два блока - левый float: left; margin-left: 20px;, правый float: right; margin-left: 20px;. Обратите внимание: левый отступает от левого края экрана, а правый отступает от левого блока. Такой способ позиционирования работает нормально во всех трёх браузерах.
Если что, обращайтесь за подробностями, как только доделаю этот вариант, выложу и дам ссылку.
У меня проще. Если что-то (что не удивительно) работает везде, но ишак (MSIE) упирается, то я иду протоптанной дорожкой (так быстрее) - использую условные (ослиные) комментарии и в них вставляю всё, что нужно.
Хм, дорожка то протоптанная, но что тогда произойдёт в 7-мом ИЕ? Он же не поддерживает эти условные операторы...
[QUOTE=SuhOFF]Хм, дорожка то протоптанная, но что тогда произойдёт в 7-мом ИЕ? Он же не поддерживает эти условные операторы...[/QUOTE]
прекрасно поддерживает, а вообще есть и отношения, т.е. можно запретить определнной версии смотреть код или наоборот показывать HTML код только определенной версии IE.
прекрасно поддерживает, а вообще есть и отношения, т.е. можно запретить определнной версии смотреть код или наоборот показывать HTML код только определенной версии IE.
Цитата:
foxweb:
Вывод я для себя сделал такой. Делается общий блок. Внутри него два блока - левый float: left; margin-left: 20px;, правый float: right; margin-left: 20px;. Обратите внимание: левый отступает от левого края экрана, а правый отступает от левого блока. Такой способ позиционирования работает нормально во всех трёх браузерах.
Если что, обращайтесь за подробностями, как только доделаю этот вариант, выложу и дам ссылку.
Вывод я для себя сделал такой. Делается общий блок. Внутри него два блока - левый float: left; margin-left: 20px;, правый float: right; margin-left: 20px;. Обратите внимание: левый отступает от левого края экрана, а правый отступает от левого блока. Такой способ позиционирования работает нормально во всех трёх браузерах.
Если что, обращайтесь за подробностями, как только доделаю этот вариант, выложу и дам ссылку.
Дайте ссылку плз :)
У меня с float: left / right посередине все равно свободное пространство остается. Видимо, в этом случае слои (правый и левый) зависят от их содержимого, а если там ничего нет, то растягивается только серидина..
Код:
Ловите:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#links {
width: 225pt;
padding: 0;
background-color: white;
height: 100%;
color: black;
margin-right: 4px;
float: left;
}
#first-links, #second-links, #third-links {
width: 100px;
color: white;
padding-top: 4px;
padding-bottom: 4px;
float: left;
background-color: #800000;
}
a:link {
background-color: #800000;
color: #FFFFFF;
font-family: Georgia, serif;
font-size: 16px;
}
a:hover, :visited {
color: silver;
background-color: #800000;
font-family: Georgia, serif;
font-size: 16px;
}
#content {
float: left;
width: 100%;
color: black;
height: 190px;
background-color: #e0e0e0;
}
h1 {
padding-top: 7px;
margin-top: 0;
}
p {
padding-right: 3px;
}
-->
</style>
<title>Page title</title>
</head>
<body>
<div id="content">
<div id="links">
<div id="first-links">
<div> <a href="#">Link 1</a></div>
<div> <a href="#">Link 2</a></div>
<div> <a href="#">Link 3</a></div>
</div>
<div id="second-links">
<div> <a href="#">Link 4</a></div>
<div> <a href="#">Link 5</a></div>
<div> <a href="#">Link 6</a></div>
</div>
<div id="third-links">
<div> <a href="#">Link 7</a></div>
<div> <a href="#">Link 8</a></div>
<div> <a href="#">Link 9</a></div>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>[/HTML]
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#links {
width: 225pt;
padding: 0;
background-color: white;
height: 100%;
color: black;
margin-right: 4px;
float: left;
}
#first-links, #second-links, #third-links {
width: 100px;
color: white;
padding-top: 4px;
padding-bottom: 4px;
float: left;
background-color: #800000;
}
a:link {
background-color: #800000;
color: #FFFFFF;
font-family: Georgia, serif;
font-size: 16px;
}
a:hover, :visited {
color: silver;
background-color: #800000;
font-family: Georgia, serif;
font-size: 16px;
}
#content {
float: left;
width: 100%;
color: black;
height: 190px;
background-color: #e0e0e0;
}
h1 {
padding-top: 7px;
margin-top: 0;
}
p {
padding-right: 3px;
}
-->
</style>
<title>Page title</title>
</head>
<body>
<div id="content">
<div id="links">
<div id="first-links">
<div> <a href="#">Link 1</a></div>
<div> <a href="#">Link 2</a></div>
<div> <a href="#">Link 3</a></div>
</div>
<div id="second-links">
<div> <a href="#">Link 4</a></div>
<div> <a href="#">Link 5</a></div>
<div> <a href="#">Link 6</a></div>
</div>
<div id="third-links">
<div> <a href="#">Link 7</a></div>
<div> <a href="#">Link 8</a></div>
<div> <a href="#">Link 9</a></div>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>[/HTML]
здравствуйте уважаемые, мой Вам совет не использовать при "дивной" разметке с резиной методы position:absolute, т.к. это в большинстве случаев приведет к непредсказуемым последствиям (пускай не у Вас, так напр. у меня или у какого нибуть Васи).
Вот шаблон для дивной резиновой разметки в общем потоке
Вот шаблон для дивной резиновой разметки в общем потоке
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
#header {background: #fff url(background_1.gif) no-repeat bottom left;}
#outer_wrapper {background: #fff url(background_2.gif) repeat-y left; height:100%;}
#wrapper {background: url(background_2.gif) repeat-y right; }
#container {width: 100%; float: left; background: url(background_2.gif) repeat-y right; }
#content {background: url(background_2.gif) repeat-y left;}
#main {margin-left: 155px;}
#left {overflow: hidden; width: 150px; float: left;}
#footer {background: #fff url(background_1.gif) no-repeat top left;}
/*]]>*/
</style>
</head>
<body>
<div id="header">Шапка сайта</div>
<div id="outer_wrapper">
<div id="content">
<div id="left"><h1>блок для основного меню и блоков управления</h1>
<ul><li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
</ul>
<p>другие блоки</p>
</div>
<div id="main">
<h1>Контент сайта</h1>
<p>dssd влола ал в в в влоалвовла kdfj kj алывоа лыоа лы авыоалыввоалоа лывоалывоалволывоалыва в dsf ksdjfkd fs jfkdj ksd fsdk алыво fsd kd fsdkj алывоа лыввоа лыва лывоа вылоа skfj sdkjf влао влаов а</p></div>
</div></div>
<div id="footer">нижний блок сайта</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
#header {background: #fff url(background_1.gif) no-repeat bottom left;}
#outer_wrapper {background: #fff url(background_2.gif) repeat-y left; height:100%;}
#wrapper {background: url(background_2.gif) repeat-y right; }
#container {width: 100%; float: left; background: url(background_2.gif) repeat-y right; }
#content {background: url(background_2.gif) repeat-y left;}
#main {margin-left: 155px;}
#left {overflow: hidden; width: 150px; float: left;}
#footer {background: #fff url(background_1.gif) no-repeat top left;}
/*]]>*/
</style>
</head>
<body>
<div id="header">Шапка сайта</div>
<div id="outer_wrapper">
<div id="content">
<div id="left"><h1>блок для основного меню и блоков управления</h1>
<ul><li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
<li>пункты меню
</ul>
<p>другие блоки</p>
</div>
<div id="main">
<h1>Контент сайта</h1>
<p>dssd влола ал в в в влоалвовла kdfj kj алывоа лыоа лы авыоалыввоалоа лывоалывоалволывоалыва в dsf ksdjfkd fs jfkdj ksd fsdk алыво fsd kd fsdkj алывоа лыввоа лыва лывоа вылоа skfj sdkjf влао влаов а</p></div>
</div></div>
<div id="footer">нижний блок сайта</div>
</body>
</html>