Jump to content

Can someone help me with a HTML/CSS template


TeddyKiller

Recommended Posts

I'm wanting a template with 3 collums a total width of 1000px, left and right collum, should be 180px width. and the center collum the rest of it. with a left and right margin of 24px, backgrounds completely white.

 

Now here's where the problem may lay,between each collums, so left and right border should be a grey colour. Now the problem with that, i'm wanting the height not to be a fixed size. So the more information in it, the bigger it is. Although with a minimum height of 500px.

 

Whenever I try, it all goes wrong. So.. I'm just.. fed up. I need someone to quickly do it for me and I'll learn from it.

 

The desired header, is this.

<body><div id="top">
<div id="header">

<div id="extra"><span><a style="margin-bottom:8px;" href="#">My Account</a> | <a href="logout.php">Log Out</a></span></div>

<div id="navigator">
<ul id="topnav">
<li><a href="/">Home</a></li>
<li><a href="/main.php?sk=wall">Horble Wall</a></li>
</ul>
</div>

</div>
</div></body>

 

CSS is..

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    margin: 0;
    padding: 0;
    color: #000000;
    background:#E1E3DE;
    text-align: left;
}
#top {
    height:40px;
    background:#e11919;
}
#header {
    background:url(ima/hdrtit.jpg) no-repeat;
    width:1000px;
    height:40px;
    margin: 0 auto;
}
#header a, #header a visted, #header a active, #header a hover {
    color:#FFF;
    font-weight:normal;
    text-decoration:none;
}
#header {
    color:#FFF;
}
#navigator {
    width:450px;
    margin-left:260px;
    height:40px;
}
#extra {
    height: 38px;
    line-height: 38px;
    float:right;
    width:200px;
    text-align:right;
    margin-right:10px;
}
ul#topnav {
    border: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width:100%;
    height:38px;
    position: relative;
}
ul#topnav li {
    float: left;
    margin: 0 0.15em;
}
ul#topnav li a {
    height: 38px;
    line-height: 38px;
    margin-top:1px;
    float: left;
    width: 80px;
    display: block;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
#topnav li a:hover, #topnav li.active a, #topnv li a.selected {
    color:#e11919;
    background:#fff;
}

 

 

Sorry it's a bit messy, you can tidy it up if you want. I'm just wanting this sorted out asap.

 

Cheers!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.