Menü bei Mozilla eingerückt

[fiend]

Moin,

Ich komm einfach nicht weiter:

Mein Menü soll aus Bildschnipseln bestehen. Mit dem I-Explorer wir auch alles richtig angezeigt (ausser das die Links nicht funktionieren?!) bei Mozilla jedoch wird immer ein innen- bzw aussenabstand gelassen (Dafür funktionieren die Links hier).

www.pregnant-skapunk.de/website/neu/

Mein Stylsheet:

html,body{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background:#FFFFFF;
}
body{
 text-align:left;
 margin-top:0px 0px 0px 0px;
 padding:0px 0px 0px 0px;
}
#menu{
 /*Menü*/
 float:left;
 background:#FFFFFF;
 width:200px;
 height:470px;
 align:left;
 margin:0px 0px 0px 0px;
 padding:0px 0px 0px 0px;
 border:0px black solid;
}
#menu a{
 padding:0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
 align:left;
 font-size:0px;
}
#menu a:hover{
 padding:0px;
 margin:0px;
 align:left;
 font-size:0px;
}
/*Class für Bilder*/
.menu_bilder{
 width:198px;
 border:0px white solid;
 padding:0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
}

Mein Menü (Wird durch php eingefügt) :
<a onfocus="this.blur();" href="index.php?seite=start" target="_self"><div class="menu_bilder"><img src="../neu/menu/news.gif"></div></a>
<a onfocus="this.blur();" href="index.php?seite=band" target="_self"><div class="menu_bilder"><img src="../neu/menu/band.gif"></div></a>
<a onfocus="this.blur();" href="index.php?seite=live" target="_self"><div class="menu_bilder"><img src="../neu/menu/live.gif"></div></a>
<a onfocus="this.blur();" href="index.php?seite=equip" target="_self"><div class="menu_bilder"><img src="../neu/menu/equip.gif"></div></a>
<a onfocus="this.blur();" href="index.php?seite=contact" target="_self"><div class="menu_bilder"><img src="../neu/menu/contact.gif"></div></a>
<a onfocus="this.blur();" href="index.php?seite=guest" target="_self"><div class="menu_bilder"><img src="../neu/menu/guest.gif"></div></a>
<a onfocus="this.blur();" href="index.php?seite=friends" target="_self"><div class="menu_bilder"><img src="../neu/menu/friends.jpg"></div></a>

wie ihr seht hab ich alles was möglich ist auf 0px gesetzt.Und auch die leerzeichen zwischen den Elementen im Menü gelöscht...

hoffe mir kann jemand helfen.
ich danke euch

[Heinzelhund]

Hallo,

body{
text-align:left;
margin-top:0px 0px 0px 0px;
padding:0px 0px 0px 0px;

streich mal das 'top' bei margin.

Ciao
Heinzelhund

[rfb]

Moin

Beseitige erst einmal die 44 Fehler im HTML

Gruß
rfb

[fiend]

Moin

Beseitige erst einmal die 44 Fehler im HTML

Gruß
rfb

versteh das nicht.. ich eröffne doch mit zB <a> und schliesse mit </a>. Laut deinem Link ist das aber alles Falsch...

so hab ich das noch nie gesehen, wie es dort gezeigt wird.. ist das denn total falsch wie ich das gemacht habe?

[Jonathan]

Hallo,

versteh das nicht.. ich eröffne doch mit zB <a> und schliesse mit </a>. Laut deinem Link ist das aber alles Falsch...

Die meiste nFehlermeldungen sind Tags die du nicht richtig schließt. Di verwendest XHTML, da musst du alle Tags schließen. Auch <img> und sowas.

Das heißt eigentlich müsstest du sowas verwenden: <img src="..." alt="..."></img>.

Da gibt es aber auch noch ne bessere Kurzschreibweise: <img src="..." alt="..." />. Füge also in alle Tags die du nicht schließt ein Leerzeichen und einen Schrägstrich vor die schließende Klammer ein.

Jonathan

[rfb]

Moin

Das heißt eigentlich müsstest du sowas verwenden: <img src="..." alt="..."></img>.

das ist einfach falsch, da img inhaltsleer ist, korrekt ist hier ausschließlich die von dir sogenannte "Kurzschreibweise".

Gruß
rfb

[Jonathan]

Hallo,

<img src="..." alt="..."></img>.
das ist einfach falsch, da img inhaltsleer ist, korrekt ist hier ausschließlich die von dir sogenannte "Kurzschreibweise".

Das sehe ich anders. Vergleiche das Beispiel unter "Erläuterung" in http://de.selfhtml.org/html/xhtml/unterschiede.htm#leere_elemente. Natürlich darf zwischen den beiden Tags dann wirklich nichts sein, nicht mal ein Leerzeichen.

Jonathan

[Jonathan]

Hallo,

<a onfocus="this.blur();" href="index.php?seite=band" target="_self"><div class="menu_bilder"><img src="../neu/menu/band.gif"></div></a>

Ein <a /> darf kein <div />  div enthalten, weil ein inline-Element generell nur andere inline_Elemente aber keien Blockelemente erhalten darf. <img /> muss einen Alternativtext bekommen. Außerdem verhidert onfocus="this.blur();" die Navigation mit der Tastatur. Und target="_self" sieht auch ziemlich überflüssig aus. Zudem solltest du aus der Navigation eine Liste machen.

Jonathan

[fiend]

Wenn ich den <div />-tag auf alle Zeilen anwende, dann greift der leider gar nicht mehr.. muss ich den ganz driss aus der css datei löschen und diese Attribute in jede Zeile von:

<ahref="index.php?seite=band"><img src="../neu/menu/band.gif"></a>

einfügen?

<img /> muss einen Alternativtext bekommen.
Zudem solltest du aus der Navigation eine Liste machen.

magst du mir die beiden Hilfen nochmal näher erläutern. Bring mir das ganze gerade selber bei und bin daher noch nicht alzu fit..

ich danke dir

[fiend]

Habs gefunden!

<a href="index.php?seite=start" ><img src="../neu/menu/news.gif" border="0" align="top"></a><br>
<a href="index.php?seite=band"><img src="../neu/menu/band.gif" border="0" align="top"></a><br>
<a href="index.php?seite=live"><img src="../neu/menu/live.gif" border="0" align="top"></a><br>
<a href="index.php?seite=equip"><img src="../neu/menu/equip.gif" border="0" align="top"></a><br>
<a href="index.php?seite=contact"><img src="../neu/menu/contact.gif" border="0" align="top"></a><br>
<a href="index.php?seite=guest"><img src="../neu/menu/guest.gif" border="0" align="top"></a><br>
<a href="index.php?seite=friends"><img src="../neu/menu/friends.jpg" border="0" align="top"></a>

was müste ich aber machen um nicht in jeder zeile border=0 und align=top zu sagen? (also so klappt es ja auch..)

[Engin]

Hi,

was müste ich aber machen um nicht in jeder zeile border=0 und align=top zu sagen? (also so klappt es ja auch..)

Das kannst du in der CSS datei einmalig sagen

  
a img {border: none;}  
  
a img {vertical-align:top;}  

und in den img tags noch ein <img src="...." alt="alternativer Text">,
dann passt dat.
Vlt. noch die width und height angaben bei den Bildern, dann ruckelt
das nicht so beim laden der Seite.

Grüße,
Engin
 GYRO

[Jonathan]

Hallo,

was müste ich aber machen um nicht in jeder zeile border=0 und align=top zu sagen? (also so klappt es ja auch..)

Versuche mal im css:

a img{border:none;vertival-align:top;}

Den Rahmen solltest du in jedem Fall wegkriegen, beim align bin ich mir da nicht sicher ob mein Ansatz richtig ist.

<img /> muss einen Alternativtext bekommen.
Zudem solltest du aus der Navigation eine Liste machen.
magst du mir die beiden Hilfen nochmal näher erläutern. Bring mir das ganze gerade selber bei und bin daher noch nicht alzu fit..

1. <img> brauch einen Alternativtext damit z.B. auch Suchmaschinenroboter und Browser, die keine Grafiken laden, wissen, was sich hinter dem Bild verbirgt.

mache also z.B. folgendes: <img src="../neu/menu/news.gif" alt="News"> (beachte das alt-Attribut)

2. Es ist sinnvoller die Links nicht durch <br> zu trennen sondern in eine Liste (<ul>) zu packen. Vereinfacht:

<ul class="navigation">
<li><a href="[...]"><img [...]></a></li>
<li><a href="[...]"><img [...]></a></li>
<li><a href="[...]"><img [...]></a></li>
<li><a href="[...]"><img [...]></a></li>
</ul>

Wenn dich dann die Listenbullets oder die Einrückungen stören, die kann man auch über CSS wieder entfernen:

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

(aus dem Kopf raus, wenn das so nicht klappt hast du aber zumindest die Stichwörter nachdenen du suchen solltest)

Jonathan

[Jonathan]

Hallo,

a img{border:none;vertival-align:top;}

Ich meine natürlich "vertical-align".

Jonathan