CSS-Datei für Menue ändern

[Carlchen]

Hallo,
bin (mal wieder:mrgreen: ) dabei meine HP etwas zu entspecken und das Outfit zu ändern. Als Vorlage hab ich ein Template von on-mouseover.de. Nun hab ich die Menüs vervielfältigt. Als Untermenü möchte ich jeweils das oberste Menü nehmen- und zwar- und jetzt mein "Problem" möchte ich dieses Menü mit andersfarbigen Aufzählpunkten gestalten (nicht in gelb, wie die übrigen).
Wie muss ich wohl die CSS-Datei ändern?
Meine Idee war: Das Menü1 in der CSS-Datei duplizieren und umbenennen. Die Farbe in der CSS-Datei ändern. Das Untermenü ebenfalls entsprechend umbenennen. Klappt leider nicht. Das Untermenü hatte durch meine Maßnahmen die eigentliche Formatierung verloren und die Farbe der Aufzählpunkte hat sich auch in den anderen Menüs geändert, statt also oberstes Menü schwarze Punkte und die restlichen mit gelben Punkten waren plötzlich alle schwarz+phpbb_eek
Hat irgend jemand eine Idee, was ich falsch gemacht hab? (oder war meine Idee völlig daneben? Kann immer nur learning by doing)
Hier seht ihr das vorläufige Ergebnis (allerdings ohne Änderung der CSS-Datei):
http://www.klaerchens-katzenhomepage...32z/index.html

und hier ist der Inhalt der CSS-Datei:
http://www.klaerchens-katzenhomepage.de/hp32z/css01.htm

LG,
Carlchen

[dhx]

AW: CSS-Datei für Menue ändern

Mahlzeit!

Zuerst solltest du wissen, das gleichnamige ID's (hier "#menue01") nur
einmal(!) pro Seite auftauchen dürfen.
Das bedeutet statt der ID verwendest du eine Klasse (class). In deinem Fall
könnte das dann so ausehen.
Im HTML-Bereich (stark gekürzt) wird "id" durch "class" ersetzt:

<!--MENU 01 - rechte seite -->
<div [B]class[/B]="menu01">
...
</div>
<!--MENU 01 ENDE-->

...

<!--MENU 02 - rechte seite -->
<div [B]class[/B]="menu01">
...
</div>
<!--MENU 02 Ende-->

...

<!--MENU 03 - rechte seite -->
<div [B]class[/B]="menu01">
...
</div>
<!--MENU 03 Ende-->

...

<!--MENU 04 - rechte seite -->
<div [B]class[/B]="menu01">
...
</div>
<!--MENU 04 ENDE-->

Im CSS-Bereich (stark gekürzt) wird die Raute "#" durch einen Punkt "." ersetzt:

/* menue  */
.menu01 {
...
}

.menu01 ul, .menu01 li {
...
}

.menu01 li a:link, .menu01 li a:visited, .menu01 li a:active {
...
}

.menu01 li a:hover { 
...
}

Wenn du eine andere Farbe für das Aufzählungszeichen möchtest, erstelle
eine neue Klasse, z.B. "menu02", und setze diese in dem HTML-Bereich ein:

<!--MENU 01 - rechte seite -->
<div [B]class[/B]="[B]menu02[/B]">
...
</div>
<!--MENU 01 ENDE-->

Auch im CSS-Bereich wird die Klasse ".menu02" notiert. Da diese neue Klasse
bis auf die Listenfarbe gleich ist, muss man nicht alles kopieren.
Stattdessen kombiniert man (getrennt durch ein Komma) vorhandene Definitionen.

.menu01, [B].menu02[/B] {
width:170px;
margin: 0px;
padding:0px;
border: dashed 0px #fff;
float:right;
text-align: left;
margin-top:0px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
padding-bottom:10px;
}

.menu01 ul, .menu01 li,
[B].menu02 ul, .menu02 li[/B] {
list-style-type: square;
margin-left:10px;
padding: 0px;
color:#fff482
}

[B].menu02 ul, .menu02 li[/B] {
color: #006699 ;/* Hier die neue Farbe eintragen */
}

.menu01 li a:link, .menu01 li a:visited, .menu01 li a:active,
[B].menu02 li a:link, .menu02 li a:visited, .menu02 li a:active[/B]{
display:block;
border-bottom: 0px dashed #C2631D;
color:#fff;text-decoration:none;
font-size: 12px;height: 16px;
line-height: 16px; georgia
}

.menu01 li a:hover, [B].menu02 li a:hover[/B] { 
background:;
color:#fff482;
text-decoration:underline;
letter-spacing:1px
}

Anmerkung:
In der CSS-Datei sind ein paar Schreibfehler (?) drin. Beipiel:

#menu01 li a:hover { [B]background:;[/B]
...}

Entweder eine Angabe zum Background machen oder diese ganz rausnehmen.

[Carlchen]

AW: CSS-Datei für Menue ändern

Fertich
Danke für die ausführliche Anleitung, habs nun nach meinen Wünschen geändert und ergänzend auch noch den Mouseover angepasst.

s.h.:
http://www.klaerchens-katzenhomepage...aerchen01.html

Eine Frameseite mit vielen Unterseiten auf "Nicht-frame" umzubauen ist schon ziemlich heftig, da möchte ich erst mal das Grundgerüst so gestalten das es mir wirklich gefällt- da hast du mir sehr geholfen!

LG,
Carlchen

[Carlchen]

Thread 36539 noch mal hochgeholt

Hallo,
dank der Hilfe von DHX hatte ich mein Menü genau so geändert wie ichs haben wollte, lief ganz wunderbar... bis... ja bis ich aus Versehen gelöscht hab und... nun ja jetzt versuch ich es also genauso wieder aufzubauen und bekomme zwei Dinge nicht hin :-(((

Also: statt ein id-Menü zwei als class eingerichtet. Hintergrund: Ich möchte die Aufzählungskästchen halt in unterschiedlichen Farben haben. Und nun wird aber das obere (Menu02) anscheinend nicht css-formatiert und die unteren Aufzählungspunkte sind nach links verschoben und werden je nach Browser entweder gar nicht mehr oder nur noch teilweise gezeigt.
Ich hab nach vielem Grübeln weiterhin keinen blassen Schimmer warum.

Ich hoffe ihr könnt mir noch mal helfen und- ach ja das mit den Carlottchens (s.h. Link) ist aktuell.
LG,
Carlchen

Hier der Link:
http://Muster

Und hier die von mir geänderte CSS-Datei:

body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #6a95e0;
}

table, td {font-size: 11pt;line-height: 1.5em;
font-family: georgia,verdana, "times new roman", serif;color:#000;
}

h2{ font-family:georgia, verdana,'Lucida Grande', Helvetica, verdana, sans-serif;
color:#fff;
margin-bottom:24px;font-size: 14pt;
border-bottom:solid 0px #746b64;
padding-bottom:4px;
font-style:normal;
letter-spacing:-1px;
font-style:italic;

}


.li {
width:24px;
background-image:url('images/ra1.jpg');
background-repeat:repeat-y;
vertical-align:top;
border-right:1px solid #fff;
}


.re {
width:24px;
background-image:url('images/ra2.jpg');
background-repeat:repeat-y;
border-left:1px solid #fff;}


/* hauptgerüst */

#main {
border-bottom:solid 1px #fff;
border-right:solid 0px #fff;border-left:solid 0px #fff;

}

#top {background-image:url('images/casey.jpg');
height:515px;
border-top:1px solid #fff;
border-right:0px solid #fff;border-left:0px solid #fff;
color:#2A3C22
}

#hpname {height:36px;padding-left:10px;padding-top:10px;text-align:left;color:#fff;
letter-spacing:3px;
font-family: georgia,arial, helvetica, verdana, tahoma, sans-serif;
font-size:22px;
}

.comment{
width:160px;
float:left;
line-height:28px;
letter-spacing:-3px;
text-align: right;
color:#E6E8FF;
margin-top:20px;
margin-bottom:10px;
margin-right:20px;
padding-bottom:10px;
font-family:'Lucida Grande', Helvetica, sans-serif;
font-size: 24px;

}

/* menue oben */

.buleiste {
-moz-opacity: 0.70;
_filter: progidXImageTransform.Microsoft.Alpha(opacity=70);
opacity: 0.70;
background-color:#9cbaeb;
height:36px;
}

#menu2 a, #menu2 a:visited, #menu2 a:active {display: block;
color:#000;


text-decoration:none ;font-family:verdana, sans-serif; font-size: 10pt;
padding-left: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border-left:solid 1px #fff;
border-bottom:solid 1px #fff;
border-top:solid 1px #fff;
line-height:36px;
text-align:center;

}


#menu2 a:hover {background-color:#3f6b8e;color:#fff; text-decoration:none ;

border:solid 1px #fff;
}




#sp1 {text-align:justify; padding-left: 20px;padding-right:20px;padding-top: 30px;padding-bottom: 30px;
background-color:#9cbaeb;width:100%;
background-image:url('images/bgmain.jpg');
background-repeat:repeat-x


}

#sp2 {text-align:justify; padding-left: 0px;padding-right:10px;padding-top: 30px;padding-bottom: 30px;
background-color:#DEEAF8;

background-repeat:repeat-y;
background-position:top left;border-left:solid 0px #fff;

}


#fussb {color: #000;
height:60px;
background-color:#6e98e2;
text-align:center;
border-top:1px solid #333333;
background-image:url('images/schatten1.jpg');
background-repeat:repeat-x;
background-position: 0% -4px; ; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:verdana, sans-serif
}

/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #737b66; scrollbar-base-color: #F5F8F3;
scrollbar-highlight-color : #737b66; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}




/* menue */

.menu01, .menu02 {
width:170px;
margin: 0px;
padding:0px;
border: dashed 0px #fff;
float:right;

text-align: left;

margin-top:0px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
padding-bottom:10px;
}

.menu01 ul, .menu01 li
.menu02 ul, .menu02 li {

list-style-type: square;
margin-left:10px;
padding: 0px;
color:#000080
}
.menu02 ul, .menu02 li{
color:#00CC00
}

.menu01 li a:link, .menu01 li a:visited, .menu01 li a:active
.menu02 li a:link, .menu02 li a:visited, .menu02 li a:active {
display:block;
border-bottom: 0px dashed #C2631D;
color:#000;text-decoration:none;
font-size: 12px;height: 16px;
line-height: 16px; georgia
}

.menu01 li a:hover, .menu02 li a:hover {
background:;
color:#fff482;
text-decoration:underline;
letter-spacing:1px
}




a:link, a:visited, a:active{ font-size: 11pt;line-height: 1.5em;
font-family: georgia, verdana, arial, helvetica, verdana, tahoma, sans-serif;color:#000}

a:hover{ text-decoration:none;background-color:#6A95E0;
color:#fff;}