View Single Post

casho · #1 (**permalink**) Feb 11th, 2008, 02:40

Hi, I'm trying to get some of my parts of my site to align properly and its just not happening. Link to website
It should look like this: Link to image

HTML

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <title>
        HL2D Home
    </title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>


<body>
<div id="container">

<div id="nav">
<div id="image">
    <a href="Home.html">
    <img border="0" src="Images/HL2DLogo.png" width="137" height="112" alt="Hl2DLogo" />
    </a>    
</div>

    <a class="navCon" title="Home">Home</a>    
    <a class="nav" href="about.html" title="About">About</a>
    <a class="nav" href="screenshots.html" title="Screenshots">Screenshots</a>
    <a class="nav" href="downloads.html" title="Downloads">Downloads</a>

<div id="content">

<div id="header">
<h1>Home</h1>
</div>
    
<div id="newsContainer">
    <div class="contentTop">
    <h2>News</h2>
    </div>
    
    <div class="contentMid">
    <p>
    <h4>10.8.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4>10.7.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4>10.6.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4>10.5.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    </div>
    
    <div class="contentBottom">
    </div>
    
</div>
    
<div class="screenshots">

<div class="contentTop">
<h2>Screenshots</h2>
</div>

<div class="contentMid">
<a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 1" />
    </a>
    
    <a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 2" />
    </a>    
    
    <a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 3" />
    </a>    
    
    <a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 4" />
    </a>
</div>

<div class="contentBottom">

</div>
</div>

<div class="about">
<h2>About</h2>
<p>Hl2D stands for Half Life 2D, HL2D is a recreaction of Half Life. It has a different story but some of the enemies are still the same. It's made with Construct

</div>

</div>
<div id="contentEnd">

</div>

<div id="footer">
Designed by Joe Blair
</div>
</div>

    

    

</body>

</html>

CSS

Code: Select all

body {
    background-color: #666666;
    font-family: Arial;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
}
p {
    font-size: 10;
}
h4 {
    padding: 0px;
    margin: 0px;
    text-align: left;
}


a.nav, a.nav:link, a.nav:visited  {
    display: block; 
    width: 98px; 
    height: 45px; 
    background: url(Images/NavTab.png); 
    border: 0px; 
    margin-top: 5px;
    margin-left: 24px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #999; 
    line-height: 70px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}

a.nav:hover  {
color: #FFA824; 
}

a.navCon, a.navCon:link, a.navCon:visited {
    display: block; 
    width: 122px; 
    height: 46px; 
    background: url(Images/NavTabOn.png); 
    border: 0px; 
    margin-top: 5px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #000; 
    line-height: 68px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}
#container {
width: 810px;
margin: auto;
}
#nav {
padding-left: 20;
float: left;
width: 122px;
}
#content {
padding-top: 0px;
margin-left: -18px;
background: url(Images/Layout/Middle.png) repeat-y right;
}
#header {
background: url(Images/Layout/Top.png) no-repeat;
width: 688px;
padding-left: 30px;
padding-top: 0px;
margin-left: 130px;
height: 20px;
}
#news {
width: 300px;
background: none;
padding-left: 30px;
padding-top: 30px;
margin-left: 130px;

}
#screenshots {
float: right;
width: 300px;
height: 400px;
}
#about {
position: top;
width: 300px;
float: right;
border: 1px;
}
#contentEnd {
height: 20px;
background: url(Images/Layout/Bottom.png) no-repeat right;
margin: 0px;
padding: 0px;

}
#footer {
font-size: 10px;
clear: both;
height: 30px;
}
#news h2 {
    margin: 0;
    padding: 0;
}

#news p {
    margin: 0;
    padding: 0;
}
.Hide {
display: none;
}
#image {
margin-left: -20px;
}
.contentTop {
margin-left: 150px;
width: 313px;
height: 20px;
padding: 0px;
margin: 0px;
background: url(Images/Layout/ContentTop.png);
}
.contentMid {
margin-left: 150px;
width: 313px;
margin: 0px;
padding: 0px;
background: url(Images/Layout/ContentMid.png) repeat-y;
}
.contentBottom {
margin-left: 150px;
width: 313px;
height: 20px;
background: url(Images/Layout/ContentBottom.png);
}