how to use this css menu, there is a link?

0 ⤊

how to use this css menu, there is a link?

how to use this css, there is a link and this is it
http://www.cssplay.co.uk/menus/doors-three.html
it's free put there is no instructions in the page
can anyone give me directions how to use this in simple steps and I will be very thankful.

2007-03-12 05:42:51 · 4 answers · asked by yoofi1 1 in Computers & Internet ➔ Programming & Design

4 answers

View > Source on the page

You'll see an embedded stylesheet:

dl {padding:0; margin:5em 15px;}
dt {display:none;}
dd {float:left; margin:0 1px 0 0; padding:0; text-align:center;}
dd a, dd a:visited {text-decoration:none; color:#321;}
dd span {float:left; cursor:pointer;}

dd span.side {width:5px; height:3em; position:relative;}
dd span.side b.p1 {height:20px; width:1px; float:left; margin:5px 0; background:#345;}
dd span.side b.p2 {height:20px; width:1px; float:left; margin:3px 0; background:#e2dfa8; border-top:2px solid #345; border-bottom:2px solid #345;}
* html dd span.side b.p2 {height:24px; he\ight:20px;}
dd span.side b.p3 {height:24px; width:1px; float:left; margin:2px 0; background:#e2dfa8; border-top:1px solid #345; border-bottom:1px solid #345;}
* html dd span.side b.p3 {height:26px; he\ight:24px;}
dd span.side b.p4 {height:26px; width:2px; float:left; margin:1px 0; background:#e2dfa8; border-top:1px solid #345; border-bottom:1px solid #345;}
* html dd span.side b.p4 {height:28px; he\ight:26px;}
dd span.mid {height:28px; border-top:1px solid #345; border-bottom:1px solid #345; line-height:25px; padding:0 10px; background:#e2dfa8;}
* html dd span.mid {height:30px; he\ight:28px;}
dd a:hover {border:0;}
dd a:hover span.mid, dd a:hover span.side b.p2, dd a:hover span.side b.p3, dd a:hover span.side b.p4 {background:#c9ba65; color:#fff;}

And scrolling down, we see the HTML code for the menu:

Honestly I'm really not sure why the author did it this way... it's ridiculously complex for such a simple effect.

2007-03-12 06:09:26 · answer #1 · answered by Rex M 6 · 0⤊ 1⤋

1. Choose View --> Source

2. Find the part of the code that begins tag.

3. Paste that code into the head section of your HTML page, like this:

My page

This is your page

4.Find the code that begins like this: tag.

5. Paste that code into your page's BODY tag, like this:

This is your page

In all honesty, the fact that you need these instructions clearly indicates to me that you will not be able to manipulate the buttons to make them work as you want.

2007-03-12 06:52:44 · answer #2 · answered by Anonymous · 0⤊ 1⤋

For HTML

link/a -------

-------------li

subLink/ali -------/ul --li /ul The CSS could desire to be: #mainNav>li:hover a{ shade:blue; } some tinkering is likewise required with floated factors in spite of the indisputable fact that the significant ingredient concerns indexed indexed decrease than are the ">" with the purpose to purpose the teen LI's in spite of the indisputable fact that no longer the grandchild LI's and the hover on the LI no longer the A wish that helps

2016-10-02 00:05:34 · answer #3 · answered by finkle 4 · 0⤊ 0⤋

I tried to View Source on the page and could not for the life of me sneak my way into his style sheets...It says, no images, but could it mean, no images for the individual entire buttons? If so, then perhaps it's small curved images like, say, left- and right-end curved slivers being used as background images in an unordered list of addresses. Otherwise, perhaps, could it use the "unapproved" advanced "-moz-border-radius" property for styling corners???

2007-03-12 06:23:17 · answer #4 · answered by fjpoblam 7 · 0⤊ 2⤋