CSS Validator Fehler, wie beheben?!

[Phleiar]

Der CSS Validator gibt mir einen Fehler aus und zwar folgenden:

1. Line 20, Column 39: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. <li><a href="bla.html"><p class="one">Home</p><img src="spacer.gif" width="84"usw usw

Also das bild is nurn spacerbild damit ich das ganze Listenelement anklicken kann und p ist innerhalb von a damit die a:hover effekte auch auf den text angewendet werden können, d.h. einmal #navi li:hover{...} und einmal ul#navi li a:hover{..}.
Was ich mich jetzt frage ist, wie ich das anders regeln soll oO
wäre nett wenn mir jmd mal etwas dazu sagen könnte, im browser funktioniert zwar alles, aber wie gesagt der CSS validator spuckt den fehler aus..
mfg Phleiar

 

[nichtsgeht]

Du kannst das Blockelement p nicht in das Inline-Element a schreiben. Benutze statt p einfach span, das müßte gehen.

<li><a href="bla.html"><[COLOR=Red]span[/COLOR] class="one"[B]>[/B]Home</[COLOR=Red]span[/COLOR]>

Welche Elemente innerhalb bestimmter Elemente zugelassen sind, kannst du auch in dieser Tabelle nachlesen.
HTML bis PHP - HTML-Elemente

 

[koslowski]

Hi Phleiar,

soweit ich weiß ist <p> innerhalb von <a> nicht erlaubt.

Ich würde im Quelltext eher:

<li><a href="bla.html">Home<img src="spacer.gif" width="84"usw usw

das <p> einfach streichen.

Hovereffekte formatierst du am besten so z.B:

#container a:hover,
#container a:focus  {
    color:farbe;
   background-color:andereFarbe;
}

soll die ganze Fläche von a anklickbar sein mußt du ihm display:block; geben.

das hier:

#navi li:hover{...}

funktioniert im IE6 leider nicht da er :hover nur in Verbindung mit a akzeptiert.

Gruß
koslowski

edit: Mist, zu langsam!:-)

 

[Phleiar]

naja das problem dabei ist aber dass man span klassen irgendwie keine margin werte zuweisen darf-.-

 

[nichtsgeht]

Dann kann ich nur noch sagen, nehme den Besispiel von koslowski und Formatiere die Elemente mit display: block

 

[Phleiar]

naja das prob ist, die einzelen texte in der navi müssen mit unerschiedlichen margin werten formatiert werden, weil die von natur aus nicht auf einer höhe sind, weil sie unterschiedliche zeilenanzahlen haben

 

[koslowski]

Hi Phleiar,

naja das problem dabei ist aber dass man span klassen irgendwie keine margin werte zuweisen darf-.-

stimmt, margin-top/bottom funktioniert bei Inlineelementen irgendwie nicht.:???:

Du kannst die Höhe der Zeile allerdings durch font-size und line-height beeinflussen.
Bitte denk daran es so zu schreiben line-height:1.7; und nicht z.B.
line-height:1.7em;

Wenn du keine Maßeinheit bei line-height angibst, beträgt es wie im Beispiel immer genau das 1,7fache der Schriftgröße.
Gibst du eine Maßeinheit an, kann es durch Vererbung zu seltsamen Effekten kommen.

Gruß
koslowski

 

[Phleiar]

ich will die größe net verändern, ich will den text so paar pixel runterversetzen quasi wie mit br

 

[koslowski]

Hi,

ich will die größe net verändern, ich will den text so paar pixel runterversetzen quasi wie mit br

tja, hast du es mal mit  zum Texttieferstellen probiert.
Vielleicht langt das.

Muss vielleicht in Verbindung mit line-height getestet werden.

Gruß
Klaus

 

[Maxi]

Für Fragen zum Validator ist dieser fixierte Thread gedacht:
http://www.html.de/css/14938-css-validator-bedeuten-diese-fehler.html

Hier geschlossen.