[jjelliss]

Hallo,

jeder der mal ins Forum JavaScript geschaut hat - weis worum es geht! (Problem mit onMouseOver und PHP Fotogalerie)
Ich habe einen Bildwechsel jetzt mit CSS hinbekommen!
Habe aber ein Problem.
Ich muss überall den a Tag (a:link,a:active,a:visited,a:focus) auf eine Breite von 300 Pixeln und eine höhe von 49 Pixeln bekommen!
Hier ist die Seite um die es geht: http://www.happyjumble.de/test/
Der CSS Codes dazu lautet:

.menue { border:none; display:block; margin:0px; padding:0px; }
.menue li a { border:#00CC00 1px solid; width:300px; height:49px; }
.menue li { width:300px; height:49px; }
.menue #band { background:url(navi/3.gif) no-repeat; }
.menue #band:hover { background:url(navi/3_3.gif) no-repeat; }
.menue #onstage { background:url(navi/4.gif) no-repeat; }
.menue #onstage:hover { background:url(navi/4_4.gif) no-repeat; }
.menue #fotos { background:url(navi/2.gif) no-repeat; }
.menue #fotos:hover { background:url(navi/2_2.gif) no-repeat; }
.menue #gb { background:url(navi/5.gif) no-repeat; }
.menue #gb:hover { background:url(navi/5_5.gif) no-repeat; }
.menue #kontakt { background:url(navi/1.gif) no-repeat; }
.menue #kontakt:hover { background:url(navi/1_1.gif) no-repeat; }
.menue #links { background:url(navi/6.gif) no-repeat; }
.menue #links:hover { background:url(navi/6_6.gif) no-repeat; }

und der PHP / HTML Code lautet:

        <ul class="menue">
        <li id="band"><a href="<? $_SERVER['PHP_SELF'] ?>?menu=band"><span><!-- Band --></span><br /></a></li>
        <li id="onstage"><a href="<? $_SERVER['PHP_SELF'] ?>?menu=onstage"></a></li>
        <li id="fotos"><a href="<? $_SERVER['PHP_SELF'] ?>?menu=fotos"></a></li>
        <li id="gb"><a href="<? $_SERVER['PHP_SELF'] ?>?menu=gb"></a></li>
        <li id="kontakt"><a href="<? $_SERVER['PHP_SELF'] ?>?menu=kontakt"></a></li>
        <li id="links"><a href="<? $_SERVER['PHP_SELF'] ?>?menu=links"></a></li>
        </ul>

Ich habe extra den Border in Grüner Farbe als Hilfe für mich dargestellt.
Wieso hat das bei li funktioniert und bei a nicht???

Es wäre nett wenn mir da einer helfen könnte mal von euch!

Danke

[Bleistift]

Versuchs mal so:
.menue>li>a { border: 1px solid #00CC00; width:300px; height:49px; }

[jjelliss]

Zitat von Bleistift

Versuchs mal so:
.menue>li>a { border: 1px solid #00CC00; width:300px; height:49px; }

Geht leider auch nicht

[Bleistift]

Dann vielleicht so:
.menue>li>a { border: 1px solid #00CC00; width:300px; height:49px; display: block }

[jjelliss]

Es geht ^^

Danke

und - auch danke für die wirklich sehr schnelle Antwort

Nur - eine Frage!

Was hast du jetzt anders gemacht?
Was bedeutet in CSS > ??

[Artemis]

Dass es jetzt funktioniert liegt sehr wahrscheinlich nur am Zusatz display: block, deshalb würde ich die > wieder rausnehmen, da dieser im IE nicht funktioniert.

http://www.css4you.de/wscss/css04.html#childselector

[Basti]

Hallo „JJelliss”.

Schau dir doch mal diese Beispiele aus Down Under an:

http://css.maxdesign.com.au/listamatic/

Die HTML-Vorlage ist ein wenig unsinnig, da es ja reicht, die Liste (Tag ul) einer css-Klasse zuzuordnen, aber das sind ja Kleinigkeiten.

Basti

[jjelliss]

Hallo,

das erste Problem ist ja jetzt gelöscht! Aber nun hab ich noch ein Problem mit dem gleichen Code!
Er funktioniert absolut nicht im IE 6.
Hier vielleicht noch mal mein CSS Code:

/* Menü */
.menue { border:none; display:block; margin:0px; padding:0px; color:#000000; }
.menue>li>a { border:none; width:300px; height:49px; display:block; border:1px solid #00FF00; }
.menue #band { background:url(../images/navi/3.gif) no-repeat; }
.menue #band a:hover { background:url(../images/navi/3_3.gif) no-repeat; }
.menue #onstage { background:url(../images/navi/4.gif) no-repeat; }
.menue #onstage a:hover { background:url(../images/navi/4_4.gif) no-repeat; }
.menue #fotos { background:url(../images/navi/2.gif) no-repeat; }
.menue #fotos a:hover { background:url(../images/navi/2_2.gif) no-repeat; }
.menue #gb { background:url(../images/navi/5.gif) no-repeat; }
.menue #gb a:hover { background:url(../images/navi/5_5.gif) no-repeat; }
.menue #kontakt { background:url(../images/navi/1.gif) no-repeat; }
.menue #kontakt a:hover { background:url(../images/navi/1_1.gif) no-repeat; }
.menue #links { background:url(../images/navi/6.gif) no-repeat; }
.menue #links a:hover { background:url(../images/navi/6_6.gif) no-repeat; }

Dazu vielleicht auch noch mein HTML Code:

		<td id="ldown" style="background:url( <? navpic(); ?> )">
		<ul class="menue">
		<li id="band"><a href="<? $_SERVER['PHP_SELF'] ?>?menue=band"></a></li>
		<li id="onstage"><a href="<? $_SERVER['PHP_SELF'] ?>?menue=onstage"></a></li>
		<li id="fotos"><a href="<? $_SERVER['PHP_SELF'] ?>?menue=galerie"></a></li>
		<li id="gb"><a href="<? $_SERVER['PHP_SELF'] ?>?menue=gb"></a></li>
		<li id="kontakt"><a href="<? $_SERVER['PHP_SELF'] ?>?menue=contact"></a></li>
		<li id="links"><a href="<? $_SERVER['PHP_SELF'] ?>?menue=links"></a></li>
		</ul>
</td>

Das :hover nur mit einem a Tag im IE 6 geht weis ich, aber - bei mir trotzdem nicht

wie gesagt - dank des ersten Threads klappt es jetzt im FF reibungslos!
Das klappt alles super, nur wieder mal bekanntlich nicht mit dem Microsch... Internet Explorer 6

Ich wäre froh, wenn mir da jemand noch einmal helfen könnte bitte!

[WarrenFaith]

Nur zur Vollständigkeit: Bildwechsel mit CSS Problem
Eigentlich könnten wir da noch weitermachen, da es ja das gleiche Problem ist.
@Admins bitte zusammenlegen

Der IE 6 kann keine Vererbungszeichen (das >) daher sollte das helfen:

menue li a { border:none; width:300px; height:49px; display: block }

Und ich empfehle mal ein Blick darauf: http://validator.w3.org/check?verbos...e.de%2Ftest%2F

[jjelliss]

stimmt.
@Admin: Danke ^^

so - ich habs geändert. Funktioniert zwar im FF wie immer - aber im IE 6 nicht!

[WarrenFaith]

Kannst du dein Onlinebeispiel bitte updaten?
Da sind die > noch drin...

[jjelliss]

hab ich doch!

Also - die sind definitiv raus! ^^

[WarrenFaith]

.menue>li>a { border:none; width:300px; height:49px; display: block }

Zeigt mir mein Web Developer an und auch Firebug. Irgendwie scheint da bei dir was falsch zu laufen
dein Onlinebeispiel ist doch das hier richtig http://www.happyjumble.de/test/

[jjelliss]

ohhh, mist *mit Kopf auf Tisch knall* ^^

Entschuldige bitte.
Nein - es geht jetzt alles so wie es soll.
Die URL ist http://www.happyjumble.de/v2/

Entschuldige bitte

[WarrenFaith]

Bei deinem Titel haut was nicht hin:

<title><br />
<b>Notice</b>: Undefined index: menue in <b>/home/www/web2/html/v2/includes/functions.php</b> on line <b>54</b><br />
<br />
<b>Notice</b>: Undefined index: menue in <b>/home/www/web2/html/v2/includes/functions.php</b> on line <b>56</b><br />
Happy Jumble</title>

Und für die Navigation oben:
Wenn ich dort drüberfahre, wackelt alles, weil durch die angezeigten Ränder sich die Abstände verändern (Linux Firefox).
Um das zu vermeiden lieber die Ränder immer anzeigen und die Farbe des Hintergrundes zuweisen.

Das aber nur als kleine Verbesserungen

[jjelliss]

Guten Morgen,

??? wie - du meinst im Linux Firefox das obere Menü?

ohhh , also im FF, IE 7 und IE 6 (alles jeweils Windoof) änert sich der Rand nicht hmmm

Woran kann das liegen?
Ich hab schon die Höhe auf 24px

und mit dem Titel der Seite - das ist jetzt normal ^^
da arbeite ich dran

[WarrenFaith]

ich hab mal ein screenie gemacht:
unter windows ff wackelts auch, nur nicht so heftig wie im linux ff

also den rand den man um "on stage" sieht, den meine ich, der wird nur bei hover angezeigt und dadurch wackelt die navigation, dass ist unglücklich

[FloB]

OK, kurze Ergänzung / Zusammenfassung: Höhen- und Breitenangaben werden nur bei Block- und nicht bei Inline-Elementen angenommen. Also immer bei Inline-Elementen noch ein "display:block;" anfügen!

[jjelliss]

hallo, entschuldige bitte

Aber - das verstehe ich grad nich

[WarrenFaith]

Als Erklärung von Block- und Inline-Elementen: http://www.css4you.de/elemente.html#block
Dadurch sollte auch verständlich werden, warum Höhen- und Breitenangaben nur bei Blockelementen verwendet werden.