DIVs um die Bildschirmmitte

[Salataz]

Hallo zusammen,

ich lese nun schon seit einer Stunde in diesem Forum um einen Lösungsansatz zu finden. Der blieb mir dennoch verwährt.

Zu meinem Problem:

Ich möchte ein Logo in die absolute Mitte (horizontal + waagerecht) der Website anzeigen. Da ja jeder eine andere Bildschirmgröße/Auflösung hat, möchte ich das sich die umliegenden DIVs automatisch "darum wickeln".
Im Anhang befindet sich eine Skizze von den DIVs um das Ganze zu veranschaulichen.



Da ich recht wenig Erfahrung mit CSS habe möchte ich euch um Hilfe bitten, und bedanke mich schon mal vorab für hoffentlich viele Lösungsansätze.

LG
Salataz

 

[Tronjer]

Ohne CSS zu erlernen wirst du es nicht hinbekommen.

Aber um dir einen Ansatz anhand des Bildes zu liefern: Breite und Höhe des Browser-Windows betragen je 100%. Wenn du neun identische Container hast, wie groß ist dann ein einzelner?

 

[Salataz]

Hallo,

danke für die schnelle Antwort, es sind aber nicht alle in der gleichen Größe.

CSS ist soweit nicht das große Problem, aber die automatische Zentrierung. Stehe da total auf dem schlauch.

EDIT:

position:absolute;
margin: -197px 0px 0px -190px;
left:50%;
top:50%;

damit hab ich jetzt das Logo zentriert. Sodas bei Größenänderung des Fensters, sowie einer kleineren Gesamtauflösung es immer mittig ist.
Nur das eigentliche Problem die äußeren DIVs an die jeweiligen variablen Positionen zu bekommen habe ich immer noch nicht gelöst.

LG

 

[threadi]

Webseiten interessieren sich seltenst für Auflösungen. Wie Du selbst schon sagst kann der Browseranwender ja auch sein Fenster kleiner ziehen - dann spielt irgendeine Monitorbreite oder -höhe erst recht keine Rolle mehr für die Webseite.

Du sprichst von einem Logo was in der Mitte des Browserfensters zu sehen sein soll. Natürlich kannst Du das mit absoluter Positionierung oder (für neuere Browser) mit CSS-Tabellen erledigen. Theoretisch könntest Du es aber auch als Hintergrundbild einfügen:

body {
 background-image: url(logo.png);
 background-repeat: no-repeat;
 background-position: center center;
}

Auf <div>'s und andere HTML-Elemente könntest Du dann auch völlig verzichten. Nachteil wäre nur, dass Du dann außer dieser Grafik rein gar nichts auf der Seite hast ...

 

[Salataz]

@theadi

Das Logo soll "klickbar" sein. Da es gleichzeitig als "Enter-Button" fungiert. Die Zentrierung ist mir ja bereits gelungen. Trotzdem vielen dank für deine Hilfe

LG

 

[threadi]

Klickbar? Was willst Du dann mit div-Elementen? Außerdem dem Logo steht ja nichts auf der Seite, oder?

 

[Salataz]

ich hab es jetzt anders gelöst. Hier mal schauen ::BR41N P41N::

 

[djheke]

Ja und wo sind die anderen Div's? Was soll das Ganze mahl werden? Wenn's fertig ist. Ein bissel genauer wäre sehr hilfreich.

 

[threadi]

Genau so meinte ich es ja auch. Nur noch ein Verbesserungsvorschlag: verzichte auf das div und gib dem Link die ID.