CSS-Stile Bedeutung ?

[deep9]

grüss euch

bin immer noch am basteln meiner navileiste. Jedoch verstehe ich diese versch. css-stile nicht ganz. Kann mir jemand sagen für was die stehen ? oder was sie bewirken ?

<code>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}

ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

div.menu {
position: absolute;
width: 600px;
top: 57px;
z-index: 3;
left: 52px;
}
div.menu li {
float: left;
width: 120px;
}

div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: green;
background: white;
}

div.menu a:hover {
background: white;
border: 1px solid gray;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a {
font-weight: bold;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
color: #000000;
background-color: #FA0000;
border-top-width: medium;
border-top-style: outset;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: green;
background-color: red;
padding: 5px;
border: 1px solid gray;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: green;
background-color: brown;
}
.menu2 {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
background-repeat: no-repeat;
border: medium outset #FF0000;
}
a {text-decoration: none;
color: #000000;
}

.menu {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}
</style>
</code>

Hier noch 1. dazugehörige Schnipsel der onMouseover funktion:
<code>
<tr>
<td height="19%" bordercolor="#FFFFFF" class="menu"><div align="center" class="menu2"><font size="4"><li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Informationen</a> <ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">Subkategorie 1.1</a></li><br />
<li><a href="">Subkategorie 1.2</a></li><br />
<li><a href="">Subkategorie 1.3</a></li>
</ul></li></font></div></td>
</tr>
</code>

Wenn ich über Informationen gehe, gehen mir die 3. weitern Untermenüs schon auf, jedoch fehlt mir die Veränderung der Farben.

[reallife]

Also ich weiss ja nicht was für dich so schwer ist diesen Thread (link) mal zu lesen, da stehen links, die auf CSS Seiten verweisen.. Ich sage nur css4you.

[deep9]

ja da haste völlig recht. Doch ich meinte eigentlich nicht was die verschiedenen Inhalte (font, margin... etc.) bedeuten. Sondern mir ist nicht ganz klar, welche Stil Titeln (menu, menu2, mentions...etc.) oder in dieser navi:
<code>
<tr>
<td height="19%" bordercolor="#FFFFFF" class="menu"><div align="center" class="menu2"><font size="4"><li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Informationen</a> <ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">Subkategorie 1.1</a></li><br />
<li><a href="">Subkategorie 1.2</a></li><br />
<li><a href="">Subkategorie 1.3</a></li>
</ul></li></font></div></td>
</tr>
</code>

verändern muss um zu sagen, dass sie anfangs menu2 hat und danach bei onmouseover die hintergrundfarbe auf rot mit schwarzem rahmen setzt. Denn im moment verzieht es mir das aufklappende menü schrecklich und der hintergrund dieses aufklappenden menüs ist weiss. (sry dass ich mein prob. nicht online stellen kann).

danke für eure hilfe

[Lizzix]

Ändere dies doch einfach in deiner oberen CSS Festlegung.

.menu2 {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
background-repeat: no-repeat;
border: medium outset #FF0000;
}
a {text-decoration: none;
color: #000000;
}

.menu {
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color:[COLOR=crimson]#000000[/COLOR] ;
background-color:[COLOR=royalblue]#FFFFFF[/COLOR] ;

Das kannst du hier alles ändern. Schriftfarbe und Hintergrundfarbe.

Den onmouseover änderst du so um:

<code>
<tr>
<td height="19%" [COLOR=crimson]bordercolor="#FFFFFF"[/COLOR] class="menu"><div align="center" class="menu2"><font size="4"><li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Informationen</a> <ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">Subkategorie 1.1</a></li><br />
<li><a href="">Subkategorie 1.2</a></li><br />
<li><a href="">Subkategorie 1.3</a></li>
</ul></li></font></div></td>
</tr>
</code>

Und mit der Boredercolor kannste auch noch die Farbe des Rahmens ändern.

Hoffe, das hilft dir weiter. Du musst einfach nur oben die beiden verschiedenen Menüs nach deinen Vorstellungen konfigurieren.

Lizzix