CSS Forum

**boxiom** · 10-19-2009, 03:12 PM

i cant seem to make my list go to the EXACT top of the forum, and EXACT left. Notice how the navbar is just sitting there

CSS for the list:

Code:

ul#navigation {
    margin-left: 0;
    left: 0px;
    top: 0px;
    padding-left: 0;
    list-style-type: none;
    background: #d7d7d7;
    float: left;
    width: 100%
}
ul#navigation li {
    display: inline
}
ul#navigation a {
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #333;
    background: #d7d7d7;
    border-right: 1px solid #630;
}

HTML for the list:

Code:

<ul id="navigation">
<li><a href="google.com">Home</a></li>
<li><a href="google.com">About</a></li>
<li><a href="boobs.com">Contact</a></li>
<li><a href="nips.com">Forum</a></li>
</ul>

**chrishirst** · 10-19-2009, 03:17 PM

Set the body margins to 0 and the ul top margin to 0

**boxiom** · 10-19-2009, 03:33 PM

did that, it moved all the way to the left, but not the top:

Code:

body {
    background-color: #121212;
    text-align: center;
margin: 0 0 0 0;
}


#p {
    font-size:9px;
    font-style:normal;
    color: white;
    padding-left:10px;
    
}

#container {
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background-color:#d7d7d7;
    border-style: solid;
    border-width: 7px;
    border-color: #FFF;
    padding-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    text-indent: 5px;
}
#container h1 {
    font-size: 36px;
}


ul#navigation {
    margin: 0 0 0 0;
    left: 0px;
    top: 0px;
    padding-left: 0;
    list-style-type: none;
    background: #d7d7d7;
    float: left;
    width: 100%
}
ul#navigation li {
    display: inline
}
ul#navigation a {
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #333;
    background: #d7d7d7;
    border-right: 1px solid #630;
}

**chrishirst** · 10-19-2009, 03:38 PM

so do we get to the HTML as well? 'cos the CSS is useless without it.

**boxiom** · 10-19-2009, 03:39 PM

html

Code:

</style></head>

<body>

<ul id="navigation">
<li><a href="google.com">Home</a></li>
<li><a href="google.com">About</a></li>
<li><a href="boobs.com">Contact</a></li>
<li><a href="nips.com">Forum</a></li>
</ul>

  
<p><img src="images/index_02.gif" width="471" height="89" align="middle" />
</p>
<p><img src="images/index_06.gif" width="967" height="26" /></p>


    <div id="container">
      <h1>Tech4talk</h1>
      <p><img src="file:///C|/Documents and Settings/Chris/Desktop/luongonetsite/tech4talk.jpg" width="500" height="200" align="center" /></p>
      <p>Tech4talk is a relatively new website our the Luongonetwork. The first active website, it is a forum for the teach savvy and the tech needy. Find tutorials and get help from other forum members to solve problems and learn more. Building computers, Modding your current, Configuring Windows, Installing Linux, Photoshop Graphic Design help, Web Design, Coding, CSS, HTML, Cameras, Flatscreens, Video Games, and much more! Sign up today! http://www.tech4talk.com</p>
    </div>
    
        
</body>
</html>

**LadynRed** · 10-19-2009, 04:30 PM

You also need to zero out the padding on <body> at the same time you zero out the margins.

If you're going to stick the image inside of <p></p>, then you also must zero out margins and padding on the <p>, at least for the header section.

**boxiom** · 10-19-2009, 04:34 PM

Got it! thanks!