Javascript / CSS help

  maanse 21:15 10 Mar 08
Locked

Im trying to create a menu for my website using example 3 on this website....

click here

Any ideas how to centralise the buttons on the black bar?

i.e.

___________button1_button2_button3_____________

  Kemistri 23:16 10 Mar 08

More than one way to skin a cat, as the saying goes. Here's one: Place the buttons within a div with a parent div for the entire navigation bar. Give the button div relative positioning with no coordinates and apply auto left and right margins. Watch your positioning and sizing for the nav bar.

  maanse 17:46 11 Mar 08

ahh i see. didnt realise it would be that easy, just starting out at this whole web design thing.

Thanks for the reply.

  maanse 22:54 13 Mar 08

well this is how ive centered it putting the buttons in there own div,

"<div style="height: 34px; width: 650px; margin:0 auto; left: 0 auto; right: 0 auto;">"

only problem is it isnt quite centered in IE7 although its spot on in firefox 3.

any ideas how to make it spot on across the board??

  maanse 22:59 13 Mar 08

actually ive just noticed that if i set the width to 580px it sits centered on both browsers but the problem is the nav bar is wider (scroll bar at bottom of screen) than the screen in firefox, where as in IE its the width of the screen and no more.

  Kemistri 23:26 13 Mar 08

How come you're using inline CSS? That's messy and inflexible.

You have no padding declaration, which leaves browsers to make their own minds up, so that's a bad start. If you're trying to get the navbar to fill the viewport, you need a % value, but then you can't centre the links in this way. But I cannot help you much if I cannot see the markup and the CSS. I don't even know what position values you are using. Please post a link.

You might want to consider using a conditional stylesheet if you need make a lot of fixes for IE that cannot be accommodated by compliant browsers.

  maanse 19:32 14 Mar 08

im still new to all this web design lark, its my first ever website so i dont really know what im doin.

as for the inline css im using it because its the only way (that i know so far) that will do it any pointers (and examples) will be greatly appreciated. I know im probably doin things the compliacted way but thats all ive figured out so far.

i cant post a link as the site isnt online yet, im running it locally to view.

thanks again for the help tho :)

  Kemistri 21:35 14 Mar 08

If you want to call an external style sheet, you do it with a link tag in the head section of the HTML.

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

Like that. You can use more than one style sheet, or load a specific style sheet for certain browsers, but I won't go into that here. Your external style sheet contains declarations that are formed something like this, for example:

#navigation { position:relative; padding-left:10px; background-color:#142D24; }

Spaces and line breaks can be arranged for your own convenience, rather than any specific requirements.

If you want to learn how to use CSS, you should really invest in a few good books, such as:
click here
click here
click here
click here
click here
Start with the third of those in particular.

  maanse 17:55 15 Mar 08

ahh brilliant, didnt realise i could create my own external CSS.
I have invested in a book, just waiting for delivery.

Again thanks for the help.

  Kemistri 18:50 15 Mar 08

No problem. Which book did you go for?

  maanse 12:11 16 Mar 08

well i had already ordered it before posting on this forum, so you will probably say its rubbish but i got the ...for dummies book.

Start at the begining i thought.

although i dont doubt that i have probably learned more in the last week than the book will teach.

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

Prehistoric Britain is laid out in these Royal Mail stamp illustrations

Best running headphones | Best sport & fitness headphones: 4 brilliant pairs of wireless…