Member Avatar for Alexancho

I am creating 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/learning/example1/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:

<!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> &nbsp; </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> &nbsp; </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:

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. The pictures from the middle starts with high of 100 => 100-29=71*/

#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;
}
  • 4 Contributors
  • 5 Replies
  • 132 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for stevenpetersen

container may need to be bigger than 770px. It could be the problem to your site.

Member Avatar for Spine

*Line 183 is missing a semi-colon at the end.

#content {
width: 770px;
padding: 0px;
top:357px /* <-- missing semi-colon */
background-color: Gainsboro; /* gray */
}

It seems to me you have also have quite a bit of unnecessary code.

You can absolutely position the images without needing a div tag for each one.

<style type="text/css'>
/* sets properties for all IMG tags so you don't need to type "position: absolute;" over and over */
#header img { display: block; position: absolute; } 

/* when positioning, it's usually a good idea to provide width and height if you know it */
#image_id { top: XXpx; left: XXpx; width: XXpx; height: XXpx; }
</style>
<img id="image_id" src="image_src.jpg" />

If you need more help with understanding absolute positioning.. try this: http://stopdesign.com/archive/2003/09/03/absolute.html

Member Avatar for Alexancho

Thank you very much. Your advices were helpful. I've put things in order and did validation and afterward the problem was solved. :)

Member Avatar for MidiMagic

Neither 0 px nor 0px is a valid code.

0 px has a space in it, which makes it two different items.

0px does not work on some browsers, and causes the entire style to be eliminated. Those browsers can not take a unit of measure with a 0 value.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.