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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Everything mushed up

    Why is my paragraph at the top of the page? How can I move the paragraph below the header area?





    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Home</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="style_1.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="container">
    <header>
    <div id="logo">
    <img src="images/logoTransparent.png" " alt="logo" name="logo" width="403" height="124" id="logo">
    </div>
    <div id="menu">
    <ul>
    <li><a id="nav-index" href="#">Home</a></li>
    <li><a id="nav-latestnews" href="#">Menu</a></li>
    <li><a id="nav-aboutus" href="#">About Us</a></li>
    <li><a id="nav-latestnews" href="#">Latest News</a></li>
    <li><a id="nav-contactus" href="#">Contact Us</a></li>
    </ul>
    </div>
    </header>
    <div id="page_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar malesuada malesuada. Nam pulvinar ac mi ac rhoncus. Aliquam porttitor ligula laoreet facilisis dignissim.</p>
    </div>
    <div id="footer">
    </div>
    </div>
    </body>

    </html>

    CSS
    /* CSS layout */
    #masthead {
    }
    #top_nav {
    }
    #page_content {
    }
    #footer {
    }
    #container {
    width: 1100px;
    margin: 0 auto;
    }
    body{
    background-color:black;
    }

    /* Header section */

    header { width: 1100px;
    }

    #logo { float: left; }

    #menu { float: right;
    margin-top:10px
    }
    #menu ul { padding: 0; margin: 0; }
    #menu li {
    display: inline;
    padding: 20px;
    }
    #menu a {
    text-decoration: none;
    color: #559922;
    padding: 8px 8px 8px 8px;
    font-weight: 700;
    font-variant: normal;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size: medium;
    }
    #menu a:hover {
    color: #FFFFFF;
    }

    /* END Header section */
    p {
    color: #FFFFFF;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello gamevne,
    You haven't cleared your floats. Have a quick look at how to clear floats.

    Code:
    header {
        overflow: auto;
        width: 1100px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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