• Locked
No replies
Wed, 2009-03-25 00:47
zikrija
Offline
newbie
Last seen: 13 years 14 weeks ago
Joined: 2009-03-25
Posts: 1
Points: 0

Hi all
I try to create web page
Header sections is OK but content is not ok. I try to achieve that left,middleline,pano,and right is repeated until the end of the central part(

)ie. they have the same height as this central part.
Also In the left (.left) i try to have one picture on top,middle repeted picture and sec. in the bottom. How can I do that.

Tnx. very much

#page {
margin:0px auto;
top:0px;
left:5px;
position:absolute;
width:1000px;
}
.headerTop {
background-color:#31312a;
background-image:url(images/topHeader.jpg);
height:54px;
border-bottom:#FFFFFF 1px solid;
}
.headerTopDatum {
position:absolute;
top:10px;
right:20px;
color:#FFFFFF;
}
.navigationBack {
background-image:url(images/navigation.jpg);
background-color:#bb231b;
height:39px;
width:100%;
}
.bannerBack {
background-image:url(images/bannerBakground.jpg);
background-color:#FFFFFF;
height:162px;
width:100%;
}
.bannerPos {
position:absolute;
left:24px;
margin-top:20px;
}

#content {
width:100%;
left:5px;
display:inline;
}

.left {
width:24px;
background-color:#e6e6e6;
float:left;

}

.midleText {
width:678px;
border:0px;
float:left;
}

.middleline {
width:24px;
background-image:url(images/middle.jpg);
float:left;
}
.pano {
width:250px;
background-color:#e6e6e6;
float:left;
}
.right {
width:24px;
float:left;
background-image:url(images/right.jpg)
}
.bottom {
background-image:url(images/bottom.jpg);
width:100px;
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>unit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="page">
<div class="headerTop">
	<div class="headerTopDatum">
	<p>Datum labela</p>
	</div>
</div>
<div class="navigationBack">
</div>
<div class="bannerBack">
	<div class="bannerPos">
	<img src="images/banner.jpg" alt="">
	</div>
</div>
 
<div id="content">
	<div>
	<div class="left">
	<img src="images/left.jpg" alt="">
	</div>
	<div class="midleText">
	<img src="images/proba.jpg" alt="">
	</div>
 
 
	<div class="middleline">&nbsp;</div>
	</div>
	<div class="pano">&nbsp;</div>
	<div class="right">&nbsp;
	</div>
	</div>
</div>

Top
Tags: