Positioning Images to make a site layout.

[SeanieC]

Okay, heres the old, fireworks compiled, messy and finally still full of pointless (x)HTML.

http://www.i-dash.co.uk/sean/

I have started a new one this time building it bit by bit myself and organising the code as I go along. It was suggested to me that I shouldn't use absolute positioning, so I have used relative. I'm still not sure what the differences are between them all but have the general jist. Does this look correct because I had to visually position a <div> to the right of another <div> and this was the way I worked out how to do it.


body {
background-color: #FFFFFF;
margin: 0px;
}
#circlestop {
position: relative;
width: 256px;
left: 150px;
}
#bannerleft {
left: 150px;
position: relative;
width: 256px;
}
#flashbanner {
position: relative;
left: 406px;
top: -123px;
width: 127px;
}


It was bannerleft then to the right of that flashbanner.

Thanks!

[Wiz Creations]

I think you would be able to do this making a 3 column design with a 1 column header and footer. You could do that gray fading into white as a background image for the 2 right columns with repeat-y and a white background color. However, that would require you to use gifs with transparent backgrounds...

[sameer.net.in]

make a container div ( it will contain all the content on the page )
align it horizontally center using margin:0px auto;
then put the above three div in it with float:left;
u wont need to specify left spacing with this method.
content aligns in one shot.
keep in mind to set proper z-index as well.

[SeanieC]

ohh totally changed stuff, sorry for not posting. I used a container instead and had 1 image for the entire top. I only needed to place a flash banner up there aswell thats why I cut it into more then 1 section. I used padding to get the positioning of the flash banner perfect. Very happy with the results.



#container {
padding: 0px 90px 0px 90px;
margin: 0px;
}
#header {
background: url(images/top.jpg) no-repeat top left;
height: 153px;
}
#flashbanner {
width: 271px;
padding-top: 30px;
padding-left: 256px;
padding-right: 292px;
}
#content {
background: url(images/content.jpg) no-repeat top left;
height: 552px;
}
#footer {
background: url(images/footer.jpg) no-repeat top left;
height: 38px;


Just doing my navigation now