Верстка div-ами

Goldie · August 17, 2011

Подскажите, как на дивах сверстать такой макет? Конкретно трудности вызывают цветные блоки и блок снизу в левой колонке.

Макет

Goldie · August 18, 2011

У меня получается как-то так. Не совсем то, но уже близко:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>title</title>
  <style type="text/css">
   body {
    font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #fff; /* Цвет фона */
    margin: 0; /* Убираем отступы */
   }
   h2 {
    font-size: 1.1em; /* Размер шрифта */
    color: #752641; /* Цвет текста */
    margin-bottom: 0; /* Отступ снизу */
   }
   #container {
    width: 500px; /* Ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
    background: #f0f0f0; /* Цвет фона правой колонки */ 
   }
   #header {
    background: #8fa09b; /* Цвет фона */
    font-size: 24pt; /* Размер текста */
    font-weight: bold; /* Жирное начертание */
    color: #edeed5; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
   }
   #content {
    width: 329px; /* Ширина левой колонки */
    padding: 10px; /* Поля вокруг текста */
    border: 1px solid #183533; /* Линия справа */
    background: #C7C7C7; /* Цвет фона левой колонки */
   }
   #content p {
    margin-top: 0.3em /* Отступ сверху */
   }
   #bottom_c {
   float: left; /* Обтекание по правому краю */
    width: 329px; /* Ширина левой колонки */
    padding: 10px; /* Поля вокруг текста */
    border: 1px solid #183533; /* Линия справа */
    background: #717171; /* Цвет фона левой колонки */
   }
   #bottom_d {
   float: left; /* Обтекание по правому краю */
    width: 329px; /* Ширина левой колонки */
    padding: 0px; /* Поля вокруг текста */
    border: 1px solid #183533; /* Линия справа */
    background: #717171; /* Цвет фона левой колонки */
   }
   #sidebar {
    float: right; /* Обтекание по левому краю */
    width: 120px; /* Ширина */
    padding: 10px; /* Отступы вокруг текста */
    border: 1px solid #183533; /* Линия справа */
    padding-top: 200px;
   }
   #footer {
    background: #8fa09b; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
   }
   .clear { 
    clear: both; /* Отмена обтекания */ 
   }
  </style>
 </head>
 <body>
  <div id="container">
   <!-- <div id="header">Рецепты от Миранды</div> -->
<div id="bottom_d">M

<div style="background:#FA911D; width:450px; margin: 200px 0 0 0;">1 text</div>
<div style="background:#0080C0; width:350px;">2 text text</div>
<div style="background:#80FF00; width:300px;">3 text text text</div>
</div>

   <div id="sidebar">
    <p><a href="popular.html">line 1</a></p>
    <p><a href="day.html">line 2</a></p>
    <p><a href="apple.html">line 3</a></p>
    <p><a href="ice.html">line 4</a></p>
    <p><a href="hliv.html">line 5</a></p>
   </div>

   <div id="content">
    <h2>content</h2> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br 

/><br /><br /><br /><br /><br /><br /><br /><br />
   </div>


<div id="bottom_c"><h2>content 2</h2></div>

   <div class="clear"></div>
   <!-- <div id="footer">futer</div> -->
  </div>
 </body>
</html>

nightgremlin · August 22, 2011

вот мой вариант

html код:

<!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>Макет</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id=r_1></div>
<div id=r_2></div>
<div id=r_3></div>
<div id=r_4></div>
</div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
</html>

И CSS:

body{widht:100%;
margin:0 auto}
#header{float:left;
background:#cccccc;
width:70%;
display:block;
padding-bottom:100%;
}
#r_1{
background:#009933;
widht:120%;
height:5%;
padding-left:100%;
position:absolute;
top:20%;
right:20%;
display:block;
}
#r_2{
background:#3300FF;
widht:100%;
height:5%;
position:absolute;
top:25%;
right:30%;
padding-left:100%;
display:block;
}
#r_3{
background:#CC0000;
widht:80%;
height:5%;
position:absolute;
top:30%;
right:40%;
padding-left:100%;
display:block;
}
#r_4{
background:#FFCC00;
widht:60%;
height:5%;
position:absolute;
top:35%;
right:50%;
padding-left:100%;
display:block;
}
#footer{
clear:both;
display:block;
widht:70%;
height:5%;
background:#666666;
padding-left:70%;
padding-bottom:5%;
margin-right:30%;
}
#sidebar{
width:30%;
float:right;
background:#999999;
display:block;
padding-bottom:100%
}

Edited August 22, 2011 by nightgremlin

nightgremlin · August 22, 2011

немного подправил вот ваш макет

html:

<!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>Макет</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<div id="r_1"></div>
<div id="r_2"></div>
<div id="r_3"></div>
<div id="r_4"></div>
</div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>

CSS:


body{widht:100%;
margin:0 auto}
#container {
    width: 100%; 
    margin: 0 auto; 
    background:#999999;
}
#header{float:left;
background:#cccccc;
width:70%;
display:block;
padding-bottom:100%;
}
#r_1{
background:#009933;
widht:120%;
height:5%;
padding-left:100%;
position:absolute;
top:20%;
right:20%;
display:block;
}
#r_2{
background:#3300FF;
widht:100%;
height:5%;
position:absolute;
top:25%;
right:30%;
padding-left:100%;
display:block;
}
#r_3{
background:#CC0000;
widht:80%;
height:5%;
position:absolute;
top:30%;
right:40%;
padding-left:100%;
display:block;
}
#r_4{
background:#FFCC00;
widht:60%;
height:5%;
position:absolute;
top:35%;
right:50%;
padding-left:100%;
display:block;
}
#footer{
clear:both;
display:block;
widht:100%;
height:5%;
background:#666666;
padding-left:70%;
padding-bottom:5%;
margin-right:30%;
}
#sidebar{
width:30%;
float:right;
background:#999999;
display:block;
padding-bottom:100%
}

ну и чтобы CSS был валидным, ещё немного подправил:

body{margin:0 auto}
#container {
    width: 100%; 
    margin: 0 auto; 
    background:#999999;
}
#header{float:left;
background:#cccccc;
width:70%;
display:block;
padding-bottom:100%;
}
#r_1{
background:#009933;
height:5%;
padding-left:100%;
position:absolute;
top:20%;
right:20%;
display:block;
}
#r_2{
background:#3300FF;
height:5%;
position:absolute;
top:25%;
right:30%;
padding-left:100%;
display:block;
}
#r_3{
background:#CC0000;
height:5%;
position:absolute;
top:30%;
right:40%;
padding-left:100%;
display:block;
}
#r_4{
background:#FFCC00;
height:5%;
position:absolute;
top:35%;
right:50%;
padding-left:100%;
display:block;
}
#footer{
clear:both;
display:block;
height:5%;
background:#666666;
padding-left:70%;
padding-bottom:5%;
margin-right:30%;
}
#sidebar{
width:30%;
float:right;
background:#999999;
display:block;
padding-bottom:100%
}

Edited August 22, 2011 by nightgremlin

Goldie · August 23, 2011

Эта верстка хороша если макет резиновый, а если макет фиксирован по ширине, например 900px и должен быть центрирован, то такая верстка к сожалению не подходит.

nightgremlin · August 23, 2011

Эта верстка хороша если макет резиновый, а если макет фиксирован по ширине, например 900px и должен быть центрирован, то такая верстка к сожалению не подходит.

Завтра посмотрю что можно сделать.

А вы ничего нового не придумали, просто давно не отвечали.

P/S:Я код в блокноте печатал на работе. Дома некогда.

Edited August 23, 2011 by nightgremlin

Goldie · August 23, 2011

А вы ничего нового не придумали, просто давно не отвечали.

Я сделал иначе, но при моей верстке при увеличении контента, футер не уходит вниз и правая колонка не тянется.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>title</title>
  <style>

.* {
            margin:0px
            padding:0px;
            border:none
}

#container {
    width: 800px; /* Ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
    position:relative;
   }

#header {
   display:block;
   position:absolute;
   left:0px;
   top:0px;
   width:600px;
   min-height:150px;
   background-color: #FBFBFB;
}

#content {
            display:block;
            position:absolute;
            left:0px;
            top:260px;
            width:600px;
            background-color: #FBFBFB;
            padding-top: 20px;
}

#footer {
            display:block;
            position:absolute;
            top:600px;
            width:600px;
            min-height:80px;
            background-color: #993399;
            left: 0px;
}


.b-right-column {
   display:block;
   position:absolute;
   left:600px;
   top:0px;
   width:200px;
   min-height:700px;
   background-color: #D9DADC;
}

.b-menu {
            display:block;
            position:absolute;
            top:150px;
            width:700px;
            left: 0px;
}

.b-menu-sub01{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:200px;
            min-height:10px;
            background-color:#D9DADC;    
}

.b-menu-sub02{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:300px;
            min-height:10px;
            background-color: #A2A3A7;
}

.b-menu-sub03{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:400px;
            min-height:10px;
            background-color: #FEE05A;    
}

.b-menu-sub04{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:500px;
            min-height:10px;
            background-color: #01ABCC;     
}

.b-menu-sub05{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:600px;
            min-height:10px;
            background-color: #C94092;    
}

.b-menu-sub06{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:700px;
            min-height:10px;
            background-color: #6A1384;  
}

</style>



<body>

<div id="container">

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

<div class="b-right-column"> right </div>

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

</div>

<div id="footer"> footer </div>

<div class="b-menu">

  <div class="b-menu-sub01">line 1</div>
  <div class="b-menu-sub02">line 2</div>
  <div class="b-menu-sub03">line 3</div>
  <div class="b-menu-sub04">line 4</div>
  <div class="b-menu-sub05">line 5</div>
  <div class="b-menu-sub06">line 6</div>

</div>

</div>

</body>

</html>

Попробую объединить ваш и свой варианты.

nightgremlin · August 23, 2011

Попробуйте.

Goldie · September 12, 2011

Подскажите, как сделать чтоб при увеличении контента в правой или левой колонке обе одинаково тянулись вниз?

CSS

body{margin:0 auto}

#container {
    width: 900px; 
    margin: 0 auto; 
    background:#ffffff;
}

#header{
float:left;
background:#F9F9F9;
width:700px;
display:block;
padding-bottom:100%;
}

#footer{
clear:both;
display:block;
height:5%;
width:700px;
background:#666666;
padding-bottom:5%;
margin-right:30%;
}

#sidebar{
width:200px;
float:right;
background:#D9DADC;
display:block;
padding-bottom:100%;
}

.content {
position:relatove;
padding-top:300px;
}

#t-menu {
            display:block;
            position:absolute;
            top:150px;
            width:700px;
}

#r_1{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:300px;
            min-height:10px;
            background-color:#D9DADC; 
}

#r_2{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:400px;
            min-height:10px;
            background-color: #A2A3A7;
}

#r_3{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:500px;
            min-height:10px;
            background-color: #FEE05A; 
}

#r_4{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:600px;
            min-height:10px;
            background-color: #01ABCC;  
}

#r_5{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:700px;
            min-height:10px;
            background-color: #C94092;  
}

#r_6{
            display:block;
            position:relative;
            top:0px;
            left: 0px;
            width:800px;
            min-height:10px;
            background-color: #6A1384;  
}

HTML

<!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>Макет</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">

<div id="t-menu">
<div id="r_1"> line1 </div>
<div id="r_2"> line2 </div>
<div id="r_3"> line3 </div>
<div id="r_4"> line4 </div>
<div id="r_5"> line5 </div>
<div id="r_6"> line6 </div>
</div>

<div class="content"> content </div>

</div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>

Sign In

Верстка div-ами

Question

Goldie

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Goldie

Link to comment

Share on other sites

nightgremlin

Link to comment

Share on other sites

nightgremlin

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

nightgremlin

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

nightgremlin

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information