Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Nov 2006
    Posts
    25
    Member #
    14413
    This has to be dead simple!
    I have a dead basic page using css
    At the top a simple header that needs to go right across from one side to the other then have a little space below it before the main content starts but the bottom border (a white line) has dissapeared? Also this line needs to go right from the beginning of the page to the very end not start 5 pixels in?

    After the main content i have a footer!
    Again this needs to go right across the bottom from left to right - it dosent it goes 3/4 of the way across and the float above it come down into it. I know i need the clear command but it dosent seem to be working.
    Again the white line(the top border) starts a few pixels in from the edge?
    All help very appreciated iv spent all day trying to get this most basic bit right.
    Thanks in advance everyone - i really apprecaite any pointers

    H
    ***Code below stylesheet incorporated***
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtm11/DTD/xhtm11-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <title>www.kitoko-jewellery.co.uk | Home</title>
    <style type="text/css">
    body {
    font-family: Tahoma, "lucinda Grande", sans-serif;
    background-color: #C68C85;
    text-color: #fff;
    }
    h1 {
    color: #4D2400;
    font-size: 18px;
    }

    #Banner {
    position: fixed;
    top: 0;
    left: 0;
    font-family: Tahoma, Verdana, Arial;
    background: #C68C85;
    border-bottom: 1px solid #fff;
    }

    p {
    color: #fff;
    font-size: 12px;
    }

    #photo {

    Float: right;
    border: 5px solid #fff;
    padding: 5px;
    margin-left: 10px;
    }

    #footer {
    position: absolute;
    bottom: 0;
    color: #4D2400;
    border-top: 1px solid #fff;
    text-align: center;
    font-size: 9px;
    clear: both;

    }

    #main {
    margin-left: 20px;
    }

    #rightpanel {
    float: right;
    width: 600px;
    margin-top: 20px;
    }
    </link>

    </style>
    </head>
    <body>


    <div id="banner">
    <p>This should be at the top and underlined all the way across! i.e. the header</p>
    </div>

    <div id="rightpanel">
    <div id="photo">
    <img src="images/img3.jpg">
    </div>
    <div id="photo">
    <img src="images/img1.jpg">
    </div>
    <div id="photo">
    <img src="images/img2.jpg">
    </div>


    </div>

    </div>



    <h1>Welcome</h1>

    <p id="main">Here is the text relating to the homepage of Here is the text relating to the homepage of Here is the text relating to the homepage of Here is the text relating to the homepage of Here is the text relating to the homepage of Here is the text relating to the homepage of Here is the text relating to the homepage of Here is the text relating to the homepage of</P>

    <div id="footer">
    <p><h3> 2007 kitoko-jewellery.co.uk. All rights reserved.</p></h3>
    <p>S.U. 157, Level 1, North Mall, Westfield Centre, Derby Derbyshire, United Kingdom DE1 2PG</p>
    <p>Registered Office: Claremont House, 223 Branston Road, Burton upon Trent, Staffordshire DE14 3BT
    Company Reg No 6251862</p>
    <p><a href="<A href="http://www.kitoko-jewellery.co.uk/index">Home</a">http://www.kitoko-jewellery.co.uk/index">Home</a> | <a href="<A href="http://www.kitoko-jewellery.co.uk/index1.html">Gallery</a">http://www.kitoko-jewellery.co.uk/index1.html">Gallery</a> | <a href="<A href="http://www.kitoko-jewellery.co.uk/index2.html">Contact</a>Copyright">http://www.kitoko-jewellery.co.uk/index2.html">Contact</a>Copyright &copy; your name here | Design by <a href="<A href="http://www.visual-aid.co.uk">brampamp</a></p">http://www.visual-aid.co.uk">brampamp</a></p>
    <p>Telephone: 077881804114 - 07970771259 - 07967 532248</p>
    </div>
    </body>
    </html>

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    I can't seem to view the site:
    http://kitoko-jewellery.co.uk

    What is the proper URL?


  4. #3
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    a. Border's an easy one... CSS is case-sensitive... you're declaring #Banner and then saying id="banner" in your code. Also, if you want it to go right across the page you need to tell it so, so stick a width: 100%; in the definition.

    b. At bottom, you've not defined where to start or the width... if you add left: 0; width: 100%; surely this will do it?

    ie.

    Code:
    #banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-family: Tahoma, Verdana, Arial;
    background: #C68C85;
    border-bottom: 1px solid #fff;
    }
    #footer {
    position: absolute;
    bottom: 0;
    color: #4D2400;
    border-top: 1px solid #fff;
    text-align: center;
    font-size: 9px;
    left: 0;
    width: 100%;
    clear: both;
    }
    Can't see the text dropping down onto it myself - not happening on Firefox and don't have IE at present open but hope the above helps.

    Sean

  5. #4
    Junior Member
    Join Date
    Nov 2006
    Posts
    25
    Member #
    14413
    Thank you both all very much with your help i have now fixed the issues.
    harv


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:33 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com