| |
|
|
| | Есть такая вёрстка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>CSS</title>
</head>
<body>
<div style="background:#ddd; width:100%; height: 164px; min-width:700px;">
<img src="transp.gif" width="700" height="1" alt="" style="float:left;">
<div style="float: left; width: 100%;background: #FDE95E; height: 164px; ">
<div style="width: 200px; float: left; height: 164px; background: blue;">
</div>
</div>
<div style=" margin-left: -200px; width: 200px; float: left; height: 164px; background: red;">
</div>
</div>
</body>
</html>
|
Нужно ограничить сжатие всех дивов. Чтобы левый и правый дивы не встречались. Для браузеров Опера и Мазила используется свойство min-width в верхнем диве. Для IE6 вставлена распорка (прикрепил на всякий случай в файлы). Но этот кривой 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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>CSS</title>
</head>
<body>
<table width="100%"><tr><td>
<img src="transp.gif" width="700" height="1" alt="" style="float:left;">
<div style="float: left; width: 100%;background: #FDE95E; height: 164px; ">
<div style="width: 200px; float: left; height: 164px; background: blue;">
</div>
</div>
<div style=" margin-left: -200px; width: 200px; float: left; height: 164px; background: red;">
</div>
</td></tr></table>
</body>
</html>
|
А как обойтись без таблиц? | |
| |
|
|
| |
|
|
| |
для: Andchir
(18.09.2007 в 09:38)
| | | посмотрите http://www.alistapart.com/articles/switchymclayout
для body при разной шире экрана назначается свой класс. отловите нужную ширину и в классе задайте явно width для документа. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.09.2007 в 09:50)
| | | Большое спасибо! То что нужно!
Нашел на форуме ещё вот такой способ:
<!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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>CSS</title>
<style>
div#measurer
{
position:absolute;
width:100%;
top:0px;
height:1px;
line-height:1px;
z-index:10;
}
div#layout
{
min-width:800px;
width:100%;
min-height:100%;//height:100%;
margin:0px;
padding:0px;
position:relative;
z-index:20;
}
* html div#layout {
width: expression(
(
document.getElementById('measurer') &&
document.getElementById('measurer').clientWidth < 800
)
? '800px'
: '100%'
);
}
</style>
</head>
<body>
<body>
<div id="measurer"></div>
<div id="layout">
<div style="float: left; width: 100%;background: #FDE95E; height: 164px; ">
<div style="width: 200px; float: left; height: 164px; background: blue;">
</div>
</div>
<div style=" margin-left: -200px; width: 200px; float: left; height: 164px; background: red;">
</div>
</div>
</body>
</body>
</html>
|
| |
| |
|
|
