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

Code:

<!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

Code:

@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

Code:

#header ul li {
	float: left;
margin-top: 2px;
	padding: 0;
}