Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Div Floats

  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Unhappy Div Floats

    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;
    }

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Code:
    #header ul li {
    	float: left;
    margin-top: 2px;
    	padding: 0;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •