• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zeilenabstand geht nicht

Status
Für weitere Antworten geschlossen.
S

schlurpsel

Neues Mitglied
Hey Leute,
ich mache gerade ne Homepage auf der ich mehrere Bilder mit Aufzählungszeichen hintereinadner haben möchte, dazu habe ich folgenden Quelltext:

PHP: 
  <ul style="position:absolute; top:100px; left:100px; line-height:0px; ">
<a href="http://google.de" target="main"><li style="background:url(mitarbeiter.gif); line-height:0px; width:100px; height:20px;" ></li></a>
<a href="http://google.de" target="main"><li style="background:url(mitarbeiter.gif); line-height:0px;width:100px; height:20px;"  ></li></a>
</ul>

Beim IE habe ich zwischen den 2 Bildern einen Zeilenabstand, den ich aber nicht möchte. Beim FF ist er nicht da, da sind die Bilder ohne Abstand.

Was kann ich machen, damit auch beim IE die Bilder keinen Abstand haben?

schonma danke für Eure Hilfe
Grüße
schlurpsel
 
Links werden nicht um Aufzählungspunkte gelegt! Statt

Code: 
<a href="http://google.de" target="main"><li style="background:url(mitarbeiter.gif); line-height:0px; width:100px; height:20px;" ></li></a>

solltest du

Code: 
<li style="background:url(mitarbeiter.gif); line-height:0px; width:100px; height:20px;" ><a href="http://google.de" target="main"></a></li>

schreiben. Wenn du das korrigierst sollte zumindest der Firefox eine realere Ansicht bieten.
 
danke für die schnelle Antwort, aber leider hilft sie nicht. Der Abstand ist immer noch da und außerdem habe ich oben geschrieben, dass der Abstand beim FF gar nicht da ist.

Trotzdem danke
Bitte um weitere Hilfe
Grüße
schlurpsel
 
Der Code von dir ist nicht valide gewesen, daher meine Korrektur. Mitunter liegt es schon daran, dass etwas falsch angezeigt wird. Da ich die gesamte Seite nicht sehe kann ich nur raten, dass evtl. "display: block;" in den <li>-Tags helfen könnte.
 
hier der komplette Code:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Klappmenü</title>
</head>
<body onload="window.status='Klappmenü';">
<div style="width:800px; margin:auto;">
 <ul style="position:absolute; top:100px; left:100px; line-height:0px; ">
<li style="background:blue; line-height:0px; width:100px; height:20px; display:block;" ><a href="http://google.de" target="main"></a></li>
<li style="background:red; line-height:0px;width:100px; height:20px;  display:block;"  ><a href="http://google.de" target="main"></a></li>
</ul>
</div>
</body>
</html>

und der geht leider immer noch nicht, im IE ist der Abstand noch da. :-(
 
Also zwischen <ul> und <li> kannst du nicht einfach <a> schreiben.
wenn du <li> eine feste Höhe und Breite gibst hast du nur eine leere Box. Zum anklicken gibt es da noch nichts. Du mußt <a> eine Breite und Höhe geben.
<a> ist aber ein Inline-Element. Eine Höhe kann man nur Blockelementen geben. Dazu gibst du <a> display: block;

Jeder Verweis sollte ein Text enthalten. Wenn dich der Text im Design stört,
kannst du ihn aus dem Sichtbereich des Browserfensters schieben.
Suchmaschinen und Screenreader erkennen ihn trotzdem.

Wenn das alles beachtet ist, kann man sich den Bugs von den verschiedenen IE's annehmen.
In diesem Fall display: inline; für <li>.
html:
Code: 
<ul>
<li>
<a href="http://google.de" style="background-image:url(bild1.jpg);" target="main">
<span>mitarbeiter1</span>
</a>
</li>
<li>
<a href="http://google.de" style="background-image:url(bild2.jpg);" target="main">
<span>mitarbeiter2</span>
</a>
</li>
</ul>
css:
Code: 
ul li {
    list-style: none;
    display: inline; /*das behebt den störenden Abstand im IE*/
  }
ul li a {
    width:100px;
    height:20px;
    display: block;
    position: relative;

  }
ul li a span {
   position: absolute;
   top: -2000px;
   left: -2000px;
  }
 
danke hat geholfen, habe einfach vertial-align:bottom also style element eingefügt und es ging, einfach super dange.

schlurpsel

Beitrag kann geschlossen werden.
 
Hi,

neuroleptika schrieb:
Ich kenne die Bug-Namen nicht. Whitespace-Bug ist könnte richtig sein.
Zum Vergrößern anklicken....

oder auch Leerraum-Bug.
Die vermeintlich unerklärlichen Abstände zwischen Listenlinks die z.B. durch Umbrüche im Quelltext verursacht werden.
Meist bei horizontalen Navis.
Für vertikale war der Link gedacht.

Vielleicht wäre bei einem grafischen Menü besser das auf der Basis der Gilder/Levin-Technik zu machen.
Sind die Grafiken ausgeschaltet gibt es sonst nichts mehr zum Anklicken, wenn der Text per CSS aus dem Viewport geschoben wird.

Grundsätzlich bin ich mehr der Freund der Floatvariante bei horizontalen Menüs.

Vielleicht ist das aber alles zu pedantisch von mir.:-)

koslowski
 
Gilder/Levin-Technik

Mit der Gilder/Levin-Technik würde das dann so aussehen:
html:
Code: 
<ul>
<li>
<a href="http://google.de" >
mitarbeiter1<span style="background-image:url(bild1.jpg);"></span>
</a>
</li>
<li>
<a href="http://google.de" style="background-image:url(bild2.jpg);" >
mitarbeiter2<span style="background-image:url(bild2.jpg);" ></span>
</a>
</li>
</ul>
css:
Code: 
* {
    margin: 0;
    padding: 0;
  }


ul li {
    list-style: none;
    display: inline;
  }

ul li a {
    width:100px;
    height:20px;
    display: block;
    position: relative;

  }
ul li a span {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  }
Die Hintergrundgrafik wird mit span (position:absolute) über den Text geschoben.
Ohne Target ist es jetzt auch xhtml-strict.

Zu meinem ersten Beispiel:
Die Felder würden schon ohne Grafik anklickbar bleiben.
Nur würde man sie nicht mehr sehen.
Das float für li war nur um den IE-Bug zu umgehen. Das Menü würde durch das display:block; im <a> vertikal bleiben.

@Koslowski
Die Gilder/Levin-Technik ist natürlich besser geeignet.
 
Zuletzt bearbeitet:
Hallo,

Dein HTML ist semantisch gesehen noch fehlerhaft.
Du hast nur einen leeren Link in Deiner Liste.
Wenn die Images, die Du da anzeigen willst, Inhalt sind (was anzunehmen ist, weil ja sonst nichts da ist), dann sind die Images per <img>-Tag einzubinden und mit alt-Attribut zu versehen.

Nur Beiwerk, das kein Inhalt ist, bindet man als Hintergrund-Grafik ein.

Wie das gemeint ist, erkennst Du, wenn Du die Bilder in der Seite abschaltest. Dann siehst Du gar nichts mehr, und das kanns ja nicht sein, oder?

Aber nochmal, damit ich nicht falsch verstanden werde: Das ist keine Maßnahme, damit man was sieht, wenn man Images abschaltet, das ist eine Maßnahme, um Deine fehlerhafte Anwendung von HTML zu korrigieren und den Unterschied zwischen HTML (Auszeichnung) und CSS (Ausschmückung) aufzuzeigen.

Gruß,
-Efchen
 
Efchen schrieb:
Hallo,

Dein HTML ist semantisch gesehen noch fehlerhaft.
Du hast nur einen leeren Link in Deiner Liste.
Zum Vergrößern anklicken....
Nein, die Links enthalten Anchor-Texte (mitarbeiter1 und mitarbeiter2.)
<a> enthält zwar ein leeres Element jedoch ohne semantische Bedeutung.
Ich denke, dass kann man ruhigen Gewissens so machen.
Nur Beiwerk, das kein Inhalt ist, bindet man als Hintergrund-Grafik ein.
Zum Vergrößern anklicken....
Der Inhalt steht im a-Tag in Textform. Mit background-image lässt sich eine Schmuckschrift für sehende Benutzer über den Text legen.
Wie das gemeint ist, erkennst Du, wenn Du die Bilder in der Seite abschaltest. Dann siehst Du gar nichts mehr, und das kanns ja nicht sein, oder?
Zum Vergrößern anklicken....
Dann sieht man den Anchor-Text. Den kann man bei Gefallen auch optisch gestalten.
Aber nochmal, damit ich nicht falsch verstanden werde: Das ist keine Maßnahme, damit man was sieht, wenn man Images abschaltet, das ist eine Maßnahme, um Deine fehlerhafte Anwendung von HTML zu korrigieren und den Unterschied zwischen HTML (Auszeichnung) und CSS (Ausschmückung) aufzuzeigen.
Zum Vergrößern anklicken....
Das ist nur eine (deine) Meinung.
Diese Methode wird für ähnliche Zwecke (verlinkte Überschrift im Logo) auch von Gestaltern empfohlen, die sich intensiv mit Zugänglichkeit beschäftigen.
Das HTML enthält semantisch korrekt ausgezeichneten Inhalt (und ein span ohne Inhalt).
Es wurde lediglich eine Grafik zur optischen Gestaltung über den Text gelegt.

Natürlich kann man auch ein Bild mit alt-Text verwenden.
Ich finde es spricht jedoch nichts dagegen es mit background-image zu gestalten, wenn die Benutzbarkeit nicht leidet.
 
Zuletzt bearbeitet:
neuroleptika schrieb:
Nein, die Links enthalten Anchor-Texte...
Zum Vergrößern anklicken....
Entschuldige, da muss ich auf irgendwas anderes geantwortet haben. Das Posting von Dir lese ich jetzt zum ersten Mal, und da steht tatsächlich was drin im Link.

Typischer Fall von Altersteilzeit des Gehirns ;-)

Ich würde dem nicht widersprechen!

Wobei ich tatsächlich für echten Inhalt nicht unbedingt ein background-image verwenden würde, weil das doch u.U. verloren gehen könnte, z.B. beim Ausdruck, wenn man abstellt, dass Hintergründe mitgedruckt werden sollen. Aber am Bildschirm fällt mir jetzt auch keine Situation ein, bei der das in die Hose gehen würde.
Ein vermeintlicher Vorteil ist das mit den background-images noch, wenn man es dem Bilderklau schwerer machen will, die Browser, die eine Seite als volle Seite abspeichern, schaffen es nämlich noch nicht, auch im Stylesheet angegebene Grafiken zu laden und zu speichern.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben