I am creating a website using CSS. It must be something like this:
http://webdesign-gold.awardspace.biz/model_1.html
A picture of a header(fuchsia) is made from many small fragments. The same with a navigation bar(green). To perform this task i used absolute positioning for these fragments. So, actually i need everything in this website to be positioned absolutely. But i can't. Everything is moving instead of the picture. Something obviously wrong with the positioning:
http://webdesign-gold.awardspace.biz...e1/index1.html
I uploaded only a few fragments of a pictures, hope it doesn't create problems for understanding. Could you help me to understand what is wrong?
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Webmaster2008_first example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ANSI" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<!-- Definition of a cod for building the top part of the header -->
<div id="index_01">
<img src="images/index_01.jpg"/>
</div>
<div id="index_02">
<img src="images/index_02.jpg"/>
</div>
<div id="index_03">
<img src="images/index_03.jpg"/>
</div>
<div id="index_04">
<img src="images/index_04.jpg"/>
</div>
<div id="index_05">
<img src="images/index_05.jpg"/>
</div>
<div id="index_06">
<img src="images/index_06.jpg"/>
</div>
<div id="index_07">
<img src="images/index_07.jpg"/>
</div>
<!-- End of a cod for building the top part of the header -->
<!-- Definition of cod for building the middle part of the header -->
<div id="index_08">
<img src="images/index_08.jpg"/>
</div>
<div id="index_09">
<img src="images/index_09.jpg"/>
</div>
<div id="index_10">
<img src="images/index_10.jpg"/>
</div>
<div id="index_11">
<img src="images/index_11.jpg"/>
</div>
<div id="index_12">
<img src="images/index_12.jpg"/>
</div>
<div id="index_13">
<img src="images/index_13.jpg"/>
</div>
<div id="index_14">
<img src="images/index_14.jpg"/>
</div>
<div id="index_15">
<img src="images/index_15.jpg"/>
</div>
<div id="index_16">
<img src="images/index_16.jpg"/>
</div>
<div id="index_17">
<img src="images/index_17.jpg"/>
</div>
<div id="index_18">
<img src="images/index_18.jpg"/>
</div>
<div id="index_19">
<img src="images/index_19.jpg"/>
</div>
<!-- The picture of the header is created -->
<!-- blue stripe -->
<div id="index_21">
<img src="images/index_21.jpg" width="770" height="10" />
</div>
<!-- end of blue stripe -->
</div> <!-- end #header -->
<!-- Hotel search and Special offer -->
<div id="index_23">
<img src="images/index_23.jpg" width="616" height="95" />
</div>
<div id="index_27">
<img src="images/index_27.jpg" width="245" height="27" />
</div>
<div id="index_24">
<img src="images/index_24.jpg"/>
</div>
<div id="index_25">
<img src="images/index_25.jpg"/>
</div>
<div id="index_26">
<img src="images/index_26.jpg"/>
</div>
<div id="index_28">
<img src="images/index_28.jpg"/>
</div>
<div id="index_29">
<img src="images/index_29.jpg"/>
</div>
<div id="content">
<div id="content_left">
<img src="images/index_31.jpg" alt="airplane" />
<div class="box">
<img src="images/index_34.jpg" align="middle">
<p class="left_box"> <b>fonte lactis ubertim manante:</b> atque aundante opis egentissimum et illoa dhuc uno
alimento vitam ucentemon sortem non pati. sed blante tole ran tur haec, non quia .
<br />
<span class="readmore"><a href="#" target="_blank">read more>></a></span> </p>
</div>
<p> </p>
<div class="box">
<img src="images/index_34.jpg" align="middle">
<p class="left_box"> <b>fonte lactis ubertim manante:</b> atque aundante opis egentissimum et illoa dhuc uno
alimento vitam ucentemon sortem non pati. sed blante tole ran tur haec, non quia
.<br />
<span class="readmore"><a href="#" target="_blank">read more>></a></span> </p>
</div>
<p> </p>
<div class="box">
<img src="images/index_34.jpg" align="middle">
<p class="left_box"> <b>fonte lactis ubertim manante:</b> atque aundante opis egentissimum et illoa dhuc uno
alimento vitam ucentemon sortem non pati. sed blante tole ran tur haec, non quia
.<br />
<span class="readmore"><a href="#" target="_blank">read more>></a></span> </p>
</div>
</div> <!-- end #content_left -->
<div id="content_right">
</div> <!-- end #content_right -->
<br class="clearfloat" />
</div> <!-- end #content -->
<div id="menu_bottom">
</div> <!-- end #menu_bottom -->
<div id="footer">
</div> <!-- end #footer -->
</div> <!-- end #container -->
</body>
</html>
CSS:
Code:
body{
margin: 0;
padding: 0;
background-image:url('images/main_bg.jpg');
background-repeat:repeat;
}
a:link, a:visited { color: blue; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: blue; text-decoration: underline;}
#container {
width: 770px;
margin: 0 auto;
padding: 0;
border-left: 0px
border-right: 0px
background-color: AliceBlue;
text-align: left;
}
#header {
background-color: fuchsia;
}
/* pictures of a header. */
#index_01 {
position: absolute;
left: 200px;
top: 0 px;
}
#index_02 {
position: absolute;
left: 323px;
top: 0 px;
}
#index_03 {
position: absolute;
left: 402px;
top: 0 px;
}
#index_04 {
position: absolute;
left: 509px;
top: 0 px;
}
#index_05 {
position: absolute;
left: 616px;
top: 0 px;
}
#index_06 {
position: absolute;
left: 728px;
top: 0 px;
}
#index_07 {
position: absolute;
left: 847px;
top: 0 px;
}
#index_08 {
position: absolute;
left: 200px;
top: 29px;
}
#index_09 {
position: absolute;
left: 261px;
top: 29px;
}
#index_10 {
position: absolute;
left: 323px;
top: 29px;
}
#index_11 {
position: absolute;
left: 389px;
top: 29px;
}
#index_12 {
position: absolute;
left: 524px;
top: 29px;
}
#index_13 {
position: absolute;
left: 823px;
top: 29px;
}
#index_14 {
position: absolute;
left: 893px;
top: 29px;
}
#index_15 {
position: absolute;
left: 524px;
top: 58px;
}
#index_16 {
position: absolute;
left: 524px;
top: 133px;
}
#index_17 {
position: absolute;
left: 752px;
top: 133px;
}
#index_18 {
position: absolute;
left: 752px;
top: 185px;
}
#index_19 {
position: absolute;
left: 752px;
top: 204px;
}
/* end of pictures of a header */
/* blue stripe */
#index_21 {
position: absolute;
left: 200px;
top: 220px;
}
/* Hotel search and Special offer */
#index_23 {
position: absolute;
left: 200px;
top: 235px;
}
#index_24 {
position: absolute;
left: 616px;
top: 235px;
}
#index_25 {
position: absolute;
left: 690px;
top: 235px;
}
#index_26 {
position: absolute;
left: 845px;
top: 235px;
}
#index_27 {
position: absolute;
left: 200px;
top: 330px;
}
#index_28 {
position: absolute;
left: 445px;
top: 330px;
}
#index_29 {
position: absolute;
left: 544px;
top: 330px;
}
/* End of Hotel search and Special offer */
#index_31 {
position: absolute;
left: 200px;
top: 357px;
}
/* content */
#content {
width: 770px;
padding: 0px;
top:357px
background-color: Gainsboro; /* gray */
}
/* content_left */
#content #content_left {
float: left;
margin-top: 357px;
width: 256px;
background-color: aqua;
position: absolute;
}
#content_left img {
margin-left: 0px;
margin-top: 0px;
padding: 0px;
}
#content_left .box {
float: left;
width: 256px;
}
.box img {
float: left;
margin-right: 0px;
}
.box p.left_box {
font-family: verdana;
font-size: 10px;
color: blue;
margin-left: 18px;
margin-right: 21px;
}
.box p.left_box > b:first-child
{
font-weight:bold
}
.box .readmore {
font-family: verdana;
font-size: 10px;
color: blue;
padding-top:0px;
padding-left:131px;
}
#content #content_right {
float: right;
width: 12em;
}
#footer p {
margin: 0;
padding: 10px 0;
background-color: #DDDDDD;
text-align: center;
font-size: .8em;
}
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
}
Web Hosting
