nicht angemeldet
ungewollte Abstände zwischen 2 DIVs
0 0 
Gunnar Bittersmann
ungewollte Abstände zwischen 2 DIVs
Hi.
Häng schon ziemlich lang an nem Design und versteh einfach nicht warum u.a. FF3, Safari3, Opera9.5, ... zwischen "Line" und "Content" einen Abstand reinbasteln. Der Content soll direkt unter die Line kommen. Kann mir jemand helfen? Schon vorab 1000 Dank!!!
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Design Test</title>
<style><!--
body {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
text-align: center;
}
div#dsg_headerback {
width: 100%;
height: 122px;
background-color: #880000;
text-align: center;
margin: 0px;
}
div#dsg_header {
width: 1000px;
height: 122px;
background-color: #FF0000;
margin: 0px auto 0px auto;
}
div#dsg_lineback {
width: 100%;
height: 38px;
background-color: #008800;
text-align: center;
margin: 0px;
}
div#dsg_line {
width: 1000px;
height: 38px;
background-color: #00FF00;
margin: 0px auto 0px auto;
}
div#dsg_content {
width: 1000px;
min-height: 800px;
background-color: #CCCCCC;
margin: 0px auto 0px auto;
text-align: left;
}
--></style>
</head>
<body>
<div id="dsg_headerback">
<div id="dsg_header"></div>
</div>
<div id="dsg_lineback">
<div id="dsg_line"></div>
</div>
<div id="dsg_content">
<h1>Page Überschrift</h1>
<div class="item">
<h2>Item1 Überschrift</h2>
<div>
Inhalt bla bla bla bla bla bla bla und noch ein bisschen mehr.
</div>
</div>
<div class="item">
<h2>Item2 Überschrift</h2>
<div>
Inhalt bla bla bla bla bla bla bla und noch ein bisschen mehr.
</div>
</div>
</div>
</body>
</html>
-
Wenn ich den Inhalt des Content-DIVs weglasse, dann passt alles. Wieso beeinflusst der Inhalt den Abstand des DIVs nach oben?
-
@@Illthis:
Häng schon ziemlich lang an nem Design und versteh einfach nicht warum u.a. FF3, Safari3, Opera9.5, ... zwischen "Line" und "Content" einen Abstand reinbasteln.
Wegen des im Browserstylesheet gesetzten 'margin-top' für 'h1'.
<?xml version="1.0" encoding="iso-8859-1"?>
Du willst IE 6 in den Quirks-Modus schicken?!
Warum gibst du die Zeichencodierung für Tagsoup-Parser nicht an?
<style><!--
Fehler: 'type'-Pflichtattribut fehlt.
Die HTML-Auskommentierung von Stylesheets ist unsinnig.
<h1>Page Überschrift</h1>
Die Verwendung von Zeichen-Entity-Referenzen ebenso. [QA-ESCAPES]
<div class="item">
Bitte lass mich eine Liste sein?!
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
@@Illthis:
Häng schon ziemlich lang an nem Design und versteh einfach nicht warum u.a. FF3, Safari3, Opera9.5, ... zwischen "Line" und "Content" einen Abstand reinbasteln.
Wegen des im Browserstylesheet gesetzten 'margin-top' für 'h1'.
Und wie löst man das Problem? Wieso wirkt das 'margin-top' des H1-Tags über den DIV, in dem es sich befindet, hinaus? Wenn ich eine Leerzeile (<p> </p>) über dem H1-Tag einfüge, habe ich das gleiche Problem. Auch wenn ich einen weiteren DIV in den Content-DIV um den Inhalt lege.
<?xml version="1.0" encoding="iso-8859-1"?>
Du willst IE 6 in den Quirks-Modus schicken?!
Nicht direkt, ich gebe einfach nur die XML Deklaration an, weil alle XML Dokumente diese haben sollten und die Seite damit kompatibel zur Verwendung mit XML wird. Netter Nebeneffekt ist, dass man sich oft eine Browserweiche für den IE7 spart, da IE5, IE6 und IE7 dann sehr ähnlich interpretieren, weil man damit IE7 in den Quirks-Modus schickt. Sag mit, wenn ich mich täusche.
Warum gibst du die Zeichencodierung für Tagsoup-Parser nicht an?
Hab ich nie gemacht/gesehen. Warum sollte man sie angeben und an welcher Stelle? Senden über den Header?!
<style><!--
Fehler: 'type'-Pflichtattribut fehlt.
Stimmt, im Original verwende ich eine externe CSS-Datei. Danke!
Die HTML-Auskommentierung von Stylesheets ist unsinnig.
Ich dachte, dass man dadurch verhindert, dass bei sehr alten Browsern, die CSS nicht unterstützen, der CSS Code als Text ausgegeben wird?! Ist das flasch? Oder meinst du es ist unsinnig, weil keiner mehr einen so alten Browser benutzen sollte?
<h1>Page Überschrift</h1>
Die Verwendung von Zeichen-Entity-Referenzen ebenso. [QA-ESCAPES]
Dankeschön, die werd ich mir in Zukunft auf jeden Fall sparen. :)
<div class="item">
Bitte lass mich eine Liste sein?!
Nein, dieser DIV soll keine Liste werden, habe nur den Namen "item" für eine beliebige Klasse gewählt, die ich später formatieren will.
-
Danke für den Tipp mit margin-top bei H1!!! Bin jetzt selbst auf eine Lösung gekommen, die verhindert, dass der Text ganz am Rand steht, ohne dass dabei Browserweichen bei IE wegen padding nötig werden. Warum sich das margin-top des H1-Tags aber über den DIV hinaus auswirkt ist mir dennoch unverständlich. Würde mich über eine Erklärung freuen.
Viele Grüße, Illthis.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Design Test</title> <style type="text/css"><!-- body { margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; background-color: #FFFFFF; text-align: center; } div#dsg_headerback { width: 100%; height: 122px; background-color: #880000; text-align: center; margin: 0px; } div#dsg_header { width: 1000px; height: 122px; background-color: #FF0000; margin: 0px auto 0px auto; } div#dsg_lineback { width: 100%; height: 38px; background-color: #008800; text-align: center; margin: 0px; } div#dsg_line { width: 1000px; height: 38px; background-color: #00FF00; margin: 0px auto 0px auto; } div#dsg_main { width: 1000px; min-height: 800px; background-color: #CCCCCC; text-align: center; margin: 0px auto 0px auto; } div#dsg_content { width: 960px; text-align: left; padding-top: 20px; margin: 0px auto 0px auto; } --></style> </head> <body> <div id="dsg_headerback"> <div id="dsg_header"></div> </div> <div id="dsg_lineback"> <div id="dsg_line"></div> </div> <div id="dsg_main"> <div id="dsg_content"> <h1 style="margin-top:0px">Page Überschrift</h1> <div class="item"> <h2>Item Überschrift</h2> <div>Inhalt bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. </div> </div> <div class="item"> <h2>Item Überschrift</h2> <div>Inhalt bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr. </div> </div> </div> </div> </body> </html> -
@@illthis:
Wegen des im Browserstylesheet gesetzten 'margin-top' für 'h1'.
Und wie löst man das Problem?
Durch Überschreiben im Autorenstylesheet:
h1 {margin-top: 0}(Kaskade [CSS2 §6.4]) Das war nun wirklich nicht schwer.Wieso wirkt das 'margin-top' des H1-Tags über den DIV, in dem es sich befindet, hinaus?
Weil es so spezifiziert wurde. [CSS2 §8.3.1]
Wenn ich eine Leerzeile (<p> </p>) über dem H1-Tag einfüge, habe ich das gleiche Problem.
Weil 'p' auch durchs Browserstylesheet oberen (und unteren) Abstand hat.
<?xml version="1.0" encoding="iso-8859-1"?>
Du willst IE 6 in den Quirks-Modus schicken?!
Nicht direkt, ich gebe einfach nur die XML Deklaration an, weil alle XML Dokumente diese haben sollten und die Seite damit kompatibel zur Verwendung mit XML wird. Netter Nebeneffekt ist, dass man sich oft eine Browserweiche für den IE7 spart, da IE5, IE6 und IE7 dann sehr ähnlich interpretieren, weil man damit IE7 in den Quirks-Modus schickt. Sag mit, wenn ich mich täusche.
Du täuschst dich. [Jendryschik]
Warum gibst du die Zeichencodierung für Tagsoup-Parser nicht an?
Hab ich nie gemacht/gesehen. Warum sollte man sie angeben und an welcher Stelle? Senden über den Header?!
Ja, im HTTP-Header! Und wenn kein solcher vorhanden ist, ist eine HTTP-EQUIV-Angabe sinnvoll. [TUTORIAL-CHAR-ENC]
Wenn der HTTP-Header die Zeichencodierung angibt, ist eine XML-Deklaration nicht notwendig. Bei Verarbeitung als 'text/html' sowieso nicht.
Und bei Codierung in UTF-8 sowieso nicht. UTF-8 sollte überhaupt _die_ Codierung der Wahl sein. [TUTORIAL-CHAR-ENC, QA-CHANGING-ENCODING]
Ich dachte, dass man dadurch verhindert, dass bei sehr alten Browsern, die CSS nicht unterstützen, der CSS Code als Text ausgegeben wird?! Ist das flasch?
Nein, das stimmt schon. Nur, dass es so alte Browser nicht mehr gibt. [ZITAT1525, ZITAT1526]
Oder meinst du es ist unsinnig, weil keiner mehr einen so alten Browser benutzen sollte?
Ja, das meine ich. In einem externen Stylesheet war die Auskommentierung noch nie sinnvoll.
Bei Scripts gilt selbiges. Da könnte es aber noch eher als bei Stylesheets erforderlich sein, den Bereich als CDATA zu deklarieren. [http://de.selfhtml.org/html/xhtml/unterschiede.htm#script_style@title=SELFHTML]
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-