Keskustelu: Nettisivujen teko: Navigation bar ongelma

Morjesta,

Sellaista asiaa olisin kysellyt, että löysin navigation baarin täältä juuri omaan tarpeeseen soveltuvaksi, mutta yllätys yllätys tuli pieni ongelma siinä vastaan.

Elikkäs kuten jo linkin kautta näkyy koodin pätkä:

CSS:

.navi
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

SIVU:

<div class="navi">

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</div>

Ja tämän siis haluaisin divin sisäään, mutta kun liitin pätkän css tiedostoon niin kaikki sivuilla olevat tekstit muuttuivat kyseisellä stylellä, linkit yms. Joten miten pystyn rajaamaan tämän, että kyseinen style pysyy vain tässä omassa divissä, eikä käytä sitä muualla sivustolla? Pitäisikö siihen tehdä oma css vai miten? En ole millään ole tajunnut tuota, ja googleakin on yritetty.

Kiitos jo etukäteen, jos joku viitsisi auttaa tyhmää :)

.navi li

.navi a:link,.navi a:visited

Tähän malliin. Tämä täsmää nuo elementit kaikkiin .navin sisällä oleviin elementteihin. Jos haluat rajata vain suoriin lapsiin etkä lapsenlapsiin tai vielä syvemmälle puuhun, niin voit käyttää valitsinta >

.navi > ul > li

.navi > ul > li > a

Joskin valitettavasti Internet Explorer 6 ei tue tätä valitsinta, joten ihan kaikilla sivustoilla ei ole turvallista käyttää sitä.

Kiitos paljon Merri nopeasta ja toimivasta viestistäsi. :)