HTML Goodies Look

[Bwelsh]

Could somebody show me where in the source the Table for HTML Goodies Navigation panel is?

I want to do something similar, but I want to see how they did it.

I don't see it in the source.
Or is it part of the CSS?

[LJK]

Hi -
Yup, it looks like the CSS:

/*---navigation control---*/
#myMenu {
width: 100%;
background-color:#ffffff;
}
#myMenu span {
display: none;
visibility: hidden;
}
#myMenu a {
display: block;
padding-right: 0.4em;
padding-left: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
text-decoration: none;
}
#myMenu a:link {
background-color:#CCCCCC ;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px; font-weight:normal;
border-top: solid #ffffff 1px;
}
#myMenu a:visited {
background-color: #CCCCCC;
color: black;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
border-top: solid #ffffff 1px;
}
#myMenu a:hover {
background-color: #54A4DE;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none; Font-Size:10px; font-weight:bold;
border-top: solid #ffffff 1px;
}
#myMenu a:active {
background-color: ##CCCCCC;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
border-top: solid #ffffff 1px;
}

--------------------------------------
Though it could be shortened to:
#myMenu {
width: 100%; background:white none;
}
#myMenu span {
display: none; visibility: hidden;
}
#myMenu a {
display: block; padding:0.2em 0.4em 0.2em 0.5em;
}
#myMenu a:link, #myMenu a:visited {
background:#cccccc none; font-family: "verdana", "arial", "helvetica", sans-serif;
colof:black; text-decoration: none; font-size:10px; font-weight:normal;
border-top: solid #ffffff 1px;
}
#myMenu a:hover, #myMenu a:active {
background:#54a4de none; color: white;
}
---------------------------------------
with:

<div id="myMenu">
<a href="/">home</a> <span>|</span>
<a href="/introduction/about/">about</a> <span>|</span>
<!-- <a href="/introduction/book_sales/">html goodies books</a> <span>|</span> -->
<a href="/introduction/intro/">non-technical introduction</a> 
<a href="/introduction/newsletter_archive/">newsletter archive</a> <span>|</span>
</div>

...

Check-out Firefox's Web Developer Extension to be able to check-out the css when you need to.

El

[Bwelsh]

When I use it, for some reason, it underlines, like on HTML goodies it does PRIMERS and BEYOND HTML.

Anyone know why?

And how do I get rid of a think line at the end?

[Bwelsh]

Who am I kidding. I cant do this.

Let me explain what I want.

I want it to be similar to Goodies.

I want a image page length on top, and have below on the left side nearest the top image a nav, similar to the one goodies has, with a only one change, I want when you hover the background to be grey.

Then I want to the left of the nav, and below the image a box which has the information, and pictures on the sides.

If anyone has a messanger service, and wants to help me out step by step with CSS, it would be greatly appreciated.

This is for school, and I need some help.

Thanks!

[Bwelsh]

Actully, I think I got it.
I learned how to do what I need.