Ich will position: verstehen.

[Maxi]

Hey,
ich bin gerade dabei meine neue Seite in CSS umzusetzen.

Kurze Eckdaten zu meiner Webseite: Sie ist 1000px breit und zentriert. Der Div für diese festlegung heißt Container.

Und genau hier beginnt mein Problem. Die Seite ist zentriert. Warum das ein Problem ist? Nun. Auf meiner Seite gibt es bestimmte Div Elemente die ich in diesem Container absolut positionieren möchte.

Nun habe ich probiert diesem jenem Element ein position:absolute; zu geben in der Erwartung, das ich dann mit left:50px, 50px vom linken Rand des Containers Abstand bekomme. War nicht so... Es sind zwar 50 px aber die sind vom Bildschirmrand.

Habe ich da etwas falsch gemacht?

[suit]

Habe ich da etwas falsch gemacht?

position irgendwas bezieht sich immer relativ auf das nächstübergeordneten elternelement mit einer angabe != static

wenn du deinem container position: relative; verpasst, wirst du dein problem vermutlich lösen

in den meisten fällen gibts aber eine lösung, die ohne position: absolute auskommt - die wichtigste verständnisregel an der position-eigenschaft ist: verwende es nicht, wenn es nicht sein muss ;)

[Malcolm Beck´s]

hi,

die wichtigste verständnisregel an der position-eigenschaft ist: verwende es nicht, wenn es nicht sein muss ;)

und du nicht ganz genau weißt, was du tust.

mfg

[Maxi]

hi,

die wichtigste verständnisregel an der position-eigenschaft ist: verwende es nicht, wenn es nicht sein muss ;)

und du nicht ganz genau weißt, was du tust.

mfg

Ja, ich denke ich weiß was ich tue.

So sieht mein Code aus:

.navigationposition {left:0;position:absolute;top:4px;}  
.navigationcontainer {margin:0 auto;width:1000px;}

Das Problem ist nun, dass Firefox den Div in dem position:absolute; Div nicht mehr zentriert.

[3DFix]

Hallo Maxi,

Ja, ich denke ich weiß was ich tue.

Entweder du weißt es nicht, oder du hast dich hier vertan!

So sieht mein Code aus:

.navigationposition {left:0;position:absolute;top:4px;}

.navigationcontainer {margin:0 auto;width:1000px;}

>   

Da darfst du dich auch nicht wundern. Codiere:  
  

> ~~~css

.navigationposition {left:0px;position:absolute;top:4px;}  

> .navigationcontainer {margin:0px auto;width:1000px;}

Ist mir auch schon passiert, dass ich im Übereifer das px vergessen habe und habe erst mal geklotzt, weil es nicht funktioniert hat.

Gruß 3DFix

[suit]

Hallo Maxi,

Ja, ich denke ich weiß was ich tue.

.navigationposition {left:0px;position:absolute;top:4px;}

.navigationcontainer {margin:0px auto;width:1000px;}

  

> Ist mir auch schon passiert, dass ich im Übereifer das px vergessen habe und habe erst mal geklotzt, weil es nicht funktioniert hat.  
  
0 ist 0, egal in welcher einheit (0px ist redundant zu 0) - und dass margin: auto NICHT in kombination mit absoluter positionierung funktioniert ist klar - darum halte ich den ersten kommentar "ja, ich denke ich weiß was ich tue" für falsch ;)

[Maxi]

Hallo Maxi,

Ja, ich denke ich weiß was ich tue.

Entweder du weißt es nicht, oder du hast dich hier vertan!

So sieht mein Code aus:

.navigationposition {left:0;position:absolute;top:4px;}

.navigationcontainer {margin:0 auto;width:1000px;}

> >   
> Da darfst du dich auch nicht wundern. Codiere:  
>   
> > ~~~css

.navigationposition {left:0px;position:absolute;top:4px;}  

> > .navigationcontainer {margin:0px auto;width:1000px;}

Ist mir auch schon passiert, dass ich im Übereifer das px vergessen habe und habe erst mal geklotzt, weil es nicht funktioniert hat.

Gruß 3DFix

Leider zentriert Firefox den Div immer noch nicht.

[suit]

Leider zentriert Firefox den Div immer noch nicht.

warum sollte er auch?

ich verstehe leider dein problem nicht - darum kann ich dir nicht näher helfen

beschreibe, was du genau willst - idealerweise ein bild davon

ich meine immer noch, dir fehlt ein position: relative in deinem container - alternativ könnte es auch ein zusätzliches element um deine navigation sein, um diese letztendlich zu zentrieren - wer kann das schon wissen

[3DFix]

Hallo Suit,

ich verstehe leider dein problem nicht - darum kann ich dir nicht näher helfen

Ja, warum antwortest du dann?

beschreibe, was du genau willst -

Hat er doch in seinem ersten Beitrag. Du verstehst es halt nicht.

Gruß 3DFix

[suit]

Hat er doch in seinem ersten Beitrag. Du verstehst es halt nicht.

ich denke du hast es auch nicht richtig verstanden ;)

meiner ansicht nach lässt das problem keine logischen schlüsse auf das eigengliche vorhaben zu - besonders der margin: auto ansatz ist im kontext der fragestelltung absolut wirr

die technische, daraus extrapolierte lösung ist diese hier

  
<div id="foo">  
  <div id="bar">baz</div>  
</div>

#foo {  
  margin: 0 auto;  
  width: 1000px;  
  position: relative;  
}  
  
#bar {  
  position: absolute;  
  left: 50px;  
}

das liefert exakt das, was die problembeschreibung darlegt - darum war auch mein hinweis im container (#foo) ein position: relative; anzubringen

schluss 1: diese hilfestellung wurde aber entweder gekonnt ignoriert
schluss 2: diese hilfestellung führt nicht zur erwarteten lösung und eigentlichen problem (welches nicht näher beschrieben wurde) vorbei

sc

[3DFix]

Hallo Maxi,

Ja Suit hat recht, 0 ist unsinnig. Vorher war ja von left: 50px die Rede!

Versuche es mal wie folgt:

.navigationposition {margin-top:4px; margin-left:50px; position:relative;} .navigationcontainer {margin-left:auto; margin-right:auto;width:1000px;}

Wobei du position:relative auch weglassen kannst, da standard.

Hinweis: auto bei margin funktioniert bei älteren Browserversionen nicht.

Gruß 3DFix

[suit]

Ja Suit hat recht, 0 ist unsinnig. Vorher war ja von left: 50px die Rede!

nein, ich sagte 0px ist unsinnig, da man genausogut 0 schreiben kann - 0 ist 0, egal in welcher einheit

Wobei du position:relative auch weglassen kannst, da standard.

nein, static ist die voreinstellugn der meisten browser

Hinweis: auto bei margin funktioniert bei älteren Browserversionen nicht.

margin: auto funktioniert ab ie6 aufwärts, das reicht aus

aber wie schon 2x zuvor gesagt: margin: auto hat keinen effekt mehr, wenn die das element absolut irgendwo hinpositionierst - und relative ist sicher kein ersatz für absolute

[3DFix]

Ja Suit hat recht, 0 ist unsinnig. Vorher war ja von left: 50px die Rede!
nein, ich sagte 0px ist unsinnig, da man genausogut 0 schreiben kann - 0 ist 0, egal in welcher einheit

In diesem fall ist 0 unsinnig!

Wobei du position:relative auch weglassen kannst, da standard.
nein, static ist die voreinstellugn der meisten browser

»»
Bei den meisten Browsern? Das ist relative!
Ich habe mal bei SelfHTML beschriebene Angabemöglichkeiten für position nachgeschaut. Leider ist dort nicht beschrieben, welche Angebe standard ist. Ab IE6 und FF war es immer relative, sonst hätte bei mir einiges nicht funktioniert.

Hinweis: auto bei margin funktioniert bei älteren Browserversionen nicht.
margin: auto funktioniert ab ie6 aufwärts, das reicht aus

aber wie schon 2x zuvor gesagt: margin: auto hat keinen effekt mehr, wenn die das element absolut irgendwo hinpositionierst

desshalb auch relative.

• und relative ist sicher kein ersatz für absolute

Da gebe ich dir auch voll und ganz recht! Aber in Maxis Fall kann statt absolute relativ genommen werden, da, wie du schon beschreibst, die Zentrierung bei absolute nicht funktionieren kann.

Gruß 3DFix - Zack-ze-fix nochmal!

[suit]

In diesem fall ist 0 unsinnig!

nein 0 ist durchaus berechtigt, wenn man die voreinstellung überschreiben möchte

Bei den meisten Browsern? Das ist relative!

nein, das sicher nicht :)

Ich habe mal bei SelfHTML beschriebene Angabemöglichkeiten für position nachgeschaut. Leider ist dort nicht beschrieben, welche Angebe standard ist.

muss schon länger her sein ;)
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Ab IE6 und FF war es immer relative, sonst hätte bei mir einiges nicht funktioniert.

relative halte ich für ein gerücht, das wäre extrem hinderlich bei der verwendung von position: absolute

http://www.css4you.de/position.html
hier ist, wie auch im oben verlinkten selfhtml artikel static als initialwert aufgeführt

[Gunnar Bittersmann]

@@3DFix:

Wobei du position:relative auch weglassen kannst, da standard.
nein, static ist die voreinstellugn der meisten browser
»»
Bei den meisten Browsern? Das ist relative!

Unsinn. Einfach mal nachlesen: [CSS2 §9.3.1]

Du lehnst dich heute ganz schön weit aus dem Fenster mit deinem Halbwissen.

Live long and prosper,
Gunnar

[3DFix]

Hallo Gunnar,

darst gerne zeigen, dass du es besser weißt, aber eine Lösung für Maxi hast du auch noch nicht präsentiert, also lasse von deinem Können teilhaben!

Gruß 3DFix

[suit]

aber eine Lösung für Maxi hast du auch noch nicht präsentiert, also lasse von deinem Können teilhaben!

eine lösung die sich schlüssig aus der fragegestellung ergibt hatte ich schon 3x beschrieben - zuletzt hier (zusammenfassend "füge ein position: relative; in deinem container hinzu") - eine weitere lösung ist nicht zielführend sofern keine näheren informationen folgen, warum das nicht die die richtige lösung sein soll

[3DFix]

Hallo Suit,

in den meisten fällen gibts aber eine lösung, die ohne position: absolute auskommt - die wichtigste verständnisregel an der position-eigenschaft ist: verwende es nicht, wenn es nicht sein muss ;)

Warum ohne Positionierung absolute auskommen? Man sollte nur verstehen, was es bedeutet und wie es sich auswirkt. Ich verwende diese Positionierung hin und wieder, wenn es sinnvoll und notwendig ist.

Gruß 3DFix

[suit]

position-eigenschaft ist: verwende es nicht, wenn es nicht sein muss ;)
Ich verwende diese Positionierung hin und wieder, wenn es sinnvoll und notwendig ist.

und was hab ich sinngemäß geschrieben?
wenn es nicht sein muss = wenn es ist nicht notwenig ist ;)

[3DFix]

Hey, hey,

Nun habe ich probiert diesem jenem Element ein position:absolute; zu geben in der Erwartung, das ich dann mit left:50px, 50px vom linken Rand des Containers Abstand bekomme. War nicht so... Es sind zwar 50 px aber die sind vom Bildschirmrand.

Habe ich da etwas falsch gemacht?

Eine absolute Positionierung eines div's innerhalb eines übergeordneten div's bezieht seine Positionierung genau wie bei relative eigentlich auf die Positionierung des übergeordneten div's. Da müsste man einmal deinen Quellcode anschauen. Aber probiere es mal mit margin-left: 50px, statt mit left: 50px.

Gruß 3DFix

[Cheatah]

Hi,

Eine absolute Positionierung eines div's

eines *jeden* Elements. Zwischen einem <div> und beispielsweise einem <p> (oder <title>) existiert für CSS nicht der geringste Unterschied.

innerhalb eines übergeordneten div's bezieht seine Positionierung genau wie bei relative eigentlich auf die Positionierung des übergeordneten div's.

Nein. Die absolute Positionierung bezieht sich auf das innerste Vorfahrenelement, welches eine von "static" unterschiedliche position-Angabe besitzt[1]. Ob das nun ein <div> ist oder nicht, "das" übergeordnete oder der Ururururgroßvater, das ist völlig unerheblich.

Außerdem bezieht sich position:relative immer auf die Position, die das Element selbst innehat. Mit dem Bezug eines position:absolute ist das nicht im mindesten vergleichbar.

Cheatah

[1] Bei Nichtvorhandensein eines solchen nach dem Viewport.

[Gunnar Bittersmann]

@@Maxi:

Kurze Eckdaten zu meiner Webseite: Sie ist 1000px breit und zentriert. Der Div für diese festlegung heißt Container.

Und genau hier beginnt mein Problem.

Stimmt.

Live long and prosper,
Gunnar