CSS / Web design help...

[Marcel]

Have a look at www.marcelbooth.co.uk

Now ignoring the colours, the fonts and the content (Hastily thrown up, literally ...lol )

Look at the menu system, or more specifically the 5 items.
I can't for the life of me figure out how to centre those 5 items.
I'm doing all this by CSS so I can offer visitors to the website complete style changes.

I'd like it so that if I edite menu.php and add, say, 1 more item to the end, the rest bunch up to the left a bit, and it's *all* automagically centred still.

Any ideas?

The three relevant file URLS are

http://www.marcelbooth.co.uk/css/dark.css
http://www.marcelbooth.co.uk/index.php
http://www.marcelbooth.co.uk/menu.php

Answers on a postcard to...

 

[Matt]

you need to be centering something in the CSS, like text-align: center;

 

[Forbiddenbiker]

Something like this I think; sorry it’s been quite a time and I can't remember specifically how to correct yours.

Try as matty suggests.

{
position: relative;
text-align: center;
}

Edit the '#menu' <div> within the css style sheet.



This link is very useful to get an idea of Div construction. Right click to see source code and the attached css style sheet.

This page uses a Header <div> to hold all the other divs inside it, within the centre of the browser.

Like this exhample.

#header {
position: relative;
text-align: center;
font-family: verdana, geneva, arial, sans-serif;
font-size: 42px;
font-weight: bold;
height: 40px
}

You should be able to add more items to the menu and it will stay centred...but only until you run out of space/width...obviously.
HTH

PS. congratulations on going compliant.

 

[Marcel]

Hehe It is a nice feeling when you get the 'Fully compliant!" message isn't it?
The last site I did is fully compliant and its quite a good feeling to know it is....

text-align: center;

I've already tried putting that in every single section, but to no avail.

I have a feeling that because the way I've done these dropdown menus in CSS...because it's a sort of 'hack' / workaround, then I'm not sure if it's going to be possible to centre them properly. Not without changing the method I used to get the dropdown menus.

 

[Forbiddenbiker]

Hmmm, I thought You might say that.

And yes it is a great feeling....oooh the power eh.

I've just downloaded all that I could Marcel...and...slipping an extra div into it works with the code that I have.

<div id="menu">
<div align="center">
<ul id="nav" class="style_ms10">
<li><a href="/index.php">Home</a></li>
<li><a>Menu 1</a>
<ul>
<li><a href="/index.php">Item 1</a></li>
</ul>
</li>
<li><a>Menu 2</a>
<ul>
<li><a href="/index.php">Item 1</a></li>
<li><a href="/index.php">Item 2</a></li>
<li><a href="/index.php">Item 3</a></li>
<li><a href="/index.php">Item 4</a></li>
<li><a href="/index.php">Item 5</a></li>
</ul>
</li>
<li><a href="/index.php">Item 2</a>
<li><a href="/index.php">Item 3</a></li>
</ul>
</div>
</div>

Try that. :shrug:

 

[Marcel]

Now I didn't think of that, I'll try putting in an extra div....back intwo shakes.

 

[Marcel]

Nope, didnt work (Tried it on a local version, I have PHP and Apache running on my PC so I can design things locally).

I'm also doing this by hand, which I'm quite proud of. Nothing but me and Textpad

 

[Forbiddenbiker]

Oh...

I'm thinking you must have something overriding this positioning...probably something to do with this bit, <div id="main" class="style1"> and I have no idea of what its referring too. :shrug: Have you got another style somewhere?


Notepad... exhausting stuff, been their, done that, never again.
But yes, I admire your perseverance sir, tis the only way to really understand what the code actually does to each item.

 

[Marcel]

style1 only defines font properties

I was under the impression it ADDS the styles properties to the other properties it inherits, (unless there are conflicts of course).

Anway, I have kinda sorted it. With a workaround.
As I know (because I've specified) that each menu item is 11em wide, I know that as I have 5 items, I can set the menu to be 55em wide. This is fine as it hides the left alignment.

www.marcelbooth.co.uk

I've copied the details over to a new css file (light.css) and changed the colours, so there's it working.

Many thanks for your help

 

[Matt]

my sites nearly compliant, couple of minor things, but it works in both FF and IE...amazing what you can do with google and a bit of thought...(and some scripts off the interwebnet)and matts help!

 

[markgray]

mine still shows the item 3 on the bottom row and everything justified left, i'm using IE6

 

[DJW]

Well it all sounds gobbly gook to me, but I'm looking forward to seeing your finished sites. Actaully I think all site staff should create their own site & then we vote on the winner

 

[Matt]

Well it all sounds gobbly gook to me, but I'm looking forward to seeing your finished sites. Actaully I think all site staff should create their own site & then we vote on the winner

hmm thats not fair, Bod found a really cool site for CSS, much better than the one i was using!

 

[Marcel]

hmm thats not fair, Bod found a really cool site for CSS, much better than the one i was using!

My google-wu is mighty, young padawan.

 

[Forbiddenbiker]

Have a look at www.marcelbooth.co.uk

Nice m8, I love the new colours too.

Possible tip: I seem to remember it was always a good idea to avoid 'padding’. Especially top and bottom padding...because one or two of the browsers display this slightly differently, on some occasions...??

You've got padding in your 'contents' div...I'd possibly remove that number and try another method to position the contents of that div where you want it.

...I think that would be a good idea anyway. :shrug:

 

[Forbiddenbiker]

Ah, another thing, as Mark says your menu slips down one line in IE6 and shows list3 on the second line.

I think this is because your using 'em' as your sizing measure, I'd suggest you change everything to PX as this cannot be misinterpreted from browser to browser.

possibly. :shrug:

I did say it was a long time ago didn't I.