Jump to content

Recommended Posts

Hi.

 

I'm trying to make a horizontal navigation bar on my site. I want it to be centered on the page and all the buttons to be next to each other.

 

So here's my CSS:

 

.home {
display: block;
width: 86px;
height: 34px;
background: url('/img/nav/home.gif') bottom;
}

.home:hover {
background: url('/img/nav/home-lit.gif') bottom;
text-align: right;
}

 

I have a total of 5 of these that I want lined up next to each other horizontally and centered. My HTML is this:

 

<body>
<div class="main">
  <div class="navigation">
   <center>
    <a class="home" href="/index.php"></a>
    <a class="database" href="/database.php"></a>
    <a class="rankings" href="/rankings.php"></a>
    <a class="contact" href="/contact.php"></a>
    <a class="submit" href="/submit.php"></a>
   </center>
  </div>
</div>
</body>

 

For some reason the images are vertically stacked and to the left. Any remedy to this?

Well there a few thing wrong with the logic of your code and also something are just wrong.

first don't use <center> it's not cross browser proof, INstead to center something you can wrap it in a container, a div fir instance and use

margin:0 auto;

 

second, you are using classes for each link, while i am pretty sure you they only exist ones.. so an ID would be a better choice. but than again. why assign id's if you can target the inner elements of div with class navigation by just using

div.navigation a{
  some property here;
}

 

Also a horizontal menu can be made much cleaner by using an unordered list displayed inline. tutorial can be found here.

and if you want to stick to images have a look here instead of an unordered list have a look here. the same logic/technique can be used.

Hope this helps.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.