473,385 Members | 2,243 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Another tab menu question

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
16 2104
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
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
"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
"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
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
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
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Steven An | last post by:
I'm gonna describe the situation I'm dealing with..but if you're not interested, just skip to the last line where I bluntly ask my question :) Here's my scenario: I've got a huge website that...
2
by: BigOne | last post by:
I'm looking for a script that embeds the text typed on a hidden(and protected) page in to a other page that can be viewed for visitors this text must stay till the owner sets a new text this is...
0
by: Greg Merideth | last post by:
I've experimented around with the menu bitmaps but none of the sample code and app's I've tested with can show me how to add a bitmap to a context menu. I've created an app with no main form that...
3
by: Evan | last post by:
I have a web page with 2 frames. The left frame is running menu.aspx and the right frame is running images.aspx. When a selection is made in menu.aspx I call a method in images.aspx and pass a...
6
by: Viken Karaguesian | last post by:
Hello all, Just a question: Is the text in an ALT attribute indexed by Google/search engines? I'm curious. I see a number of sites around the 'net that use rollover images as their navigation...
24
by: =?Utf-8?B?RHIuIFMu?= | last post by:
I am incorporating three existing programs into a new "all in one" program. I have added the three projects to the new all in one project. How do I instruct the new initial menu to launch the main...
0
by: NvrBst | last post by:
This may be a basic question... Anyway, the menu items that don't have NavigateUrl's yet do a "javascript _doPostBack(...)" and shows the item as selected. The items I give the NavigateUrls...
3
by: eljainc | last post by:
Hello, I am trying to figure out how to efficiently do the following: Say I have 10 TextBox fields on a form. From each of those, I would like to have a right click context menu. There are 10...
3
by: yosibeck | last post by:
sorry folks, I'm sure this is a newbie question. On my website I have one DIV (id="menu") with position:fixed that serves as a fixed menu bar. Then comes the second DIV (id="content") that holds...
7
by: =?Utf-8?B?U2hpdmEgUmFtYW5p?= | last post by:
I have a windows application with multiple forms & another web application. Now I need a parent EXE or Application which need to act as a container to these application. Example : My existing Web...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.