By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

Another tab menu question

P: n/a
I found this code for the site I'm working on (www.sovietposters.tk).
It does exactly what I want but I can't figure out how to change the
color of the tabs. Anyone any suggestions?
John
<style type="text/css">

body {
font: 100% verdana, arial, sans-serif;
background-color: #0080ff;
margin: 5px;
}

ul#tabnav {
font: bold 10px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3 {
border-bottom: 1px solid #fff;
background-color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a {
color: #000;
}

#tabnav a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}

#tabnav a:hover {
background: #fff;
}

</style>
</head>

<body id="tab2">

<ul id="tabnav">
<li class="tab1"><a href="#" onMouseOver="window.status='Click here
for posters with portrait orientation'; return true;"
onMouseOut="window.status=''; return true;">Posters with portrait
orientation</a></li>
<li class="tab2"><a href="" onMouseOver="window.status='Posters with
landscape orientation'; return true;" onMouseOut="window.status='';
return true;">Posters with landscape orientation</a></li>
<li class="tab3"><a href="" onMouseOver="window.status='Click here
for poster of the month'; return true;" onMouseOut="window.status='';
return true;">Poster of the month</a></li>
</ul>
Jul 20 '05 #1
Share this Question
Share on Google+
16 Replies


P: n/a
John wrote:
I found this code for the site I'm working on (www.sovietposters.tk).
It does exactly what I want but I can't figure out how to change the
color of the tabs. Anyone any suggestions?


Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.
Jul 20 '05 #2

P: n/a
John wrote:
I found this code for the site I'm working on (www.sovietposters.tk).
It does exactly what I want but I can't figure out how to change the
color of the tabs. Anyone any suggestions?


Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.
Jul 20 '05 #3

P: n/a
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
John wrote:
I found this code for the site I'm working on (www.sovietposters.tk).
It does exactly what I want but I can't figure out how to change the
color of the tabs. Anyone any suggestions?


Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.


Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...
Jul 20 '05 #4

P: n/a
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
John wrote:
I found this code for the site I'm working on (www.sovietposters.tk).
It does exactly what I want but I can't figure out how to change the
color of the tabs. Anyone any suggestions?


Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.


Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...
Jul 20 '05 #5

P: n/a
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
John wrote:
> I found this code for the site I'm working on (www.sovietposters.tk).
> It does exactly what I want but I can't figure out how to change the
> color of the tabs. Anyone any suggestions?


Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.


Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...


You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #6

P: n/a
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
John wrote:
> I found this code for the site I'm working on (www.sovietposters.tk).
> It does exactly what I want but I can't figure out how to change the
> color of the tabs. Anyone any suggestions?


Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.


Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...


You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #7

P: n/a
Stephen Poley <sb******************@xs4all.nl> wrote in message news:<c5********************************@4ax.com>. ..
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
John wrote:

> I found this code for the site I'm working on (www.sovietposters.tk).
> It does exactly what I want but I can't figure out how to change the
> color of the tabs. Anyone any suggestions?

Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.


Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...


You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...


Interesting comment about the text size... I'll mess around with that.
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?
Jul 20 '05 #8

P: n/a
Stephen Poley <sb******************@xs4all.nl> wrote in message news:<c5********************************@4ax.com>. ..
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
John wrote:

> I found this code for the site I'm working on (www.sovietposters.tk).
> It does exactly what I want but I can't figure out how to change the
> color of the tabs. Anyone any suggestions?

Change:

background-color: #cfc; in ul#tabnav li { to
background-color: #ffffff; for example.


Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...


You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...


Interesting comment about the text size... I'll mess around with that.
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?
Jul 20 '05 #9

P: n/a
On 10 Apr 2004 07:55:48 -0700, John <vi*****@soon.com> wrote:
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?


#ffffff is red, green and blue on full, and each color is set on a scale
of 00 to ff (0 to 255).

#fff is the same, except each color is set on a scale of 0 to f (0 to 15).

So divide the color code in thirds. Ex. #c0f0c0 = c0 - f0 - c0. Round each
part to the nearest double-digit, in this case bb - ee - bb. Then put it
together like #beb. #beb is the closest 3-digit equivalent to #c0f0c0.
Jul 20 '05 #10

P: n/a
On 10 Apr 2004 07:55:48 -0700, John <vi*****@soon.com> wrote:
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?


#ffffff is red, green and blue on full, and each color is set on a scale
of 00 to ff (0 to 255).

#fff is the same, except each color is set on a scale of 0 to f (0 to 15).

So divide the color code in thirds. Ex. #c0f0c0 = c0 - f0 - c0. Round each
part to the nearest double-digit, in this case bb - ee - bb. Then put it
together like #beb. #beb is the closest 3-digit equivalent to #c0f0c0.
Jul 20 '05 #11

P: n/a
vi*****@soon.com (John) wrote in message news:<d0**************************@posting.google. com>...
Stephen Poley <sb******************@xs4all.nl> wrote in message news:<c5********************************@4ax.com>. ..
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
> John wrote:
>
> > I found this code for the site I'm working on (www.sovietposters.tk).
> > It does exactly what I want but I can't figure out how to change the
> > color of the tabs. Anyone any suggestions?
>
> Change:
>
> background-color: #cfc; in ul#tabnav li { to
> background-color: #ffffff; for example.

Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...


You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...


Interesting comment about the text size... I'll mess around with that.
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?


Update: I've succeeded in changing the colors (see:
www.sovietposters.tk), although the coding still puzzles me. Now,
however, the margin above the tab strip table is wider - how do I
decrease it's size? Somehow the color codes change the layout or am I
really missing something here?
Many Easter eggs are waiting in the garden for whoever can help me out
on this...
Jul 20 '05 #12

P: n/a
vi*****@soon.com (John) wrote in message news:<d0**************************@posting.google. com>...
Stephen Poley <sb******************@xs4all.nl> wrote in message news:<c5********************************@4ax.com>. ..
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:
"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
> John wrote:
>
> > I found this code for the site I'm working on (www.sovietposters.tk).
> > It does exactly what I want but I can't figure out how to change the
> > color of the tabs. Anyone any suggestions?
>
> Change:
>
> background-color: #cfc; in ul#tabnav li { to
> background-color: #ffffff; for example.

Thanks for your input, but that setting also totally destroys the
layout with the text in the menu elements vertical to one another - I
just can't understand what's happening with the code.
If the good doctor has another solution, I'd be much obliged...


You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...


Interesting comment about the text size... I'll mess around with that.
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?


Update: I've succeeded in changing the colors (see:
www.sovietposters.tk), although the coding still puzzles me. Now,
however, the margin above the tab strip table is wider - how do I
decrease it's size? Somehow the color codes change the layout or am I
really missing something here?
Many Easter eggs are waiting in the garden for whoever can help me out
on this...
Jul 20 '05 #13

P: n/a
On 10 Apr 2004 14:22:57 -0700, vi*****@soon.com (John) wrote:
Update: I've succeeded in changing the colors (see:
www.sovietposters.tk), although the coding still puzzles me. Now,
however, the margin above the tab strip table is wider - how do I
decrease it's size?
The space above 'tabnav' comes from the margin on the body. You can
reduce that to whatever you want.

One tip, not directly relevant to this discussion: it's probably safer
to use padding on <body> rather than margin. If you use margin on
<body>, the background colour of the <html> element should in theory
show through: IIRC different browsers handle this situation differently.
Padding will display the <body> background colour, which is presumably
what you want.
Somehow the color codes change the layout or am I
really missing something here?
You've got me there. I can't easily experiment to see what IE 5.5 is
doing: in Opera one can quickly make local changes in the cache and
redisplay them, but to explore IE 5.5, I'd have to download all the
relevant files.
Many Easter eggs are waiting in the garden for whoever can help me out
on this...


My children are looking forward to them ...

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #14

P: n/a
On 10 Apr 2004 14:22:57 -0700, vi*****@soon.com (John) wrote:
Update: I've succeeded in changing the colors (see:
www.sovietposters.tk), although the coding still puzzles me. Now,
however, the margin above the tab strip table is wider - how do I
decrease it's size?
The space above 'tabnav' comes from the margin on the body. You can
reduce that to whatever you want.

One tip, not directly relevant to this discussion: it's probably safer
to use padding on <body> rather than margin. If you use margin on
<body>, the background colour of the <html> element should in theory
show through: IIRC different browsers handle this situation differently.
Padding will display the <body> background colour, which is presumably
what you want.
Somehow the color codes change the layout or am I
really missing something here?
You've got me there. I can't easily experiment to see what IE 5.5 is
doing: in Opera one can quickly make local changes in the cache and
redisplay them, but to explore IE 5.5, I'd have to download all the
relevant files.
Many Easter eggs are waiting in the garden for whoever can help me out
on this...


My children are looking forward to them ...

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #15

P: n/a
vi*****@soon.com (John) wrote in message news:<d0**************************@posting.google. com>...
vi*****@soon.com (John) wrote in message news:<d0**************************@posting.google. com>...
Stephen Poley <sb******************@xs4all.nl> wrote in message news:<c5********************************@4ax.com>. ..
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:

>"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
>> John wrote:
>>
>> > I found this code for the site I'm working on (www.sovietposters.tk).
>> > It does exactly what I want but I can't figure out how to change the
>> > color of the tabs. Anyone any suggestions?
>>
>> Change:
>>
>> background-color: #cfc; in ul#tabnav li { to
>> background-color: #ffffff; for example.
>
>Thanks for your input, but that setting also totally destroys the
>layout with the text in the menu elements vertical to one another - I
>just can't understand what's happening with the code.
>If the good doctor has another solution, I'd be much obliged...

You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...


Interesting comment about the text size... I'll mess around with that.
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?


Update: I've succeeded in changing the colors (see:
www.sovietposters.tk), although the coding still puzzles me. Now,
however, the margin above the tab strip table is wider - how do I
decrease it's size? Somehow the color codes change the layout or am I
really missing something here?
Many Easter eggs are waiting in the garden for whoever can help me out
on this...


With all the help I've received, I have now solved the tab and margin
issues, but one thing still bugging me is the <frame marginheight>
setting in the upper frame. If I reduce the size of the margin with
the <marginheight> setting, the top margin is reduced but the lower
margin is larger than ever. Is there any way of controlling the top
margin and bottom margin separately in a frame?
Jul 20 '05 #16

P: n/a
vi*****@soon.com (John) wrote in message news:<d0**************************@posting.google. com>...
vi*****@soon.com (John) wrote in message news:<d0**************************@posting.google. com>...
Stephen Poley <sb******************@xs4all.nl> wrote in message news:<c5********************************@4ax.com>. ..
On 9 Apr 2004 13:50:39 -0700, vi*****@soon.com (John) wrote:

>"dr. zoidberg" <zo*@example.org> wrote in message news:<c5*************@ID-93631.news.uni-berlin.de>...
>> John wrote:
>>
>> > I found this code for the site I'm working on (www.sovietposters.tk).
>> > It does exactly what I want but I can't figure out how to change the
>> > color of the tabs. Anyone any suggestions?
>>
>> Change:
>>
>> background-color: #cfc; in ul#tabnav li { to
>> background-color: #ffffff; for example.
>
>Thanks for your input, but that setting also totally destroys the
>layout with the text in the menu elements vertical to one another - I
>just can't understand what's happening with the code.
>If the good doctor has another solution, I'd be much obliged...

You must have made a typo. I don't believe that even IE will screw up a
layout [1] if you just change a background colour. I tried it without
any problem on your layout.

By the way the text in the top frame is just about illegible for me.
Leave it to the default size (or set 100%) and reduce the text size in
your own browser if you like text that small. Then we both see what we
like.
[1] Unless someone can produce the evidence ...


Interesting comment about the text size... I'll mess around with that.
I am able to change the colour by modifying #cfc in #cff but not in
#ffffff (which really does change the layout of me in IE 5.5. Where
can I find a list with these shorter color codes?


Update: I've succeeded in changing the colors (see:
www.sovietposters.tk), although the coding still puzzles me. Now,
however, the margin above the tab strip table is wider - how do I
decrease it's size? Somehow the color codes change the layout or am I
really missing something here?
Many Easter eggs are waiting in the garden for whoever can help me out
on this...


With all the help I've received, I have now solved the tab and margin
issues, but one thing still bugging me is the <frame marginheight>
setting in the upper frame. If I reduce the size of the margin with
the <marginheight> setting, the top margin is reduced but the lower
margin is larger than ever. Is there any way of controlling the top
margin and bottom margin separately in a frame?
Jul 20 '05 #17

This discussion thread is closed

Replies have been disabled for this discussion.