Как риализовать следующий каркас

The1stPresident · October 25, 2007

Не могу никак нормально вс? сделать...

Необоходимо получить DIVами:

-шапку с бэкграндом по левому краю

-ниже полоса на всю ширину с одним только лого по середине

-ниже еще полоса уже с контентом (контент при этом по середине, состоит из трех DIVов в ряд: все фиксированы разной ширины, грубо в сумме ширина всех трех порядке 600пкс, и это все по середине полосы с контентом) которая будет растягиваться по высоте и занимать вс? свободное пространство

- ну и футтер с еще одним бэкграундом по левому края (нижние и верхние DIVы фиксированы по высоте.

Помогите плиз... и какой DOCTYPE следует применять.... прям головоломка

shkoda · October 25, 2007

а вы не могли бы хотя бы рисунок показать?

The1stPresident · October 25, 2007

http://photofile.ru/users/the1stpresident/...881/full_image/

maddogrts · October 25, 2007

500р , или ваш код

Scrum · October 25, 2007

готов помочь за пиво.

maddogrts · October 25, 2007

Scrum

Не пали контору

The1stPresident · October 25, 2007

Ребят, ну не знаю, что со мной..... я на самом деле верстаю дивами не очень давно....

вот код....

сама страница:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv=content-type content=text/html;charset=utf-8>
<LINK href="style.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<div class="storke">

<div class="top"> </div>

<div class="logo"> </div>


<div class="content">

<table cellpadding="0" align="center" cellspacing="0" border="0">
<tr><td class="left">ЛЕВО</td>
<td class="warning">центр - контент</td>
<td class="right">ПРАВО</td>
</tr>
</table>


</div>


<div class="bottom"> </div>

</div>

</BODY>
</HTML>

CSS

body{
background-color: #FFffFF;
font-family: Arial;
color: #231f20;
font-size: 12px;
text-align:center;
margin:0;
padding:0;
height:100%;
}
.top{
background: URL('i/top_line.png') #FFffFF top right no-repeat;
height:146px;
}
.storke{
margin:0px;
padding:0px;
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
background:#000000;
height:100%;
text-align:center;
}

div.content{
background: URL('i/bottom_line.png') #FFffFF bottom left no-repeat;
text-align:center;
width:100%;
position:absolute;
bottom:0px;
padding-bottom:146px;
}
.logo{
background: URL('i/logo.png') #FFffFF center center no-repeat;
height:150px;
margin-top:15px;
}
.left{
background: URL('i/left.png') #FFffFF center right no-repeat;
color:#ed1c24;
text-align:right;
font-family: Arial;
font-size: 12px;
font-weight:bold;
height:150px;
padding-right:70px;
}
.right{
background: URL('i/right.png') #FFffFF center left no-repeat;
color:#0071bc;
text-align:left;
font-family: Arial;
font-size: 12px;
font-weight:bold;
height:150px;
padding-left:70px;
}
.warning{
background:#dfd1bc;
text-align:center;
font-family: Arial;
font-size: 12px;
font-weight:bold;
width:500px;
height:150px;
}

помогите советом.....

makarena · October 25, 2007

А почему бы вместо таблицы не сделать 3 дива фиксированной длинны?

maddogrts · October 26, 2007

The1stPresident Это не дивы ), Зачем использовать таблицы без явного их требования ?

Напиши тоже самое без таблиц, я тебе помогу потом окей ?

"помогите советом..... " Даже больше

<шапка><лого />шапка>
<лево>лево>
<текст>текст>
<право>право>
<подвал>подвал>

шапка - фон типа завитушки, лого картинка с логотипом.

лево влево, текст тоже влево, право можно влево можно вправо ))))

подвал, клеар

The1stPresident · October 26, 2007

спасибо ребят

Sign In

Как риализовать следующий каркас

Question

The1stPresident

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

shkoda

Link to comment

Share on other sites

The1stPresident

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

The1stPresident

Link to comment

Share on other sites

makarena

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

The1stPresident

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information