Problém s 3D menu v CSS

MANIAC · Napísal **MANIAC**: 19.10.2008 21:45

Tu: http://css.maxdesign.com.au/listamatic/vertical15.htm som našiel návod ako urobiť 3D menu v CSS lenže už som dlho neprogramoval v CSS a už neviem kde a pod akým menom mám uložiť ten CSS zdroj. :cry:

Alebo som ten zdroj uložil správne a pod správnym menom ale je chyba niekde inde.

Poradte mi ako to mám spustiť pretože na to už nemám nervy. :loony:

neutronmind · Napísal **neutronmind**: 19.10.2008 21:52

No ten CSS kod si uloz do nejakeho externeho suboru s priponou .css a do head si pridaj nieco ako

Kód:

(style.css je nazov toho suboru, kde mas tie styly)

Takze budes mat dva subory
- .html subor

Kód:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html>

A subor style.css

Kód:

#navlist
{
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 0.8em Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
font-size: 1em;
}

#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}

#navlist a#current { border-color: #5bd #035 #068 #f30; }

#navlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}

#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}

#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}

#navlist a:hover, #navlist a#current:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}

#navlist a:active, #navlist a#current:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}

MANIAC · Napísal autor témy **MANIAC**: 19.10.2008 21:58

Díky už mi to funguje.

Problém s 3D menu v CSS

Podobné témy