The recent tutorial I did on Codecademy explains how to create individual buttons. On my first website design however, i'm wanting to put a bar across the top of the page (or possibly below the site logo), containing several buttons linking to each page of the site.

 

Can anyone tell me the most efficient way to do this? I'm thinking of trying to use a single <div> tag in the html and using CSS for the styling.

 

I just want to avoid cunfusing matters, with it being the same on each page.

 

Any help appreciated.

use an unsorted list.

<ul>
   <li>button </li>
</ul>

every button a seperate li

Something like http://jsfiddle.net/HDeSM/?

Thanks very much guys.

 

Just need to figure out how to position them inside a bar across the top.

 

The frustration has already begun haha, it something that takes literally seconds in a design software.

Feel free to post the code you have (ideally in something like JSfiddle) or the design you're trying to achieve if you get stuck.

Thanks a lot J.P will keep that in mind.

some css you might need:

list-style:none;

this will remove those *ahum* lovely dots

 

if you want them horizontal, you could go about it in a few ways.

 

display:inline;

 

or sometimes you dont want to make them inline elements. then you could consider to just float them. you might have to reverse the order of the list items in tour html.

 

float:left;

 

or right.

if you run into any dificulties feel free to ask

Hi guys,

 

Just an update, i've now got the buttons layed out inside a bar across the page, using JPs method (thanks again).

 

I was just going to post the coding link up using the link that JP suggested, but I need to write three more posts first (hence this one).

 

The problem I currently have is I can not vertically centralise the buttons. I've tried margin-top, margin-bottom, padding-top, padding-bottom, some of which allow me some control, but there is always a larger gap above the text than below.

 

I'll post up the coding when I can.

 

Cheers.

I'm also having difficulty sizing the Nav bar across the entire page. There is a slight gap to the left of it. The CSS I have is "width: 100%;"

This is my 25th post... hopefully I can post links now, haha.

ok, here goes

 

http://jsfiddle.net/Nmqf5/

I'm also having difficulty sizing the Nav bar across the entire page. There is a slight gap to the left of it. The CSS I have is "width: 100%;"

 

adding a reset css file next to your normal stylesheet could help. you can find one here: http://meyerweb.com/eric/tools/css/reset/

 

Also, a width of 100% makes an element 100% width of it's parent div, which need to have a width itself. because 100% of 0 is well.. 0.

So you might need to give your body element a width of 100% sometimes even your html element.

so:

 

 

html {
  width:100%;
}
 
body {
width:100%;
}

Edited April 5, 201313 yr by Tieskevo

Here you go Greg, tweaked it a little: http://jsfiddle.net/LyndseyB/Nmqf5/3/

 

• To remove the white space before the navigation, do what ties says above and use a CSS reset (he provided a link). This sets all margins and paddings to 0 so that all browsers are consistent and apply the same rules. For the example I've given you, I've simply set both padding and margin to 0 in the body CSS selector.
• To vertically align the navigation links to the center, I took off the height attribute of the navigation and applied a padding to the list items (10px) which applies 10px to both the top and bottom of the navigation block, positioning the elements to the center.

Just editing to add: I removed the padding-right:100px from your CSS as that was causing some of the links to be pushed off the page and not displayed in your navigation.

 

Let me know if you need any more help

Lyndsey.

Lyndsey thats great, thanks very much. Its amazing what a few pixels of a web page can make to the overall look.