Mozilladarstellung <h1> mit DIV fehlerhaft

[Sebastian]

Hallo,

ich nutze Mozilla.

Ich habe diese DIVS definiert:

div#main {
position:absolute;
top:0px;
left:50.01%;
width:800px;
margin-left: -400px;
margin-top: 10px;
z-index:10;
background-color:#FBF7F7
}
div#top {
width:100.01%;
height:100px;
z-index:20;
background-color:#F2F6F7
}

Und das Ganze sieht dann so im Code aus:

<div id="main">
<div id="top">
<img src="http://www.software-und-datenbankentwicklung.local/pics/frei_aboutpixel_de.jpg" align="left" alt="Sebastian Jurk Software- und Datenbankentwicklung Frei" width="58" height="87,125" vspace="5" hspace="15">
<img src="http://www.software-und-datenbankentwicklung.local/pics/logo_blau_klein_sebastian_jurk_software-und-datenbankentwicklung.gif" align="right" alt="Sebastian Jurk Software- und Datenbankentwicklung Logo" width="70" height="70" vspace="15" hspace="15">
<h1 align=right style="margin-top:40px; margin-right:110px; color:#E13601">Sebastian Jurk Software- und Datenbankentwicklung</h1>
</div>
</div>

Es werden also das DIV Main absolut positioniert, damit es in der Mitte der Seite erscheint.
Das funktioniert auch gut.
Dann habe ich einen Bereich DIV Top. Diesen habe ich erst immer absolut eingesetzt, will ihn aber jetzt mit dem Text fließen lassen.
Das Problem ist aber, wenn ich position:absolut rausnehme, dann verrutscht der DIV nach unten. Und zwar ist daran <h1> schuld. Das DIV selbst wird korrekt angezeigt und die Grafiken auch darin aber es wird zu weit unten positioniert, selbst wenn man extra top:0px angibt. Die Überschrift steht immer ein Stück höher als gewünscht, nämlich oben am Rand vom DIV.
Sie ist 40px nach unten verschoben aber schiebt das TOP auch um diese Höhe nach unten. Samt Grafiken.
Und wenn ich das margin-top rausnehmen schiebt es es immer noch ein Stück runter, wahrscheinlich wegen der Überschrift, die ja erstmal eine Freizeile bekommt. So wie ein <p> oder ein <br>.
Woran kann das liegen? Normalerweise sollte sich die Überschrift doch an TOP ausrichten und nicht an MAIN und auch nicht TOP verschieben.
Komischerweise, wenn ich um TOP einen Rand setze ist alles korrekt.
Ist das ein Mozilladarstellungsfehler? Ich nutze 1.7.

Normalerweise sollte das doch so funktionieren oder? Wenn ich bei TOP nur die höhe angebe.

Grüße,
Sebastian

[Ingo Turski]

Hi,

Woran kann das liegen? Normalerweise sollte sich die Überschrift doch an TOP ausrichten und nicht an MAIN und auch nicht TOP verschieben.
Komischerweise, wenn ich um TOP einen Rand setze ist alles korrekt.
Ist das ein Mozilladarstellungsfehler?

nein, das ist die korrekte Umsetzung des Standards. Es steht Dir frei, den margin-top der Überschrift auf 0 zu setzen.

freundliche Grüße
Ingo

[Sebastian]

Woran kann das liegen? Normalerweise sollte sich die Überschrift doch an TOP ausrichten und nicht an MAIN und auch nicht TOP verschieben.
Komischerweise, wenn ich um TOP einen Rand setze ist alles korrekt.
Ist das ein Mozilladarstellungsfehler?
nein, das ist die korrekte Umsetzung des Standards. Es steht Dir frei, den margin-top der Überschrift auf 0 zu setzen.

Aber selbst wenn ich das tue, ist das DIV Top nach unten verschoben. Ich will ja nur, daß die Überschrift einen Platz nach oben freiläßt und nicht daß sie den Platz freiläßt aber zugleich das ganze DIV wegschiebt.
Und es liegt an dem <h1>, denn wenn ich nur normalen Text schreibe ist das DIV auch bündig oben ansetzend.

Grüße,
Sebastian

[Cheatah]

Hi,

Aber selbst wenn ich das tue, ist das DIV Top nach unten verschoben. Ich will ja nur, daß die Überschrift einen Platz nach oben freiläßt und nicht daß sie den Platz freiläßt aber zugleich das ganze DIV wegschiebt.

dann möchtest Du Deinen Code dem Konzept der Collapsing Margins anpassen.

Und es liegt an dem <h1>,

Nein, bei einem <foobar> wäre der Effekt der selbe.

Cheatah

[Sebastian]

Aber warum verschiebt sich der gesamte eingebette DIV-Bereich nur weil ich eine Überschrift darin benutze?
Vielleicht ist mein Englisch auch nur zu schlecht, es klingt aber nach etwas anderem.

Ich könnte es beheben, wenn ich auf den <h1>-Tag verzichte aber Überschriften sind ja sinnvoll und nützlich für die Suchmaschinen.

Grüße,
Sebastian

[Cheatah]

Hi,

Aber warum verschiebt sich der gesamte eingebette DIV-Bereich nur weil ich eine Überschrift darin benutze?

weil es kein <h1> (oder anderes Element) "ohne margin-top" gibt. Jedes Element verfügt zu jedem Zeitpunkt über jede CSS-Eigenschaft. Gibst Du nicht explizit einen gültigen Wert an, obliegt die Wahl (bedingt) dem User-Agent. Diese Wahl scheint Dir hier zu missfallen - also ändere sie.

Vielleicht ist mein Englisch auch nur zu schlecht, es klingt aber nach etwas anderem.

Gib dem <div id="top"> einen border und sag das noch mal ;-)

Cheatah

[Sebastian]

Hi,

Aber warum verschiebt sich der gesamte eingebette DIV-Bereich nur weil ich eine Überschrift darin benutze?

weil es kein <h1> (oder anderes Element) "ohne margin-top" gibt. Jedes Element verfügt zu jedem Zeitpunkt über jede CSS-Eigenschaft. Gibst Du nicht explizit einen gültigen Wert an, obliegt die Wahl (bedingt) dem User-Agent. Diese Wahl scheint Dir hier zu missfallen - also ändere sie.

Hm. Wenn ich das margin-top auf 0px setze, dann ist das DIV Top auch ganz oben.
Aber eigentlich will ich ja innerhalb des DIVs Top die Überschrift vertikal tiefer setzen.

Vielleicht ist mein Englisch auch nur zu schlecht, es klingt aber nach etwas anderem.

Gib dem <div id="top"> einen border und sag das noch mal ;-)

Ja, ich weiß, das hatte ich schon probiert und wenn das DIV Top einen Rahmen hat, dann geht es auf einmal. Aber ich wollte eigentlich keinen Rahmen nutzen. Einen unsichtbaren gibt es ja nicht, außer man trickst mit Farben und 0px Borderbreite hat als Resultat keinen Rahmen also auch keine Besserung.

Ich verstehe nur nicht, warum da gleich der ganze DIV wegrutscht. Denn die Überschrift steht ja IN dem DIV Top, sollte sich also an dessen Starthöhe orientieren. Jedenfalls würde ich das als logisch ansehen. Besonders wenn ich dem DIV top:0px zuweise.

Grüße,
Sebastian

[Ashura]

Hallo Sebastian.

Einen unsichtbaren gibt es ja nicht, außer man trickst mit Farben und 0px Borderbreite hat als Resultat keinen Rahmen also auch keine Besserung.

Warum sollte es den nicht geben? -> border-color: transparent;

Gruß, Ashura

[Sebastian]

Hallo Sebastian.

Einen unsichtbaren gibt es ja nicht, außer man trickst mit Farben und 0px Borderbreite hat als Resultat keinen Rahmen also auch keine Besserung.

Warum sollte es den nicht geben? -> border-color: transparent;

Das wußte ich nicht.
Aber das Problem bestand beim IE6 auch trotz Rahmen. Ich glaube das war dasselbe Problem, da war auch das ganze DIV nach unten verschoben.

Grüße,
Sebastian

[Sebastian]

OK.
Man nehme margin-top:0px und padding-top:40px und es scheint zu funktionieren.
*haarerauf*

Dank für die Geduld! Obwohl ich es immer noch nicht verstehe.
Grüße,
Sebastian

[schwarze Piste]

Tachchen!

Dank für die Geduld! Obwohl ich es immer noch nicht verstehe.

Cheatahs Tipp eingedeutscht ;-)

Gruß

Die schwarze Piste

[Ashura]

Hallo schwarze.

Cheatahs Tipp eingedeutscht ;-)

Ich frage mich nur, warum dort keine ID sondern nur ein Name für die Anker angegeben wurde.
Mir ist nämlich schon vor einer Weile aufgefallen, dass sich  im Opera da nichts tut. :(

Gruß, Ashura

[MudGuard]

Hi,

Ich frage mich nur, warum dort keine ID sondern nur ein Name für die Anker angegeben wurde.

Vielleicht weil ein name ausreicht, eine id alleine aber z.B. netscape-Uralt-Usern nichts bringt und daher zusätzlich zur ID der name auch noch angegeben werden müßte?

Ich frage mich eher, was das &nbsp; im name soll - kann es sein, daß der Opera das %A0 aus der URL nicht in das &nbsp; bzw. das dadurch erzeugte Nonbreaking-space des Anker-Namens umsetzen kann?

cu,
Andreas

[Ashura]

Hallo MudGuard.

Ich frage mich eher, was das &nbsp; im name soll - kann es sein, daß der Opera das %A0 aus der URL nicht in das &nbsp; bzw. das dadurch erzeugte Nonbreaking-space des Anker-Namens umsetzen kann?

Offenbar ja. Denn dies hier funktioniert wiederum einwandfrei.

Gruß, Ashura

[Sebastian]

Heißt das, das Margin von <h1> wurde vom Elternelement übernommen? In dem Fall also das DIV Top?
Im Endeffekt hatten dann <h1> und DIV Top beide dasselbe Margin, nämlich das von <h1>?

Den Text hab ich so verstanden, daß Rahmen zusammenfallen, also einander überlagern. Hier wurde aber ein Abstand weitergegeben oder?

Grüße,
Sebastian

[schwarze Piste]

Tachchen!

Den Text hab ich so verstanden, daß Rahmen zusammenfallen, also einander überlagern. Hier wurde aber ein Abstand weitergegeben oder?

Auszug aus dem Text:
"Die resultierende Randbreite ist das Maximum der benachbarten Randbreiten."

Gruß

Die schwarze Piste

[Sebastian]

Tachchen!

Den Text hab ich so verstanden, daß Rahmen zusammenfallen, also einander überlagern. Hier wurde aber ein Abstand weitergegeben oder?

Auszug aus dem Text:
"Die resultierende Randbreite ist das Maximum der benachbarten Randbreiten."

Das würde ich so verstehen wie den Rahmenfehler vom IE.
Das es zB zwei DIVs nebneinander geben kann. Beide haben einen Rand von einem Punkt aber wo sie zusammentreffen da gibt es zwischen ihnen nur einen Rand von einem Punkt, nicht einen Rand von 2 Punkten. Diese sind benachbart.
Die Überschrift aber ist innerhalb eines Elternelements.
Bei zwei verschachtelten DIVs hätte der äußere einen RAnd und der innere und beide Ränder sollten sich summieren, also nicht überlagern.
Das <h1> greift aber über sein Elternelement hinaus.

Naja, vielleicht verstehe ich es auch nur falsch.

Grüße,
Sebastian

[MudGuard]

Hi,

Das es zB zwei DIVs nebneinander geben kann. Beide haben einen Rand von einem Punkt aber wo sie zusammentreffen da gibt es zwischen ihnen nur einen Rand von einem Punkt, nicht einen Rand von 2 Punkten. Diese sind benachbart.

Falsch. Du hast offensichtlich den Text über die Collapsing margins gar nicht gelesen.
Dort steht klar und deutlich drin, daß horizontale Margins nicht kollabieren ("horizontal margins never collapse.")

Die Überschrift aber ist innerhalb eines Elternelements.

Ja und? Es geht nicht um die Familienverhältnisse der Elemente.
Es geht darum, ob deren margins (in vertikaler Richtung) benachbart sind.

cu,
Andreas

[Sebastian]

Hi,

Das es zB zwei DIVs nebneinander geben kann. Beide haben einen Rand von einem Punkt aber wo sie zusammentreffen da gibt es zwischen ihnen nur einen Rand von einem Punkt, nicht einen Rand von 2 Punkten. Diese sind benachbart.

Falsch. Du hast offensichtlich den Text über die Collapsing margins gar nicht gelesen.
Dort steht klar und deutlich drin, daß horizontale Margins nicht kollabieren ("horizontal margins never collapse.")

Ich habe ja auch das Negativbeispiel beschrieben.

Die Überschrift aber ist innerhalb eines Elternelements.

Ja und? Es geht nicht um die Familienverhältnisse der Elemente.
Es geht darum, ob deren margins (in vertikaler Richtung) benachbart sind.

So habe ich das auch gelesen.
Aber es geht ja eben um Nachbarn. Etwas, was neben-ein-ander ist. Bzw übereinander.
In meinem Fall ist es aber nicht nebeneinander sondern IN-einander.

Grüße,
Sebastian

[Auge]

Hallo

In meinem Fall ist es aber nicht nebeneinander sondern IN-einander.

<zitat>
... von zwei oder mehr Boxen (die nebeneinander liegen oder verschachtelt sein können) so zusammenfallen können, dass sie einen einzigen Rand bilden.
</zitat>

beachte: "oder verschachtelt sein können"

Tschö, Auge

[Sebastian]

Hallo

In meinem Fall ist es aber nicht nebeneinander sondern IN-einander.
<zitat>
... von zwei oder mehr Boxen (die nebeneinander liegen oder verschachtelt sein können) so zusammenfallen können, dass sie einen einzigen Rand bilden.
</zitat>

beachte: "oder verschachtelt sein können"

Oh. Hab ich nicht gesehen.
Naja. Erstmal funktionierts jetzt.

Grüße,
Sebastian

[MudGuard]

Hi,

Aber es geht ja eben um Nachbarn.

Zum x-ten Mal:
Es geht um vertikal benachbarte margins.
Wie die zu den margins gehörigen Elemente im Dokumentbaum angeordnet sind, spielt keine Rolle.

cu,
Andreas

[Ingo Turski]

Hi,

Man nehme margin-top:0px und padding-top:40px und es scheint zu funktionieren.
*haarerauf*

oder man definiere gleich das, was man eigentlich will: nämlich ein padding des Inhaltsbereichs.

freundliche Grüße
Ingo

[Sebastian]

Hi,

Man nehme margin-top:0px und padding-top:40px und es scheint zu funktionieren.
*haarerauf*
oder man definiere gleich das, was man eigentlich will: nämlich ein padding des Inhaltsbereichs.

Ja, aber wenn ich einen Außenbereich für die Überschrift festlegen will, dann nehme ich doch auch an, daß die Überschrift sich an seinem Elternteil orientiert und nicht an seinem Großvater. *g*

Grüße,
Sebastian

[Sebastian]

Hier noch einmal ein Bild dazu.

Beim ersten Ausschnitt ist es die Ansicht des DIVS Top im DIV Main samt Überschrift und margint-top für die Überschrift.
Im zweiten Ausschnitt hat die Überschrift kein margin-top und trotzdem fehlt platz und im dritten abschnitt ist einfach mal ein text geschrieben und keine überschrift <h1>.

Woran liegt das?

Grüße,
Sebastian

[Sebastian]

Link:
http://www.software-und-datenbankentwicklung.de/test4.jpg