Home/ Questions/Q 3663784
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:34:12+00:00

I am trying to create a navigation menu similar to that of Stack Overflow

  • 0

I am trying to create a navigation menu similar to that of Stack Overflow (Questions, Tags, Users, Badges, Unanswered, Ask Question).

I tried doing it by having a logo, 5 menu options. These were being placed on top of the container. I can’t align them.

How can I create it so that they are aligned?

HTML:

  <body>
  <div id="logoimg">
   <a href="http://www.domain.com">
   <img src="http://www.domain.com/domain.png" border="0"></img>
   </a>
  </div>
  <div id="navi">
 <a href="http://www.domain.com/home.php">Home</a>
 <a href="http://www.domain.com/profile.php">Profile</a>
 <a href="http://www.domain.com/settings.php">Settings</a>
 <a href="http://www.domain.com/logout.php">Logout</a>
 </div>
  <div id="my">
  <div id="box">
 <div id="pic">
 <div id="myname">
  <?php echo "$angelinajolie";?>
  </div>
  </div>
   </div>

</body>

CSS: 

  div#logimg {
  margin-left: 213px;
  }

  #box {
 background-color: #FFFFFF;
 margin:0 auto; 
 height: 300px;
 width:830px;
 border:1px solid #E2E2E2;
  }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give this a shot:

    HTML:

    <div id="header">
    <h1><a href="http://www.domain.com">Name of Site</a></h1>
    <ul class="nav">
        <li><a href="http://www.domain.com/home.php">Home</a></li>
        <li><a href="http://www.domain.com/profile.php">Profile</a></li>
        <li><a href="http://www.domain.com/settings.php">Settings</a></li>
        <li><a href="http://www.domain.com/logout.php">Logout</a></li>
    </ul>
    <ul class="nav extra">
        <li><a href="http://www.domain.com/logout.php">Ask a Question</a></li>
    </ul>
</div>

    Wrap the whole thing in a container div. The logo of the site should probably be an h1 with the title of the site in text (to be friendly to screen readers and the like). The list of links should be unordered lists. That structure will keep things nicely contained and CSS can do the rest.

    CSS:

    #header h1{
    float: left;
    width: 100px;
    height: 50px;
}

    Float the site title/logo and give it a width and height.

    #header h1 a{
    background-image: url(http://www.domain.com/domain.png);
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    width: 100px;
    height: 50px;
}

    Place your logo as a background image on the anchor tag, make the anchor tag a block-level element, hide the text with a text-indent property combined with an overflow of hidden (this shoves the text way to the left).

    #header a{ text-decoration: none; }

#header .nav li{
    background: #eee;
    border:1px solid #E2E2E2;
    float:left;
    margin-right: 0.5em;
    padding: 0.2em 0.5em;
}

    Float the list elements in the ul tags and give them some styling.

    #header .extra{
    float: right;
    margin-right: 0;
    top: 0;
    right: 0;
}

    Float the ‘extra’ nav over to the right rather than the left.

    See it in action here: http://jsfiddle.net/6F5ky/

    • 0