View Full Version : CSS applied for entire web page width/height

Satal Keto
05-14-2007, 07:51 PM
I am creating a website for part of my school coursework.
I am having only one problem with the website though.
When the webpage has an image which is wider than the users screen size, then the header doesn't go the whole way across but only to where the screen would end. The same goes for height.
The website has been written using CSS and xhtml.
The code that I am using is;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
body {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%; background-color:#7E0000;}
.left {background-image:url(images/leftheader.jpg); position:absolute; width:175px; height:150px; z-index:2;}
.header {background-image:url(images/header.jpg); color:#666666; text-align:center; vertical-align:middle; position:absolute; height:150px; width:100%; z-index:1;}
.side {background-image:url(images/side.jpg); color:#666666; text-align:center; vertical-align:top; position:absolute; height:100%; width:175px; z-index:1; padding-top:160px;}
.main {background-color:#7E0000; color:#666666; position:absolute; height:100%; width:100%; z-index:1; padding-top:160px; z-index:0;}
.maintext {left:180px; position:absolute;}
<span class='left'>
<span class='header'>
Header Div
<br />
<span class='side'>
Side Span
<span class='main'>
<span class='maintext'>
Large Image
<br />
A large picture
<br />
<img src='images/BigPic.jpg' alt='Big Pic'>

Can anyone has any idea's what I am doing wrong it would be a great help if someone could point me in the right direction

And just to clarify my coursework is not the correctness of my code or really the content. The coursework is to create dynamic scripts.


EDIT: Sorry I realised that I put the code that I was using briefly.

05-14-2007, 07:54 PM
Hmm you can't set a width or height to an inline element. Change your spans to divs and see what happens. Its probably going to make everything stack up on each other but this is okay since you can use float:left; in CSS. Thats about as much info as I will give you. Good luck.

05-14-2007, 08:14 PM
Also that there are some errors in your document. validate them (http://validome.org).