SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    float help needed with header

    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

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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...)?

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


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
  •