468,134 Members | 1,399 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,134 developers. It's quick & easy.

<li>'s in navbar

On this page http://www.xs4all.nl/~hogen/MvK_nieuw/
I have a horizontal menu made up of an ul (bit scary, this, feel much more
comfortable with a table there, but I keep reading I should use css instead
;-))

Two questions:
the containing navbar div has a width of 760px.
There are 6 buttons of 116 wide plus a 1px border makes: 6 x 118px = 708px.
The buttons also have a 4px padding on the right, so I come to a total of
708px + 24px = 732 px. So where are my other 28px gone?

Do tell me I cannot add up!

I couldn't care less, really, my buttons not adding up, but I also want to
solve the problem of the most right hand button not being aligned properly.
I have tried to give that <li> it's own ID with it's own style, but
obviously not in the right way, for it had no effect what so ever.

If some one could help me, I would be very grateful.
--
Groet,
Adriana
[throw rubbish out if you want to reach me by e-mail]
Jul 21 '05 #1
11 1832
"A.Translator" <tr*************@yaBISHhoo.com> wrote:
On this page http://www.xs4all.nl/~hogen/MvK_nieuw/
I have a horizontal menu made up of an ul (bit scary, this, feel much more
comfortable with a table there, but I keep reading I should use css instead
;-))

Two questions:
the containing navbar div has a width of 760px.
Oh dear. What if my browser window isn't 760px wide?
There are 6 buttons of 116 wide
Have you looked to see what happens when the user increases the font
size? (You'll need to use a proper browser as Win IE won't resize your
pixel sized text - so the user who needs larger text can't read you
nav and will just leave your site.)
plus a 1px border makes: 6 x 118px = 708px.
The buttons also have a 4px padding on the right, so I come to a total of
708px + 24px = 732 px. So where are my other 28px gone?
padding: 2px 4px 2px 0;
margin: 2px 4px 2px 0;

So there's also 24px of margin to account for. The last 4px are left
over and create the extra gap on the right hand side (which does
indeed seem to be about twice as big as the gap between items).

All the above assumes a sensible browser. IE5 will plop the border and
padding inside the 116px so there will be a lot more space left over
on the right hand side.
I couldn't care less, really, my buttons not adding up, but I also want to
solve the problem of the most right hand button not being aligned properly.
I have tried to give that <li> it's own ID with it's own style, but
obviously not in the right way, for it had no effect what so ever.


Any style rule you use to style the rightmost button has to be more
specific than the rule #navbar ul li a,
so #navbar ul li a#foo would work but just #foo wouldn't. Beyond that
it depends on what you're trying to do.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #2
On Thu, 24 Feb 2005 09:25:31 +0000, Steve Pugh wrote:
So there's also 24px of margin to account for. The last 4px are left
over and create the extra gap on the right hand side (which does
indeed seem to be about twice as big as the gap between items).
Stupid of me, not taking the margin into account. Thanks.
Any style rule you use to style the rightmost button has to be more
specific than the rule #navbar ul li a, so #navbar ul li a#foo would
work but just #foo wouldn't. Beyond that it depends on what you're
trying to do.


Thank you, I tried that, but will try again.

I'll have a look at the font-size too. I am in the early stages of
redesigning an old site and concentrating on the navbar for now.

--
Groet,
Adriana
[throw rubbish out if you want to reach me by e-mail]
Jul 21 '05 #3
On Thu, 24 Feb 2005 09:25:31 +0000 Steve Pugh wrote:
"A.Translator" <tr*************@yaBISHhoo.com> wrote:
On this page http://www.xs4all.nl/~hogen/MvK_nieuw/
I have a horizontal menu made up of an ul (bit scary, this, feel much
more
comfortable with a table there, but I keep reading I should use css
instead
;-)) Two questions:
the containing navbar div has a width of 760px.

Oh dear. What if my browser window isn't 760px wide?


You always have to bitch and whine about damn width issues.
Oh dear, what if I'm using a PDA or a cell phone?
760<800. True or false?
Jul 21 '05 #4
On Thu, 24 Feb 2005 10:08:17 +0100 A.Translator wrote:
On this page http://www.xs4all.nl/~hogen/MvK_nieuw/
I have a horizontal menu made up of an ul (bit scary, this, feel much
more
comfortable with a table there, but I keep reading I should use css
instead
;-))


You could start off by using colors that make the text VISIBLE!
Jul 21 '05 #5
On Thu, 24 Feb 2005 13:28:50 -0600, Richard wrote:
ou could start off by using colors that make the text VISIBLE!


excuse me?
--
Groet,
Adriana
[throw rubbish out if you want to reach me by e-mail]
Jul 21 '05 #6
Richard wrote:
You always have to bitch and whine about damn width issues.
Oh dear, what if I'm using a PDA or a cell phone?
760<800. True or false?


You're about to get plonked, true or false?

(hint: *plonk*)
--
Brian
Jul 21 '05 #7
"Richard" <An*******@127.001> wrote:
You always have to bitch and whine about damn width issues.


You always bitch and whine about my posts.
But I can build web sites and you can't so we'll just leave it at
that..

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #8
On Thu, 24 Feb 2005 21:09:00 +0100 A.Translator wrote:
On Thu, 24 Feb 2005 13:28:50 -0600, Richard wrote:
ou could start off by using colors that make the text VISIBLE!

excuse me?


Any item which is to be seen and read, needs to be done with colors that do
not blend in with each other.
I could only tell that there was something in the grey boxes but had no idea
what.
The grey should be at least a very light grey. Then the text within the box
will show up.
Jul 21 '05 #9
On Thu, 24 Feb 2005 20:04:55 -0600, Richard wrote:
The grey should be at least a very light grey. Then the text within the box
will show up.


thank you.
--
Groet,
Adriana
[throw rubbish out if you want to reach me by e-mail]
Jul 21 '05 #10
PJ
I concur. I have what's known as a red/green defeciency...basically many
shades of red and green appear darker to me than most people and, because of
that, it's often very difficult to discern any contrast with other dark
colors or even black.

"Richard" <An*******@127.001> wrote in message
news:cv********@news2.newsguy.com...
On Thu, 24 Feb 2005 21:09:00 +0100 A.Translator wrote:
On Thu, 24 Feb 2005 13:28:50 -0600, Richard wrote:
ou could start off by using colors that make the text VISIBLE!

excuse me?


Any item which is to be seen and read, needs to be done with colors that

do not blend in with each other.
I could only tell that there was something in the grey boxes but had no idea what.
The grey should be at least a very light grey. Then the text within the box will show up.

Jul 21 '05 #11
On Fri, 25 Feb 2005 14:03:40 -0800, PJ wrote:
I concur. I have what's known as a red/green defeciency...basically many
shades of red and green appear darker to me than most people and, because of
that, it's often very difficult to discern any contrast with other dark
colors or even black.


Thank you for pointing that out.

--
Groet,
Adriana
[throw rubbish out if you want to reach me by e-mail]
Jul 21 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Michael | last post: by
1 post views Thread by Randall Sell | last post: by
2 posts views Thread by Andrew Donaldson | last post: by
27 posts views Thread by didacticone | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.