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

Lücke zwischen Buttons

  • Ersteller Ersteller Tim110
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
T

Tim110

Guest
Hallo!
Ich habe dieses Script und der Mouseover-Effekt funktioniert auch problemlos. Nur ist hier zwischen den einzelnen Bildern ein lästiger Freiraum. Geht das nicht, dass die einzelnen Buttons bei diesem Script direkt nebeneinander liegen und sich sozusagen berühren?

Danke im Voraus!
mfg

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style type="text/css">
<!--
a { 
padding:7px;
font-size:14px;
font-family:Verdana, Arial, sans-serif;
color:#000;
text-decoration:none;
text-align:center;
border:0px solid #000;
background-image:url(Home_blue2.jpeg);
}
a:hover {
background-image:url(Home_orange2.jpeg);
}
-->
</style>
</head>
<body>
<a href="x">Button1</a>
<a href="x">Button2</a>
<a href="x">Button3</a>
<a href="x">Button4</a>
</body>
</html>
 
assmaje, deine Antwort war verkehrt.
padding ist der Innenabstand und ändert an der Lücke nichts.

Zwischen <a> und </a> ist ein Leerraum.
Entweder du schreibst alle a-Tags ohne Leerzeichen in eine Zeile oder du fügst ein weiteres Leerzeichen innerhalb von <a> ein. Die Browser würden nur das erste Leerzeichen interpretieren und die folgenden ignorieren:
Code: 
 <a href="x">Button1 </a>
 <a href="x">Button2 </a>
 <a href="x">Button3 </a>
 <a href="x">Button4 </a>
So sind die Leerzeichen innerhalb vom <a>-Element. Die weiteren Leerzeichen (bzw. Zeilenumbrüche) werden ignoriert.

Die Lücke würde sich auf anderem Wege auch mit css entfernen lassen.
Vor dem Einsatz von css gilt es aber html zu verstehen.
 
Zuletzt bearbeitet:
neuroleptika schrieb:
assmaje, deine Antwort war verkehrt.
padding ist der Innenabstand und ändert an der Lücke nichts.
Zum Vergrößern anklicken....
Padding erzeugt - wie du schon sagtest - einen Innenabstand. Tim110 wollte die "Lücke" (=Abstand) entfernen, deshalb habe ich spontan geantwortet, dass er das padding weglassen soll. Aber natürlich hast du recht, das Leerzeichen ist mir gar nicht aufgefallen. :)
 
Efchen schrieb:
Falsch. Zeilenumbrüche werden wie white-spaces gehandlet und erzeugen somit ein Leerzeichen.

Gruß,
-Efchen
Zum Vergrößern anklicken....
Ist nicht falsch.

Bei zwei white-spaces wird nur das erste im Browser angezeigt.
Egal ob durch Zeilenumbruch oder Leerzeichen.
Wenn das erste Leerzeichen im Inline-Element steht, werden die darauf folgenden ignoriert. Deshalb habe ich es in <a> geschrieben.
Code: 
<p>Wort1<span>Wort2 </span> Wort3</p>
Der white-space hinter Wort2 wird dargestellt. Der hinter </span> nicht.
Ohne das Leerzeichen hinter Wort2 würde das Leerzeichen zwischen </span> und Wort3 dargestellt werden.

Aus dieser Regel macht der IE5 und IE6 auch den doppelte Zeilenumbruch (Bug) in ungefloateten Listen mit <a> in <li> wenn zwischen <li> und </li> ein Zeilenumbruch steht.
 
Zuletzt bearbeitet:
Ich hätte angenommen, dass bei Deinem Beispiel mit den Links das erste Leerzeichen im Link landet und das auf das schließende Tag folgende Newline dann ein Leerzeichen ohne Link erzeugt. Das würde für mich Sinn ergeben. Ich bin aber ehrlich gesagt jetzt zu faul, das auszuprobieren...ist zu heiß dafür :-D
 
Efchen schrieb:
Ich hätte angenommen, dass bei Deinem Beispiel mit den Links das erste Leerzeichen im Link landet und das auf das schließende Tag folgende Newline dann ein Leerzeichen ohne Link erzeugt......
Zum Vergrößern anklicken....
Inlineelemente bleiben im gegensatz zu Blockelementen ja im Textfluss.
Ob die Leerzeichen durch <span> oder <a> getrennt werden spielt keine Rolle.
Für den Browser bleiben es zwei Leerzeichen hintereinander.

In Listen mit display:inline; führt das manchmal zu Verwunderungen.
Die Listenpunkte werden im Quelltext gerne untereinander geschrieben.
Dabei kommt es auch zu diesen Abständen.
Der Abstand verschwindet wenn man ein Leerzeichen vor Abschluss von <li> oder dem darin enthaltenen inlineelement setzt.

Code: 
<p>text <span style="background-color: blue;">text </span> text</p>
Das blaue "white-space" wird dargestellt. Das dahinter nicht.

Mir ist auch zu heiß.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben