Problem mit css

NyctalusNoctula

Ich hab mich nun an mein Menü gewagt (siehe Beitrag weiter unten)
Ich habe versucht es mit css zu realisieren.
Doch leider liefert jeder Browser ein anderes Ergebnis. Der IE kommt dabei dem was ich haben will noch am nächsten. Firefox und Opera versagen total.

Hier die Seite: Man vergleiche besonders das Menü links!
http://mitglied.lycos.de/sirtobiiv/ambilight/ambilight.php

Woran kann das liegen? Warum machen Firefox und Opera den hover-Effekt gar nicht? Opera verhunzt zudem noch das Layout im Gästebuch.

Das css-Stylesheet:

Code

p, ul, ol, li, div, td, th, address, blockquote, nobr, b, i, table {
 font-family:'Times New Roman'; color:#333333; }
p, ul, ol, li, div, td, th, address, blockquote { font-size:14pt; }
p, h1, h2, h3, div { padding:8px; }


li { margin-top:0px; margin-bottom:0px; list-style-position:inside; }


body { background-color:#A7C254; }
body  { margin:25px; textarea {
  color:#000000;
  scrollbar-base-color:#A7C254;
  scrollbar-3dlight-color:#ee8c00;
  scrollbar-arrow-color:#ee8c00;
  scrollbar-darkshadow-color:#ee8c00;
  scrollbar-face-color:#FFcc59;
  scrollbar-highlight-color:#FFcc59;
  scrollbar-shadow-color:#ee8c00;
  scrollbar-track-color:#A7C254;
} }


h1, h2, h3 { font-family:'Century Schoolbook'; }


h1 { color:#cc0000; font-size:27pt; margin-bottom:5px; }
h2 { color:#cc0000; font-size:22pt; margin-bottom:5px; }
h3 { color:#cc0000; font-size:17pt; margin-bottom:5px; }


td { background-color:#E3C764; valign:top; }


a:link { color:#CC0000; text-decoration:none; }
a:visited { color:#CC0000; text-decoration:none; }
a:active { color:#CC0000; text-decoration:none; }
a:hover { color:#CC0000; text-decoration:none; background-color:#A7C254; }


#menue a, #menue a:link, #menue a:visited, #menue a:active {
text-decoration:none;
font-weight:bold;
display:block;
color:#CC0000;
width:150px;
padding:5px;
margin:2px;
background-color:#E3C764;
}
#menue a:hover, {
text-decoration:none;
font-weight:bold;
display:block;
color:#CC0000;
width:150px;
padding:5px;
margin:2px;
background-color:#A7C254;
}
#menue li a, #menue li a:link, #menue li a:visited, #menue li a:active {
text-decoration:none;
font-weight:normal;
display:block;
color:#CC0000;
width:134px;
padding:5px;
margin:2px;
background-color:#E3C764;
}
#menue li a:hover, {
text-decoration:none;
font-weight:bold;
display:block;
color:#CC0000;
width:134px;
padding:5px;
margin:2px;
background-color:#A7C254;
}

Alles anzeigen

und noch das Menü:

Code

<div id="menue">[url='ambilight.php']Ambilight[/url]
[*][url='ambilight1.php']weitere Fotos[/url]
[*][url='ambilight2.php']Bauanleitung[/url]
[*][url='ambilight3.php']Stückliste[/url]
</div>

Ich bin für jeden Tipp dankbar. Zur Not muss ich eben alla Attribute für jedes div und jeden Link im Quelltext setzen. Das kann ja aber nicht der Sinn der Sache sein.

Gruß
Nyctalus Noctula

jojo87

evtl. solltest die lis mal in nen ul tag packen?
Das hätte dir der Validator auch gesagt, vergiss nicht ihn zu nutzen

NyctalusNoctula

hm, dann entsteht aber eine Lücke zwischen dem Hauptlink und den Unterlinks.
An dem Problem, dass Firefox nach den [*] einen Zeilenumbruch macht und dass der Hover-Effekt nicht funktioniert ändert das aber rein gar nichts.

jojo87

Der Hauptfehler:

Code

#menue li a:hover, {

Nimm das komma da weg, dann gehts.
und verbesser auf jeden Fall das mit den <ul>s und pass den css code an:

Code

#menue ul li a, #menue ul li a:link, #menue ul li a:visited, #menue ul li a:active {

und

Code

#menue ul li a:hover {

Gruß,
Jojo

sejuma

ul ist gut, reicht aber noch nicht:

Du hast mehrfach-Definitionen, die sich teils überlagern und damit die vorherigen außer Kraft setzen.

Mach dir mal zur Vorsicht zunächst Sicherungskopien und gehe dann wie folgt vor:

Diesen Teil komplett löschen:

Code

#menue li a, #menue li a:link, #menue li a:visited, #menue li a:active {
text-decoration:none;
font-weight:normal;
display:block;
color:#CC0000;
width:134px;
padding:5px;
margin:2px;
background-color:#E3C764;
}
#menue li a:hover[b],[/b] {
text-decoration:none;
font-weight:bold;
display:block;
color:#CC0000;
width:134px;
padding:5px;
margin:2px;
background-color:#A7C254;
}

Alles anzeigen

Hier das Komma löschen:

Zitat

#menue a:hover, {

Falls du die Aufzählungspunkte weghaben willst, füge das in die CSS ein:

Code

#menue li
{list-style-type: none;}

Schließlich packe deine Links wie von jojo empfohlen in eine ul:

Alternative I:

Code

<div id="menue">
<ul>
[*][url='ambilight.php']Ambilight[/url]
[*][url='ambilight1.php']weitere Fotos[/url]
[*][url='ambilight2.php']Bauanleitung[/url]
[*][url='ambilight3.php']Stückliste[/url]
[/list]
</div>

Evtl. für ul noch folgendes hinterlegen:

Code

#menue ul {margin: 0;}

Alternative II:

Code

<div id="menue">
[url='ambilight.php']Ambilight[/url]
<ul>
[*][url='ambilight1.php']weitere Fotos[/url]
[*][url='ambilight2.php']Bauanleitung[/url]
[*][url='ambilight3.php']Stückliste[/url]
[/list]
</div>

Viel Erfolg!

NyctalusNoctula

Vielen Dank. Das Problem mit dem nicht funktionsfähigen Hover ist damit beseitigt.
Aber Firefox macht immer noch nen Zeilenumbuch nach den [*]. Das soll nicht sein.

Zitat von sejuma

ul ist gut, reicht aber noch nicht:

Du hast mehrfach-Definitionen, die sich teils überlagern und damit die vorherigen außer Kraft setzen.

Die Mehrfachdefinitionen haben schon ihre Richtigkeit. Oder kann es dadurch zu Problemen kommen?
Ich möchte ja schließlich, dass der Hauptlink fett ist und die unteren Links nicht. Außerdem sollen die "Buttons" der Unterlinks etwas schmaler sein, dass das Aufzählungszeichen noch davor passt. Das müssten eigentlich alle Überschneidungen sein. Ich hab das so gemacht weil ich schreibfaul bin. So ists am Wenigsten Quelltext.
Soll ich dafür besser eine Klasse erstellen, dass die Überschneidungen weg sind?

jojo87

Code

ul, li {
display: inline;
}

NyctalusNoctula

So. Danke für die Anregungen. Auf den Kommafehler wäre ich selbst nie gekommen. Ich habs jetzt ganz anderst gelöst. Jetzt sind auch die Überschneidungen weg.

Nochmal das css-File:

Code

p, ul, ol, li, div, td, th, address, blockquote, nobr, b, i, table {
 font-family:'Times New Roman'; color:#333333; }
p, ul, ol, li, div, td, th, address, blockquote { font-size:14pt; }
p, h1, h2, h3, div { padding:8px; }


li { margin-top:0px; margin-bottom:0px; list-style-position:inside; }


body { background-color:#A7C254; }
body  { margin:25px; textarea {
  color:#000000;
  scrollbar-base-color:#A7C254;
  scrollbar-3dlight-color:#ee8c00;
  scrollbar-arrow-color:#ee8c00;
  scrollbar-darkshadow-color:#ee8c00;
  scrollbar-face-color:#FFcc59;
  scrollbar-highlight-color:#FFcc59;
  scrollbar-shadow-color:#ee8c00;
  scrollbar-track-color:#A7C254;
} }


h1, h2, h3 { font-family:'Century Schoolbook'; }


h1 { color:#cc0000; font-size:27pt; margin-bottom:5px; }
h2 { color:#cc0000; font-size:22pt; margin-bottom:5px; }
h3 { color:#cc0000; font-size:17pt; margin-bottom:5px; }


td { background-color:#E3C764; valign:top; }


a:link { color:#CC0000; text-decoration:none; }
a:visited { color:#CC0000; text-decoration:none; }
a:active { color:#CC0000; text-decoration:none; }
a:hover { color:#CC0000; text-decoration:none; background-color:#A7C254; }


#menue a, #menue a:link, #menue a:visited, #menue a:active {
text-decoration:none;
display:block;
color:#CC0000;
padding:5px;
margin:2px;
background-color:#E3C764;
}
#menue a:hover {
text-decoration:none;
font-weight:bold;
display:block;
color:#CC0000;
padding:5px;
margin:2px;
background-color:#A7C254;
}
.hauptlink {
font-weight:bold;
width:155px;
}
.link {
font-weight:normal;
width:145px;
position:relative;
left:10px;
}

Alles anzeigen

und das menü:

Code

<div id="menue" class="hauptlink">[url='ambilight.php']Ambilight[/url]</div>
<div id="menue" class="link">[url='ambilight1.php']weitere Fotos[/url]
[url='ambilight2.php']Bauanleitung[/url]
[url='ambilight3.php']Stückliste[/url]
</div>

Problem mit css

Tags

Benutzer online in diesem Thema