3 колонки

Sienens · June 5, 2007

Необходимо при размере окна браузера менее 1280px, чтобы красная колонка (см. иллюстрацию) находилась рядом с контентом. А при увеличении окна браузера (более 1280px) ? красная колонка должна "подниматься" к header'у, как на рисунке. Желательно обойтись одними div'ами. (html+css)

Сделавшему, перечислю 10 wmz.

@ndrey · June 5, 2007

2 таблицы стилей, которые переключаются js

Scrum · June 5, 2007

ну приблизительно так наверное

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
 <title></title>
 <style type="text/css">
 <!--
 html, body {
 margin: 0;
 padding: 0;
 border: none;
 }
 body {
 background-color: background-color: #E0E0E0;;
 }


 #header {
 width: 1024px;
 height: 100px;
 background-color: gray;
 color: white;
 font-family: tahoma;
 text-align: center;
 font-weight: bold;
 float: left;
 }
 #menu {
 width: 200px;
 height: 80%;
 background-color: silver;
 float: left;
 margin-right: -3px;
 }
 #content {

 height: 80%;
 color: gray;
 font-family: tahoma;
 text-align: center;
 font-weight: bold;
 margin-right: 200px;
 }
 #menu_right {
 background-color: #FF0000;
 height: 80%;
 width: 200px;
 float: right;
 }
 -->

 </style>
</head>

<body>
<div id="header">
header
</div>
<div id="menu_right">

</div>
<div id="menu">
</div>
<div id="content">
content content content content content content content content content content
</div>

</body>

</html>

Sienens · June 5, 2007

To Scrum:

Практически то, что надо. Единственное - необходимо, чтобы header всегда занимал 100% свободного места. Когда он рядом с колонкой, то 100%-240px, а когда без колонки просто 100%.

Сделаете? - перевожу 10wmz

Scrum · June 5, 2007

без JS не реально.

Tokolist · June 5, 2007

2 Sienens

Короче, дела обстоят так. Такую верстку теоретически можно сделать с помощью min/max-width, но такую вещь не будет понимать ИЕ

Будем определять не разрешение монитора, а ширину клиентской части тела документа, поскольку юзверь может изменять размеры окна (в данном случае "отметка стоит" на 600 пикселей). Хотя если нужно проверять именно разрешение, то переделать скрипт думаю тебе не составит труда.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
 padding: 0;
 margin: 0;
}

#left, #content, #right {
 height: 500px;
}

#top {
 background-color: #222;
 height: 50px;
 /*margin-right: 100px;*/
}

#container {
 /*float: left;*/
 margin-right: 100px;
 background-color: green;
}

#right {
 /*display: none;*/
 position: absolute;
 top: 50px;
 right: 0;
 width: 100px;
 background-color: red;
}

#left {
 float: left;
 width: 100px;
 background-color: yellow;
}

#content {
 /*float: left;*/
 margin-left: 100px;
 background-color: orange;
}
</style>
<script type="text/javascript">
windowResize = function() {
 var rightDiv = document.getElementById("right");
 var topDiv = document.getElementById("top");

 if (document.body.clientWidth > 600) {
 rightDiv.style.top = "0px";
 topDiv.style.marginRight = "100px";
 } else {
 rightDiv.style.top = "50px";
 topDiv.style.marginRight = "0px"; 
 }
}

if (window.addEventListener) {
 window.addEventListener("resize", windowResize, false);
 window.addEventListener("load", windowResize, false);
} else if (window.attachEvent) { // fucking IE
 window.attachEvent("onresize", windowResize);
 window.attachEvent("onload", windowResize);
}
</script>
</head>
<body>
<div id="top">TOP</div>

<div id="right">RIGHT</div>

<div id="container">
<div id="left">LEFT</div>
<div id="content">CONTENT</div>
</div>

</body>
</html>

Проверял под ИЕ 5, 6; ФФ 1.5, 2; Опера 9.0, 9.2. Если юзверь отключит скрипты, то он всегда будет видеть первый вариант из твоего скриншота, не зависимо от установленного разрешения (или размера окна). Ну и флаг ему в руки :lol:

Sienens · June 5, 2007

Tokolist, спасибо. Напишите Ваш wmz здесь или в личку, переведу обещанное вознаграждение.

to Scrum: спасибо, за помощь, но окончательный рабочий вариант получил от Tokolist...

Tokolist · June 5, 2007

Если код подходит и действительно не жаль данной сумы, то я не откажусь. Мне деньги пригодятся на хостинг. Спасибо. Номер кошелька выслал в личку.

Sienens · June 6, 2007

Вс? по-честному :lol: отправил. за код - спасибо

Sign In

3 колонки

Question

Sienens

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

@ndrey

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Sienens

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

Sienens

Link to comment

Share on other sites

Tokolist

Link to comment

Share on other sites

Sienens

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information