...

View Full Version : Div Floats



spadez
07-31-2007, 04:30 PM
Ive nearly made the header for my webpage but the trouble is they are sitting on the botttom of the div. To raise them up i tried top -3px which works but when i change the font size in the browser it screws up.

I think i need a float but ive tried several things and none of them change its positioning. Here is a link to the page:

http://www.hiven.net/server/motd3.php

The text boxes in the top header bar is what im after vertically centering.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hive MOTD</title>
<link href="./css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="shell">
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Server</a></li>
<li><a href="#">Apply</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
<div id="main">
<div id="side">
<div class="tborder">
<h1>Recruitment</h1>
<p>Our recruitment status<br />
is currently: <span class="open">Open</span></p>
</div>

<div class="tborder">
<h1>Server</h1>
<p><img src="http://www.hiven.net/server/hidef.jpg">100Tick<br />500Fps</p>

</div>

<div class="tborder">
<h1>Forum Topics</h1>
<ul>
<li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19397#post19397"><span>ban this man</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19396#post19396"><span>Requesting Accepta</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19395#post19395"><span>Fallen</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19394#post19394"><span>Hive Member Guidel</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19393#post19393"><span>Afroclown's applyi</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19390#post19390"><span>New Fork!!</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19389#post19389"><span>How to become PREM</span></a></li></ul>
</div>
</div>
<div id="content">
<p>
The Hive Empire proudly welcomes you to our new server, hosted graciously at www.hd-gaming.com! Please ensure you follow all of our rules to enjoy this community at it's greatest.<br />
For more details please visit our gaming site at www.hiven.net!<br />
<br /><br />
Do not hack<br />
Do not be rude<br />
Do not use offense language if asked<br />
Do not spray offensive sprays<br />
Behave and respect our admin<br />
www.hiven.net<br />
</p>

</div>
<div id="clear"></div>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";

/* Style Sheet */

body {
padding: 0;
margin: 15px 0 15px 0;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #1f1f1f;
color: #EDEDED;
}


#shell {
margin: 0 auto;
width: 100%;
background: #FFFF00;
}

#header {
width: 90%;
margin: 0 auto;
height: 20px;
background: #252525;
border: 1px solid #000000;
}

#main {
width: 90%;
margin: 0 auto;
padding-top: 5px;
border: 1px solid #000000;
border-top: 0;
background: #2D2D2D;
}

#side {
width: 150px;
padding-right: 5px;
float: right;
}

#content {
margin: 0 160px 5px 5px;
padding: 5px;
border: 1px solid #000000;
}

.tborder {
border: 1px solid #000000;
background: #1f1f1f;
margin-bottom: 10px;
padding-bottom: .4em;
}

.thead {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
}


#clear {
clear: both;
}

.tborder h1 {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
margin:0 0 5px 0px;
padding:0 3px;
border-top:1px solid #2d2d2d;
}
.tborder p {
margin:0;
padding:0 3px;
}
.open {
font-weight:bold;
color:#80ff80;
}

.tborder ul {
margin:0;
padding:0 3px 0 18px;
list-style-type: circle;
}

ul a {
color: #cc6;
}

#header ul li {
float: left;
margin: .5em;
padding: 0;
}

#header ul a {
line-height: 1em;
padding: .2em;
border: 1px solid #000;
float: left;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background-color: #444;
font-size: 1em;
font-weight:bold;
}

#header ul {
margin: 0;
padding: 0;
list-style-type: none;
}

ahallicks
07-31-2007, 05:22 PM
#header ul li {
float: left;
margin-top: 2px;
padding: 0;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum