Member Avatar for UltimateJacob

So, I was making a personal website (at Jacob's Site 1), but i tried to center the navbar, which was created using an image and some CSS, and everything worked fine except the submenu (which is horizontal).

Here's the code for HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <title>Jacob&apos;s Site 1</title>

    <link type="text/css" href="styles/styles.css" rel="stylesheet" />

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header id="logo">
      <h1>Jacob&apos;s Site 1</h1>
    </header>
    <nav id="navbar">
      <ul id="nav">
        <li id="home"><a href="http://jacobssite1.bugs3.com/">Home</a></li>
        <li id="programming"><a href="#">Programming</a>
          <ul>
            <li id="ll"><a href="#">Low-Level</a></li>
            <li id="hl"><a href="#">High-Level</a></li>
            <li id="scp"><a href="#">Scripting</a></li>
            <li id="wnm"><a href="#">Web&frasl;Markup</a></li>
          </ul>
        </li>
        <li id="aboutMe"><a href="#">About Me</a></li>
        <li id="contactMe"><a href="#">Contact Me</a></li>
      </ul>
    </nav>
    <div>
    </div>
    <footer id="legal">
      <br />
      <p>Copyright 2012 Jacob Prud'homme&copy;</p>
      <p>All rights reserved</p>
    </footer>
  </body>
</html>

And for CSS:

body
{
  background-color: #566171;
}

header#logo
{
  text-align: center;
}

ul#nav
{
  list-style-type: none;
  padding        : 0;
  margin         : 0 auto;
  border         : 0;
  top            : 0px;
  left           : 0px;
  width          : 290px;
  height         : 25px;
  background     : #566171 url('../images/nav_over.gif') no-repeat;
}

a, a:link, a:visited
{
  text-decoration: none;
}

p, p a
{
  color: #9dbdce;
  font : 12px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
}

/*<group=level 1>*/

ul#nav li
{
  padding    : 0;
  margin     : 0;
  display    : block;
  float      : left;
  text-indent: -9999px;
}

ul#nav li a
{
  border    : 0;
  display   : block;
  height    : 25px;
  background: url('../images/nav.gif') no-repeat;
}

ul#nav li a:hover
{
  border          : 0;
  display         : block;
  background-image: url('../images/nav_over.gif');
}   

/*</group>*/

/*<group=level 1 ids>*/

li#home a
{
  width: 52px;
}

li#programming a
{
  width: 85px;
}

li#programming a:link,
li#programming a:visited,
li#programming a:hover
{
  background-position: -52px 0px;
}

li#aboutMe a
{
  width: 69px;
}

li#aboutMe a:link,
li#aboutMe a:visited,
li#aboutMe a:hover
{   
  background-position: -137px 0px;
}

li#contactMe a
{
  width: 78px;
}

li#contactMe a:link, 
li#contactMe a:visited, 
li#contactMe a:hover
{   
  background-position: -206px 0px;
}

/*</group>*/

/*<group=level 2>*/

#nav li ul
{   
  display   : block;
  visibility: hidden;
  position  : absolute;
  left      : 0px;
  width     : 244px;
  margin    : 0;
}

#nav li:hover ul
{
  visibility: visible;
  z-index   : 100;
}

#nav li#programming ul
{
  background : none;
  height     : 21px;
  margin-left: 37px;
}

ul#nav li#programming ul li#ll a:link, 
ul#nav li#programming ul li#ll a:visited
{
  width     : 59px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat 0px 0px;
}

ul#nav li#programming ul li#ll a:hover
{
  width     : 59px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat 0px -21px;
}

ul#nav li#programming ul li#hl a:link, 
ul#nav li#programming ul li#hl a:visited
{
  width     : 61px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat -59px 0px;
}

ul#nav li#programming ul li#hl a:hover
{
  width     : 61px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat -59px -21px;
}

ul#nav li#programming ul li#scp a:link,
ul#nav li#programming ul li#scp a:visited
{
  width     : 54px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat -120px 0px;
}

ul#nav li#programming ul li#scp a:hover
{
  width     : 54px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat -120px -21px;
}

ul#nav li#programming ul li#wnm a:link,
ul#nav li#programming ul li#wnm a:visited
{
  width     : 70px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat -174px 0px;
}

ul#nav li#programming ul li#wnm a:hover
{
  width     : 70px;
  height    : 21px;
  background: url('../images/subnav_programming.gif') no-repeat -174px -21px;
}

/*</group>*/

footer#legal
{
  text-align: center;
}

I've tried almost everything, but nothing seems to work. And, as some little warnings:

  • Switching the submenu's position to anything other than absolute makes the whole thing messed up,

  • I have the submenu's margin set to 37px because when the navbar was to the left, it aligned perfectly under the option that was supposed to be hovered over

  • And, i don't want it to be centered using an exact amout of pixels, because when you resize the page in a browser like Opera, everything goes wrong.

Thanks.

Edited by UltimateJacob because: Little aesthetic error
  • 3 Contributors
  • 6 Replies
  • 205 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for EvolutionFallen

Link didn't work. I'm on my phone now, if I get a chance tomorrow and no one beats me to it I'll take a swing at it. Just as a note, I think if you absolutely position something, you won't be able to horizontally center it without specifying exact pixels

Member Avatar for UltimateJacob

Sorry about that, the link's back up. And I was thinking the same thing, but I didn't want to have to resort to that yet because that would envolve doing a lot of extra work. I'm quite minimalistic :)

Member Avatar for EvolutionFallen

No problem. I'm actually shorter on time than I expected to be today, but here's a quick hint that should get you headed in the right direction. When you set an element X's position to absolute (or any other position, for that matter), if you then set one or more of its ancestors' positions, X's positioning offsets will be relative to its closest ancestor whose position is set. So in your code you gave ul#nav li ul { position: absolute; }. Now you have two options. You can set either ul#nav { position: relative; } (point A below), or ul#nav li { position: relative; } (point B below). This will set ul#nav li ul's absolute positioning to be relative to the top-left corner of whichever you choose to set a position for, ul#nav or ul#nav li. Since you're just setting the position to relative, you won't be changing where the parent elements are situated.

 <!DOCTYPE html>
    <ul id="nav"> <!-- A: set this to position: relative -->
        <li id="home"><a href="http://jacobssite1.bugs3.com/">Home</a></li>
        <li id="programming"><a href="#">Programming</a> <!-- B: set this to position: relative -->
            <ul> <!-- you gave this position: absolute -->
                <li id="ll"><a href="#">Low-Level</a></li>
            </ul>
        </li>
    </ul>

I think point A is more along what you're aiming for, you can tweak margins, padding, etc. after. Hope that helps!
- EF

Edited by EvolutionFallen because: Edited for HTML syntax highlighting and clarification.
Member Avatar for UltimateJacob

YES IT WORKED!!! Thank you so much! Although I could have sworn I had already used that technique in my aimless scramble for a working navbar...

Member Avatar for EvolutionFallen

No problem :) If there are no more questions, please mark the thread as solved.

Member Avatar for JorgeM

Nice sidebar clock on your site!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.