SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header all the way across

    I'm using the 3 col layout from Paul OB, but I would like for the header to stretch all the way across the top of the page and still have the centred, 3 column layout. Link
    I've tried setting width to 100% but it still remains the same.

    css:
    Code:
    * {margin:0;padding:0}
    h1,h2,h3,h4,p {margin-bottom:1em}
    ul{margin-left:16px}
    
    /* mac hide \*/
    html,body{height:100%;}
    /* end hide*/
    body { 
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size : 10px;
    	color:#000;
    	text-align:center;
    }
    ul#top,
    #base {
    color: #2f4f4f; 
    list-style:none;
    margin:0;
    padding:0;
    }
    #base{clear:both;}
    #top li{border-bottom: 1px solid #bbb;}
    #top li,
    #base li {
    float:left;
    border-right: 1px solid #bbb;
    width:95px;
    padding:2px
    }
    .last {border-right:none!important}
    ul#li2 {
      float:left;
      list-style:none;
      border-right: 1px solid #bbb;
      width:95px;
    }
    ul a{
    position:relative;
    text-decoration:none;
    }
    ul#rightnav {
      list-style:none;
      margin: 0;
      padding: 0;
      background-color: #e1e1d6;
    }
    ul#rightnav li a:link, ul#rightnav li a:visited {
      text-decoration:none;
      display: block;
      width: 93%;
      padding: 3px 3%;
      background-color: #dsd9df;
      font: 7pt/1.5 verdana, sans-serif;
      color: #000;
    }
    ul#rightnav li {
      border-top: 1px solid #004489;
    }
    ul#rightnav li a:hover {
      background-color: #dbdcde;
      color: #000;
    }
    #rightnavhead {
      background: url(images/topnav.gif);
      color: #fff;
      padding: 5px 4%;
      font: strong 7pt/1.pt verdana, sans-serif;
    }
    #rightnavfoot {
      background: url(images/footnav.gif);
      padding:5px 4%;
    }
    #outer{
    	min-height:100%;
    	width:765px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:left;
    	border-left:3px solid #fff;
    	border-right:3px solid #fff;
    	position:relative;
    }
    * html #outer {
    	width:771px;
    	w\idth:100%;
    	height:100%;
    }
    #footer{
    	background:#d3d9df;
    	border-top:5px solid #fff;
    	border-bottom:5px solid #fff;
    	text-align:center;
    }
    #header {
      position: relative;
      height: 55px;
      background: #d3d9df;
      text-align: left;  
    }
    #footer{
    	position:absolute;
    	bottom:0;
    	left:0;	
    	width:765px;
    	height:40px;
    	color: #565656; 
    }
    * html #footer {
    	height:50px;
    	he\ight:40px;
    	bottom:-1px;
    }
    #clearfooter {
    	clear:both;
    	height:50px;
    }
    #right, #left, #content {
    	float:left;
    	width:150px;
    }
    #content{width:465px;}
    .clearer{
    	height:1px;
    	overflow:hidden;
    	clear:both;
    	margin-top:-1px;
    }

  2. #2
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="3col.css" rel="stylesheet" type="text/css" media="all" />
    
    </style>
    </head>
    <body>
    <div id="header"><h1>Header</h1></div>
    <div id="outer">
      <div id="left"> 
        <p>Sign In | Register </p>
    
        <script type="text/javascript"><!--
    google_ad_client = "pub-8548364085444591";
    google_ad_width = 120;
    google_ad_height = 600;
    google_ad_format = "120x600_as";
    google_ad_type = "image";
    google_ad_channel ="";
    google_color_border = "E1E1D6";
    google_color_bg = "D3D9DF";
    google_color_link = "004489";
    google_color_text = "000000";
    google_color_url = "000066";
    //--></script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
      </div>
      <div id="content"> 
        <p><ul id="top">
     <li><a href="#">WSM</a></li>
     <li><a href="#">NHL:EHM</a></li>
     <li><a href="#">OOTP 2006</a></li>
    
     <li class="last"><a href="#">RF Clan</a></li>
    </ul>
    <ul id="base">
     <li><a href="http://www.americansportsgamer.com/forums">Forums</a></li>
     <li><a href="#">Topic 6</a></li>
     <li><a href="#">Topic 7</a></li>
     <li class="last"><a href="#">Topic 8</a></li>
    
    </ul></p>
      </div>
      <div id="right"> 
    	<div id="rightnavhead">Features</div>
    	<ul id="rightnav">
    	   <li><a href="categories.htm">Podcasts</a></li>
    	   <li><a href="categories.htm">Reviews</a></li>
    	   <li><a href="categories.htm">Category Three</a></li>
    
    	   <li><a href="categories.htm">Category Four</a></li>
    	   <li><a href="categories.htm">Category Five</a></li></ul>
    	   <div id="rightnavfoot"></div></div>
      <div id="clearfooter"></div>
      <div id="footer"> 
        <p> valid xhtml 1.0 transitional | valid css
    americansportsgamer.com  2006 | webmaster@americansportsgamer.com</p>
    	<p>Logo designed by </p>
    
      </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    That was so simple I didn't even spot it. Thanks for the extra pair of eyes.

  4. #4
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.


Bookmarks

Posting Permissions

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