Navigation bar won't centralise.

[MissileMoose]

Hi Guys,

I'm having an issue with the main CSS navigation bar on my website, I can't centralise it for the life of me. I've sat around trying different methods for over 2 hours. As I said it's all CSS, screen-shot below.



It's probably something tiny, here's the suspect code (Bit messy I know):

HTML
CSS

Help is appreciated, tearing my hear out over this.

 

[MDrX]

I'd move the width from #navigationMenu ul li a to the <li>. Your <a> tag is a block so it'll take 100% width of the container.

Set the <li> width to 16.666% (100/6)

Unless you are set on having the 100px width and would like a bit of red either side?

 

[gord]

You've got over specified mark up there. I don't see much need for either of the divs, utilise the UL element as your navigation block. Then I would think about using position relative and margin: 0 auto on that element to centrally align it. If it isn't fixed width then you'll have to use another method.

 

[MissileMoose]

You've got over specified mark up there. I don't see much need for either of the divs, utilise the UL element as your navigation block. Then I would think about using position relative and margin: 0 auto on that element to centrally align it. If it isn't fixed width then you'll have to use another method.

Hi, thanks for the reply guys.

@gord, would it be possible for you to explain a little more? I'm fairly new to web design (2 years working with DreamWeaver) so need quite a bit of guidance. I also just ran into a new problem, see the attached.



Thank you very much.

 

[gord]

Do you have any web space where you are testing this? Can I take a look at it there? Or get the full HTML for the page and CSS?

I've made a few assumptions in my previous post and don't want to lead you down the wrong road.

Edit: I've just realised, you are using design view in DW to test the visual appearance. This isn't a good idea. Best practice is to test on proper browsers. So when developing sites I usually use FF to test, but have Chrome and IE open and refresh across all of them at certain points.

 

[MissileMoose]

Do you have any web space where you are testing this? Can I take a look at it there? Or get the full HTML for the page and CSS?

I've made a few assumptions in my previous post and don't want to lead you down the wrong road.

Edit: I've just realised, you are using design view in DW to test the visual appearance. This isn't a good idea. Best practice is to test on proper browsers. So when developing sites I usually use FF to test, but have Chrome and IE open and refresh across all of them at certain points.

I'll set it up real quick so you can view it. I use design view but have my primary and secondary browsers set to FF and GC.

Do you have Skype?

Edit: Added you.

 

[MissileMoose]

Do you have any web space where you are testing this? Can I take a look at it there? Or get the full HTML for the page and CSS?

I've made a few assumptions in my previous post and don't want to lead you down the wrong road.

Edit: I've just realised, you are using design view in DW to test the visual appearance. This isn't a good idea. Best practice is to test on proper browsers. So when developing sites I usually use FF to test, but have Chrome and IE open and refresh across all of them at certain points.

Hi again Gord,

I'm not sure if you use Skype or Messenger but I added you anyway. I'd really appreciate it if you could help me out with the problems. Let me know if you can and I'll send you the URL for testing. Thanks!

---------- Edit ---------

I found a solution. I took out all of the margins and used proper positioning like I should have. It looks like this.

<div id="navDiv">

<div id="memberNav"> </div> <!-- Drop down menu to the right -->

<div id="mainNav"> </div> <!-- Main nav to the left -->

</div> <!-- End navDiv -->

Once I got the "NavDiv" in the right place, I adjusted the width to give a 20px margin between the menus and floated the "memberNav" to the right. Time to do the login box the same way.

 

[gord]

I use messenger mainly. Good job on working it through yourself though.

 

[MissileMoose]

I use messenger mainly. Good job on working it through yourself though.

Thanks, I've been touching up the CSS and HTML for the header area. Today I'll be moving on to the sidebar after fixing the login field text size (changes from browser to browser).

I've also been using CSS3 to add curved edges, box shadows and background gradients. Check my progress out here.

PS. Added you on Messenger.

Thanks.

-----Edit-----

Forgot to add, I've mainly been testing with FireFox 7/8.0beta and Google Chrome. If I remember correctly, Opera doesn't have support for the background gradients and box shadows.