| |
|
|
| | Убил целый день. Код работает работет во всех браузерах кроме злополучного IE6. Подскажите, что можно помнять чтоб работало? Проблема стара как мир, требуеться: две колонки одной высоты. Левая шире, правая уже.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#big{
float: left
}
#small{
width: 33.3%;
margin-right:-100%;
float: left
}
#sinij{
position: relative;
left: 75%;
width: 25%;
background-color: #369;
}
#krasnyi{
position: relative;
width: 300%;
left: -300%;
margin-right: -200%;
background-color: #963;
}
#clear{
clear: both;
font-size:0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="sinij">
<div id="krasnyi">
<div id="big">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="small">
hghghkasdask
</div>
<div id="clear"></div>
</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: gmile
(05.08.2009 в 01:04)
| | | обычно для ie6 приходится делать ещё одни стили
, например так разделяется что будет показано в ie6 а остальные браузеры примут за комментарии
<link type="text/css" rel="stylesheet" href="menu.css"/>
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="ie_menu.css"/>
<![endif]-->
|
можно и не только с <link> применить
, но может оно и не надо. (неначём потестить) | |
| |
|
|
| |
|
|
| |
для: gmile
(05.08.2009 в 01:04)
| | | | |
| |
|
|
| |
|
|
| |
для: gmile
(05.08.2009 в 01:04)
| | | Проблему решил. Загвоздка была в адаптации примера Сергея Чикуенка для себя. Вчера просто через Ж пытался делать, сегодня сел верстать всё с нуля и получилось.
А вот, собственно, что получилось:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
.col-wrap1 {
background-color: red;
width: 75%;
position: relative;
}
.col-wrap2 {
background-color: blue;
width: 33.3%;
position: relative;
left: 100%;
}
.col1 {
margin-right: -100%;
position: relative;
left: -300%;
float: left;
}
.clear {
clear:both;
font-size:0;
overflow:hidden; /* тройной презерватив для IE */
}
</style>
</head>
<body>
<div class="col-wrap1">
<div class="col-wrap2">
<div class="col1">
big column
</div>
<div class="col2">
small column<br/>
asdasdas
<div class="clear"></div>
</div>
</div>
</body>
</html>
|
Не стесняйтесь и используйте этот пример для себя. На сегодняшний день это самый правильный способ верстать макет из нескольких колонок нетаблично для большого круга браузеров. Если захотите разобраться подробнее - читейте Чикуенка [http://chikuyonok.ru/]. На первой странице там как-раз идет разбор полетов по поводу этого вопроса. | |
| |
|
|
| |
|
|
| |
для: GMile
(05.08.2009 в 13:26)
| | | А где закрывающий тег у <div class="col-wrap1">
а <div class="col2" > дает трехпиксельный баг в ИЕ 6
а внесите длинную строчку big column и посмотрите что получится....
кстати ресеты никто не отменял
*{
margin: 0;
padding: 0;
} | |
| |
|
|
