float help needed with header

**fredda** · Jul 21, 2006 06:31

Hey

I made a quick little illustration in Fireworks to help illustrate my problem.
[img=http://img129.imageshack.us/img129/5911/headeris0.th.png]
My main problem is to get everything in place and get the horizontal bar at the bottom. Any help would be greatly appreciated. Please feel free to ask any questions

Kind regards
Frederik

**Egor** · Jul 21, 2006 07:36

Please feel free to ask any questions

I'm not entirely sure what it is you need help with. Are you looking for someone to do all the work for you, or do you have a problem with your code (you haven't provided any, so...)?

**fredda** · Jul 21, 2006 07:44

Hey Egor

I dont have any code to show atm, I only know that I could use floats for this, but not sure how to startout. Tried playing a little with different classes and floats but it all came down to a mess

. Some tips, tutorials etc would be great to get me started, not even sure that I'm doing the right thing with using floats for this

Frederik

**fredda** · Jul 21, 2006 08:45

This is my code so far:

Code:

/* CSS Document */
body {
text-align:center; /*center hack*/
}
#wrap {
width:80%; /*center hack*/
margin:0 auto; /*center hack*/
text-align:left;
}


#header{
border: 1px solid #999;
padding:10px;
background:#fff;
height: 180px;
margin: 0;
padding: 0;
}

#topright {
margin-top: 4.7em;
margin-left: 3em;
} 


#leftright {
margin-bottom: 0.5em;
position: absolute;
margin-top: 6em;
}

#topmenu {
float: right;
}
#topmenu ul {
margin: 0;
padding: 0;
}
#topmenu li {
display: inline;
}
#topmenu a:link, #topmenu a:visited {
padding-left: 10px;
}

#logo {
float: left;
}

And

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>header</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
  <div id="logo">
    <h1>Logo</h1>
    <div id="leftright"><span class="pathway"><a href="#" class="pathway">Home</a> > <a href="#" class="pathway">News</a></span></div>
  </div>
  <div id="topmenu">
    <ul id="mainlevel-nav">
      <li><a href="#" >Home</a></li>
      <li><a href="http://localhost/#" class="mainlevel-nav" >FAQ</a></li>
      <li><a href="http://localhost/#" class="mainlevel-nav" >Search</a></li>
      <li><a href="http://localhost/#" class="mainlevel-nav" >Sitemap</a></li>
    </ul>
    <div id="topright">
      <div class="moduletable">
        <p>Contact information <br />
          goes here </p>
      </div>
      <div class="moduletable">
        <form action="#" method="get">
          <div class="search">
            <input name="#" id="#" maxlength="20" alt="search" class="inputbox" type="text" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />
          </div>
          <input type="hidden" name="Itemid" value="" />
        </form>
      </div>
    </div>
  </div>
</div>

</body>
</html>

User Tag List

Thread: float help needed with header

Thread Tools

Display

float help needed with header

Bookmarks

Bookmarks

Posting Permissions