Jump to content
  • 0

Как поставить сайдбары ниже контента


Mila
 Share

Question

Верстаю сложный 4х-колоночный шаблон.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head profile="http://gmpg.org/xfn/11">

</head>
<body>
<div id="container">
<div id="header"></div>

<div id="page">
<div class="maincolumn">
Контент
</div><!-- end maincolumn -->
<div id="sidebar_1"></div>
<div id="sidebar_2"></div>
<div id="sidebar_3"></div>
</div><!-- end page -->

<div id="footer"></div>
</div><!-- end container -->

CSS:

#container { 
position : relative;
width: 1190px;
height: 100%;
margin : 0 auto 0;
overflow: hidden;
}
#page {
position : relative;
float: left;
width: 1190px;
background: #fff;
margin : 0 auto 20px;
padding : 0;
text-align : left;
overflow : hidden;
}
.sidebar_1, .sidebar_2, .sidebar_3 {
position: relative;
float: left;
width : 240px;
text-align: left;
font-weight : normal;
margin : 0 20px 10px 0;
padding : 0;
}
.sidebar_2 {
width : 170px;
}
.maincolumn {
float : left;
width : 480px;
height: 100%;
margin: 0 20px 10px 0;
padding : 0;
text-align : left;
font-size : 13px;
overflow: hidden;
}

Контент в коде должен располагаться выше сайдбаров,

а визуально должен сначала стоять 1й сайдбар, потом контент, потом 2й и 3й сайдбары.

Подскажите, пожалуйста, как это сделать.

Пыталась так:

.sidebar_1 {  
position: absolute; left: 0; top: 0;
}
.maincolumn {
margin: 0 20px 10px 260px;
}

Но, тогда .sidebar_1 не должен быть длинее других колонок, иначе все, что расположено ниже обрезается.

Подскажите, плиз...

Edited by Mila
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Решение точно сложно подобрать, возможно много нюансов, от себя могу предложить попробовать давольно простой способ который на словах трудно описать. Таки способом порядок отображения может быть любым и не зависит от порядка следования в потоке, да и колонок может быть любое число. К тому же их можно в % указывать.

3колонки -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link href="/sys/css/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if IE 6]><link href="/sys/css/ie6.css" rel="stylesheet" media="all" /><![endif]-->
<title>Оформление сайта</title>
<style type="text/css">
#wrapper {
height: 100%;
margin-left: 250px;
margin-right: 200px;
}
#wrapper .colum {
position: relative;
}
#content {
float: left;
width: 100%;
}
#uno {
float: right;
margin-right: -200px;
overflow: hidden;
width: 200px;
}
#dos {
float: left;
left: -250px;
margin-left: -100%;
width: 250px;
}
</style>
</head>
<body class="orange">
<div id="wrapper">
<div id="content" class="colum">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum </p>
<pre>#content {
float: left;
width: 100%;
}</pre>
</div>
<div id="uno" class="colum">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<pre>#uno {
float: right;
margin-right: -200px;
overflow: hidden;
width: 200px;
}</pre>
</div>
<div id="dos" class="colum">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum </p>
<pre>#dos {
float: left;
left: -250px;
margin-left: -100%;
width: 250px;
}</pre>
</div>
</div>
</body>
</html>

4 колонки -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link href="/sys/css/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if IE 6]><link href="/sys/css/ie6.css" rel="stylesheet" media="all" /><![endif]-->
<title>Оформление сайта</title>
<style type="text/css">
#wrapper {
height: 100%;
margin-left: 250px;
margin-right: 400px;
}
#wrapper .colum {
position: relative;
}
#content {
float: left;
width: 100%;
}
#uno {
float: right;
margin-right: -200px;
overflow: hidden;
width: 200px;
}
#dos {
float: left;
left: -250px;
margin-left: -100%;
width: 250px;
}
#tres {
float: right;
margin-right: -400px;
overflow: hidden;
width: 200px;
}
</style>
</head>
<body class="orange">
<div id="wrapper">
<div id="content" class="colum">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum </p>
<pre>#content {
float: left;
width: 100%;
}</pre>
</div>
<div id="uno" class="colum">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<pre>#uno {
float: right;
margin-right: -200px;
overflow: hidden;
width: 200px;
}</pre>
</div>
<div id="dos" class="colum">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum </p>
<pre>#dos {
float: left;
left: -250px;
margin-left: -100%;
width: 250px;
}</pre>
</div>
<div id="tres" class="colum">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum </p>
<pre>#tres {
float: right;
margin-right: -400px;
overflow: hidden;
width: 200px;
}</pre>
</div>
</div>
</body>
</html>

Для body можно указать min-width что бы левая колонка не съезжала.

В моём примере для ie6 для левого блока нужно добавить

<!--[if IE 6]><style type="text/css">#uno{left:-100%;margin-left:-250px;}</style><![endif]-->

хотя в принципе его можно немного по другому расположить.

Edited by deadrash
Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy