[Erledigt] Abstand zwischen Block-Elementen

NikB · 28.06.2010, 17:41

Hi Leute,
ich hab mal ne kleine Frage bezüglich des Abstandes zwischen Block-Elementen. Ich habe 5 Links (<a>) als Inline-Block definiert und mithilfe von Margin den Abstand zwischen denen auf 0 Pixel gesetzt, sprich kein Abstand. Dennoch zeigt er mir im Browser eine kleine freie Fläche zwischen den Links, woran könnte das liegen. Die Links haben alle eine unterschiedliche Hintergrundfarbe.

Hier der Code aus der CSS:

Code:

a.aTopLink {
	margin:0px;
	padding:0px;
	width:120px;
	height:120px;
	display:inline-block;
}

Und hier der Code aus der HTML:

Code:

<div id="divTop">
	<a class="aTopLink" id="aTopLinkHome" href="index.html">
	</a>
	<a class="aTopLink" id="aTopLinkShared" href="shared.html">
	</a>
	<a class="aTopLink" id="aTopLinkAdd" href="add.html">
	</a>
	<a class="aTopLink" id="aTopLinkChat" href="chat.html">
	</a>
	<a class="aTopLink" id="aTopLinkProfile" href="profile.html">
	</a>
</div>

Und hier ein Screenshot aus dem Browser:

Die Boxen sollen halt alle nebeneinander angezeigt werden!

Hoffe, ihr habt da ne Lösung!

nikosch · 28.06.2010, 17:50

Am Zeilenumbruch. Entferne den oder benutze floating.

NikB · 28.06.2010, 18:36

Entschuldige, aber ich weiß leider gerade nicht, welchen Zeilenumbruch du meinst?
Den zwischen <a ...> und </a>?

nikosch · 28.06.2010, 18:36

Wie wärs mit ausprobieren!

NikB · 28.06.2010, 18:37

Hab ich, hab den entfernt. Gibt keinen Unterschied!

nikosch · 28.06.2010, 18:41

Du wartest jetzt ernsthaft drauf, das Dir das jemand vorbetet oder was?!

threadi · 28.06.2010, 18:43

Oder wie wärs mit seiner "ODER"-Anmerkung?

NikB · 28.06.2010, 18:45

Tut mir Leid, ich steh da echt auf dem Schlauch. Ich würde es nur ungerne mit Float machen!

Falls du den Umbruch nach der 4 Box meinst: Das Div "divTop" hat eine Breite von 600 px und die Links "aTopLink" sind jeweils 120 px breit, d.h. es müssten genau 5 hinpassen. Den Umbruch hat er automatisch erzeugt, da das ja nicht reinpasst, mit den Abständen dazwischen.

nikosch · 28.06.2010, 18:58

Man, es gibt im Code nicht so viele Umbrüche. Nimm halt alle raus und sieh was passiert. Verstehe nicht, wie man sich da jetzt so anstellen kann.

NikB · 28.06.2010, 19:03

Oh, entschuldige, du hattest von Anfang an Recht. Ich hatte wie oben beschrieben nur den Umbruch zwischen <a ...> und </a> entfernt. Ich wusste nicht, dass man auch die zwischen zwei Links entfernen muss. Ich hatte die Umbrüche ja auch nur der Übersicht halber gesetzt. Gibt es eine Möglichkeit, die Umbrüche im Editor angezeigt zu bekommen (der Übersichtlichkeit halber), aber im Browser keine Umbrüche darzustellen?
Ich danke schon mal für deine Antworten!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] display block und none	abdullah	PHP Tipps 2009	6	31.12.2009 15:08
[Erledigt] Verschiebung von div elementen bei include	dɥd	HTML, Usability und Barrierefreiheit	2	22.10.2009 21:36
Undefined variable Undefined property: block	xxJJxx	PHP Tipps 2008	16	05.08.2008 15:30
[Erledigt] ein- /-ausblenden von Elementen funktioniert ni unter IE	webber	JavaScript, Ajax und mehr	8	04.08.2008 01:50
[CSS] Block und Inline Element gleichzeitig....oder so		HTML, Usability und Barrierefreiheit	2	26.02.2006 23:31
block elemente nebeneinander		HTML, Usability und Barrierefreiheit	2	30.07.2005 12:12
mysql_fetch_assoc - Anlegen von Elementen mit leerem Inhalt		Datenbanken	6	28.04.2005 09:49
Mail inkl. all. Elementen speichern		Beitragsarchiv	5	29.12.2004 13:21
try / catch block ..		PHP-Fortgeschrittene	1	24.09.2004 08:04
bbcode - Classe		PHP-Fortgeschrittene	4	18.09.2004 17:30

28.06.2010, 17:41
NikB Benutzer Registriert seit: 28.06.2008 Beiträge: 77 PHP-Kenntnisse: Anfänger	[Erledigt] Abstand zwischen Block-Elementen Hi Leute, ich hab mal ne kleine Frage bezüglich des Abstandes zwischen Block-Elementen. Ich habe 5 Links (<a>) als Inline-Block definiert und mithilfe von Margin den Abstand zwischen denen auf 0 Pixel gesetzt, sprich kein Abstand. Dennoch zeigt er mir im Browser eine kleine freie Fläche zwischen den Links, woran könnte das liegen. Die Links haben alle eine unterschiedliche Hintergrundfarbe. Hier der Code aus der CSS: Code: a.aTopLink { margin:0px; padding:0px; width:120px; height:120px; display:inline-block; } Und hier der Code aus der HTML: Code: <div id="divTop"> <a class="aTopLink" id="aTopLinkHome" href="index.html"> </a> <a class="aTopLink" id="aTopLinkShared" href="shared.html"> </a> <a class="aTopLink" id="aTopLinkAdd" href="add.html"> </a> <a class="aTopLink" id="aTopLinkChat" href="chat.html"> </a> <a class="aTopLink" id="aTopLinkProfile" href="profile.html"> </a> </div> Und hier ein Screenshot aus dem Browser: Die Boxen sollen halt alle nebeneinander angezeigt werden! Hoffe, ihr habt da ne Lösung!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.06.2010, 17:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Am Zeilenumbruch. Entferne den oder benutze floating. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

28.06.2010, 18:36
NikB Benutzer Registriert seit: 28.06.2008 Beiträge: 77 PHP-Kenntnisse: Anfänger	Entschuldige, aber ich weiß leider gerade nicht, welchen Zeilenumbruch du meinst? Den zwischen <a ...> und </a>?

28.06.2010, 18:36
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wie wärs mit ausprobieren! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

28.06.2010, 18:37
NikB Benutzer Registriert seit: 28.06.2008 Beiträge: 77 PHP-Kenntnisse: Anfänger	Hab ich, hab den entfernt. Gibt keinen Unterschied!

28.06.2010, 18:41
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Du wartest jetzt ernsthaft drauf, das Dir das jemand vorbetet oder was?! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

28.06.2010, 18:43
threadi Benutzer Registriert seit: 03.03.2008 Beiträge: 57	Oder wie wärs mit seiner "ODER"-Anmerkung?

28.06.2010, 18:45
NikB Benutzer Registriert seit: 28.06.2008 Beiträge: 77 PHP-Kenntnisse: Anfänger	Tut mir Leid, ich steh da echt auf dem Schlauch. Ich würde es nur ungerne mit Float machen! Falls du den Umbruch nach der 4 Box meinst: Das Div "divTop" hat eine Breite von 600 px und die Links "aTopLink" sind jeweils 120 px breit, d.h. es müssten genau 5 hinpassen. Den Umbruch hat er automatisch erzeugt, da das ja nicht reinpasst, mit den Abständen dazwischen.

28.06.2010, 18:58
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Man, es gibt im Code nicht so viele Umbrüche. Nimm halt alle raus und sieh was passiert. Verstehe nicht, wie man sich da jetzt so anstellen kann. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

28.06.2010, 19:03
NikB Benutzer Registriert seit: 28.06.2008 Beiträge: 77 PHP-Kenntnisse: Anfänger	Oh, entschuldige, du hattest von Anfang an Recht. Ich hatte wie oben beschrieben nur den Umbruch zwischen <a ...> und </a> entfernt. Ich wusste nicht, dass man auch die zwischen zwei Links entfernen muss. Ich hatte die Umbrüche ja auch nur der Übersicht halber gesetzt. Gibt es eine Möglichkeit, die Umbrüche im Editor angezeigt zu bekommen (der Übersichtlichkeit halber), aber im Browser keine Umbrüche darzustellen? Ich danke schon mal für deine Antworten!