[Erledigt] Unerklärlicher Rahmen

chunky · 10.05.2011, 16:34

Schaut euch mal bitte dieses Beispiel an.

Code:

<div id="page" style="min-width:500px;max-width:1000px;">
	
	<div style="padding:0px;margin:0px;font-size:1px;">
		<img src="/header.jpg" alt="" width="100%" style="padding:0px;margin:0px;">
	</div>

	<div align="left" style="padding:0px;margin:0px;">
		content<br>
		content<br>
		content<br>
	</div>
</div>

Die ganzen Style-Definitionen habe ich beim Debuggen hinzugefügt.
Denn wenn ich den roten Code-Teil entferne, dann bekomme ich einen wenige Pixel großen Spalt zwischen dem ersten Div-Container und dem zweiten.
Wie bekomme ich das weg? Die font-size auf 1 zu setzen ist keine gute Lösung.

nikosch · 10.05.2011, 16:35

Firebug installieren und herausfinden!

chunky · 10.05.2011, 16:42

Und wonach soll ich dann Ausschau halten?
Ich habe mir das schon mit dem Inspektor von Chrome angeschaut.
Am Boden vom Div mit dem Header-Bild entsteht dieser Spalt (zwischen Bild und Ende des Containers). Sowohl der Container als auch das Bild paddings und margins von 0px.

nikosch · 10.05.2011, 16:43

Ich würde erstmal den Whitespace rausnehmen.

chunky · 10.05.2011, 16:50

Ich weiss nicht, was du meinst.
Das einzige, was (vom Body) vererbt wird, ist eine font-size von 13px.

Chriz · 10.05.2011, 17:15

Zitat:

Zitat von nikosch

Ich würde erstmal den Whitespace rausnehmen.

Zitat:

Zitat von chunky

Ich weiss nicht, was du meinst.

Whitespace, also Zeilenumbrüche, Tabs, Leerzeichen werden vom Browser durchaus interpretiert, nämlich als insgesamt 1 Leerzeichen. Dadurch entsteht deine Lücke möglicherweise. Da der Platz für ein Leerzeichen unter anderen von der Schriftgröße abhängt, kannst du diesen Platzbedarf durch Änderung der font-size manipulieren.

Statt

Code:

<tag>
  <neuer Tag>
</tag>

einfach

Code:

<tag><neuer Tag></tag>

schreiben, eben Whitespace entfernen.

ChrisB · 10.05.2011, 20:26

Stichwort: Unterlängen.

Abhilfe: display:block für's Bild.

chunky · 11.05.2011, 11:54

Okay, danke für die Erklärung. Die Leerzeichen zu entfernen hat nichts gebracht.
"Display: block" fürs Bild hingegen schon. Danke.

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
imagecopy() Abgerundeter Rahmen auf Bild mit Transparenz	daniels.	PHP-Fortgeschrittene	8	11.06.2010 13:36
[Erledigt] CSS Rahmen verschieben	Schadstoff	HTML, Usability und Barrierefreiheit	5	29.05.2009 13:04
GD Lib - Bild ohne Rahmen erzeugen	ocean85	PHP Tipps 2009	5	27.05.2009 10:30
CSS Problem beim Bilder Rahmen.	c01001	HTML, Usability und Barrierefreiheit	10	24.01.2007 03:02
Rahmen einer Tabelle mit CSS	r-ene	HTML, Usability und Barrierefreiheit	4	07.09.2006 12:15
Rahmen mit runden Ecken	andrew22	HTML, Usability und Barrierefreiheit	2	06.04.2006 14:13
Warum funzt Rahmen um <tr> nicht?	c-f-g	HTML, Usability und Barrierefreiheit	4	01.03.2006 17:41
Rahmen um Tabelle	Simon9990	HTML, Usability und Barrierefreiheit	4	03.01.2006 19:31
Grafiktool zum einach Rahmen erstellen?	robo47	Beitragsarchiv	23	10.06.2005 05:54
Problem mit Rahmen mit und ohne CSS		HTML, Usability und Barrierefreiheit	6	09.05.2005 22:40
Tabellen Rahmen		HTML, Usability und Barrierefreiheit	2	17.04.2005 16:35
Grafiken als Rahmen verwenden?!	CSS	HTML, Usability und Barrierefreiheit	8	03.03.2005 20:49
[Erledigt] bilder als links OHNE rahmen verzweifel		HTML, Usability und Barrierefreiheit	4	02.03.2005 11:57
[Erledigt] Rahmen um Tabelle		HTML, Usability und Barrierefreiheit	6	05.08.2004 09:19
tabelle mit dünnem rahmen!!		HTML, Usability und Barrierefreiheit	11	12.06.2004 02:02

10.05.2011, 16:34
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	[Erledigt] Unerklärlicher Rahmen Schaut euch mal bitte dieses Beispiel an. Code: <div id="page" style="min-width:500px;max-width:1000px;"> <div style="padding:0px;margin:0px;font-size:1px;"> <img src="/header.jpg" alt="" width="100%" style="padding:0px;margin:0px;"> </div> <div align="left" style="padding:0px;margin:0px;"> content<br> content<br> content<br> </div> </div> Die ganzen Style-Definitionen habe ich beim Debuggen hinzugefügt. Denn wenn ich den roten Code-Teil entferne, dann bekomme ich einen wenige Pixel großen Spalt zwischen dem ersten Div-Container und dem zweiten. Wie bekomme ich das weg? Die font-size auf 1 zu setzen ist keine gute Lösung.


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

10.05.2011, 16:35
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Firebug installieren und herausfinden! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

10.05.2011, 16:42
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Und wonach soll ich dann Ausschau halten? Ich habe mir das schon mit dem Inspektor von Chrome angeschaut. Am Boden vom Div mit dem Header-Bild entsteht dieser Spalt (zwischen Bild und Ende des Containers). Sowohl der Container als auch das Bild paddings und margins von 0px.

10.05.2011, 16:43
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich würde erstmal den Whitespace rausnehmen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

10.05.2011, 16:50
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Ich weiss nicht, was du meinst. Das einzige, was (vom Body) vererbt wird, ist eine font-size von 13px.

10.05.2011, 20:26
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Stichwort: Unterlängen. Abhilfe: display:block für's Bild. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

11.05.2011, 11:54
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Okay, danke für die Erklärung. Die Leerzeichen zu entfernen hat nichts gebracht. "Display: block" fürs Bild hingegen schon. Danke.