Блоки

Cyrax · June 14, 2008

Всем привет. Такая проблема. Верстаю сайт блоками и хочу сделать сайт в три ряда, но с третимя рядом проблемы, смотрите:

Код сайта:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <link rel="stylesheet" href="hb.css" type="text/css">
 <link rel="stylesheet" href="fp.css" type="text/css">
</head>

<body>
<div id="title">Шапка</div> 

<div id="bread">Реклама</div>

<div id="col1">

<div class="panel">Навигация</div>

<div class="panel">Подписка</div>

</div>

<div id="col2">

<div class="frame">Контент</div>

</div>

<div id="col3">

<div class="panel">К</div>
<div class="panel">К</div>
<div class="panel">К</div>
</div>

<div id="bottom">Навигация</div>

<div id="footer">Подвал</div>
</body>
</html>

Код первого стиля

#col1 {
 width: 170px;
 margin: 10 0px;
 float: left
}



#col1 DIV.panel {
 background: #eee;
 padding: 7px;
 font-size: 90%;
 overflow: auto; 
 height: 201px;
 margin: 10px;
}


#col2 {
 margin: 20px 190px 0px 190px;


}

.frame {
 border: 0;

}





#col3 {
 width: 170px;
 float: right;
}


#col3 DIV.panel {
 background: #eee;
 padding: 7px;
 font-size: 90%;
 overflow: auto; 
 height: 201px;
 margin: 10px;
}

код второго стиля

body {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 color: #000;
}

body {
 margin: 0;
 padding: 0px;
 background: #fff;
}

#bread {
 background: #696969;
 border-bottom: solid 1px #000000;
 margin-bottom: 0px;
 font-size: 90%;
 padding: 3px;
 height: 80px;
}


#title {
 background: #800000;
 border-bottom: 1px #000000 solid;
 height: 75px;
 clear: both;
}

#bottom {
 clear: both;
 padding: 3px;
 background: #696969;
 border-top: solid 1px #000000;
 border-bottom: solid 1px #000000;
 font-size: 90%;
 height: 25px;
}
#footer {
 clear: both;
 padding: 3px;
 background: #800000;
 border-top: solid 1px #000000;
 border-bottom: solid 1px #000000;
 font-size: 90%;
 height: 75px;
}

Как видите правые блоки почему-то узжают вниз. Подскажите как это испрваить...

musulman · June 14, 2008

а если вот так вот попробывать :

Навигация

<div id="col2">

 <div class="frame">
 Текст
 </div>

 <div id="col3">

 <div class="panel">К</div>

 <div class="panel">К</div>

 <div class="panel">К</div>

 </div>

</div>

#col1 {
width: 170px;
margin: 10px 0;
float: left;
}
#col2 {
margin: 10px 0 0px 190px;
}
#col3 {
width: 170px;
float: right;
}
#col1 DIV.panel {
background: #eee;
padding: 7px;
font-size: 90%;
overflow: auto;
height: 201px;
margin: 10px;
}
#col3 DIV.panel {
background: #eee;
padding: 7px;
font-size: 90%;
overflow: auto;
height: 201px;
margin:10px;
}
.frame {
float:left;
margin:10px;
}

вроде бы работает

ZooY · June 16, 2008

Cyrax, если хочеш подправить свой вариант - поменяй местами блоки col2 и col3... и будет тебе счастье

Sign In

Блоки

Question

Cyrax

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

musulman

Link to comment

Share on other sites

ZooY

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information