Jump to content

Can someone help me with a HTML/CSS template

TeddyKiller

By TeddyKiller
in CSS Help

 Share

Recommended Posts

TeddyKiller Advanced Member

TeddyKiller

Posted
Posted

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!

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.