Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS applied for entire web page width/height

    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;

    Code:
    <!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'>
      <head>
        <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
        <title>
          Website
        </title>
      </head>
      <body>
        <style>
          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;}
        </style>
        <span class='left'>
          &nbsp;
        </span>
        <span class='header'>
          Header Div
        </span>
        <br />
        <span class='side'>
          Side Span
        </span>
        <span class='main'>
          <span class='maintext'>
            <b>
              Large Image
            </b>
            <br />
            A large picture
            <br />
            <img src='images/BigPic.jpg' alt='Big Pic'>
          </span>
        </span>
      </body>
    </html>
    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.

    Regards
    Satal

    EDIT: Sorry I realised that I put the code that I was using briefly.
    Last edited by Satal Keto; 05-14-2007 at 08:01 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    177
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Also that there are some errors in your document. validate them.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •