Stylesheets, Container, Position: Absolute und ich

[idolum]

Hi!

Ich bin gerade echt am verzweifeln. Nach stundenlangem stöbern im Internet bin ich immer noch nicht fündig geworden.

Und zwar möchte ich ein Div Container horizontal zentrieren. Soweit gibt es diverse Möglichkeiten. Allerdings möchte ich in diesem noch ein Div, welches position: absolute sein sollte. In diesem sollen dann weitere Divs absolute positioniert werden, um das Layout zu gestalten.

Das muss doch irgendwie möglich sein.

Das ganze hatte ich auch schon horizontal und vertikal, allerdings brauche ich halt jetzt nur horizontal.

Es sollte ab IE 6 funktionieren.

Also, wenn jemand eine Lösung hat: :-*

 

[egon]

falsches forum – das gehört in "Web-Programmierung". kann das mal bitte jemand verschieben.

 

[Kenso]

Korrigiert mich, wenn ich daneben liege, aber position:absolute löst ein Element vollkommen von der Strukturierung im Quelltext und ermöglicht eine freie Positionierung innerhalb des Dokuments. Somit ist es nicht möglich, eine absolut positionierte Ebene abhängig von einer normal positionierten Ebene zu machen (Ebene=division=div).

Was du suchst, könnte allerdings mit relativer Positionierung (position:relative) möglich sein. Versuchs doch damit mal

Gruß, Micha

 

[Maluku]

Erläuterung:

Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.

Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.

Langer Rede kurzer Sinn, du musst dein Zentriertes Div entwerder relative oder absolute Positionieren damit dass inner Absolute funktioniert.

Wenn du nach dem Zentrierten div noch etwas brauchst im normalen Textfluss musst du das nächste Element mit einer passenden margin-top ausstatten. (da position:relative oder absolute Elemente aus dem normalen Textfluss heraussnimmt)

Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

 

[idolum]

Langer Rede kurzer Sinn, du musst dein Zentriertes Div entwerder relative oder absolute Positionieren damit dass inner Absolute funktioniert.

Wenn du nach dem Zentrierten div noch etwas brauchst im normalen Textfluss musst du das nächste Element mit einer passenden margin-top ausstatten. (da position:relative oder absolute Elemente aus dem normalen Textfluss heraussnimmt)

Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Ok, danke schonmal für die Antwort.

Werd also mal wieder rumdoktern. Vielleicht bekomm ichs ja hin.

 

[idolum]

Ich nochmal^^

Habe es mittlerweile selbst hinbekommen. Einfach einen Container mit margin: 0 auto definiert und darin dann weiter Container mit absolute positioniert. warum ich das vorher nicht hinbekommen habe

Allerdings habe ich jetzt ein weiteres Problem. Und das nur mit Safari.

Ich möchte ein Logo durch das wechseln des BGs bei mouse hover ändern, was auch prima funktioniert. Aber nur nicht mit dem Safari. Dieser zeigt weder ein hover, noch das eigentliche Bild des Links.

Hier der CSS Code:

/* Hover Logo */

a.logomouseover:link { display: block; background-image: url(../images/logo.gif); width: 129px; height: 52px; border: 0; }
a.logomouseover:visited {  background-image: url(../images/logo.gif); }
a.logomouseover:hover{ background-image: url(../images/logo_hover.gif);  }
a.logomouseover:active { background-image: url(../images/logo_hover.gif); }

/* ///Hover Logo */

und hier der HTML Seite

<div id="logo"><a class="logomouseover" href="index.php" title="zur Startseite"><img src="/templates/idolum/images/logo_blind.gif" align="left" height="52" width="129" border="0" /></a></div>

Die Seite ist hier zu finden: www.idolumvisions.com

Was mache ich falsch?

-------------------------------------

Ach und grad fällt mir auf, das ich beim Joomla 1.5 Backend überhaupt kein Reiter "Inhalt" bei der "Konfiguration" habe. Woran liegt denn das jetzt wieder? Und zudem kann ich keine Suchmaschinen freundlichen Links ausgeben, da sonst das ganze Layout verschwindet. Ich werde noch verrückt.