SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A beginner needs help html/css...

    Just bought sitepoint's book, Build your own... using html & css. I'm on chapter 7 and stumbled across a layout issue I don't understand. I simplifed the problem to a test.html and test.css code below. The problem is my "naviagtion" block is not aligning right up next to my header. The appearance is one of a margin but my margin is 0. I want the position to be float (and know if I set it to absolute it will work). If you uncomment, in the .css, the border then it will align. But why must I use the border to get it to align? Is this the only way?

    [side note, I know my doctype isn't complete but when I try to upload this with a "link" sitpoint tells me no, no ,no . So... had to remove the link.

    TEST.HTML

    <!DOCTYPE html PUBLIC >
    <head>
    <title>Bubble Under - The diving club for the SW UK </title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="test.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div id="header">
    <h1>BubbleUnder.com</h1>
    </div> <!-- end of header-->
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="gallery.html">Image Gallery</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    </body>
    </html>

    TEST.CSS

    body {
    margin: 0;
    }
    h1 { font-family: sans-serif;
    border: 1px solid black;
    margin: 0;
    }
    #navigation {
    position: float;
    width: 182px;
    height: 484px;
    /* border: 1px solid white; */
    background: green;
    margin: 0;
    }

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without an example its hard to say but one thing I noticed straight off is teh way you declare float.

    It should be:

    float: left; OR
    float: right; NOT
    position: float;
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  3. #3
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Webnoob, that was the problem, my syntax.


Bookmarks

Posting Permissions

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