Habe Probleme mit CSS-Layout

Status
Nicht offen für weitere Antworten.
M

Meikel25

Erfahrenes Mitglied
Hallo zusammen,

ich habe Probleme mit einem CSS-Layout.
Ich hoffe hier kann mir einer weiterhelfen.

Es handelt sich um folgendes Problem:

Die vier DIV's sollten immer zentriert am Browser ausgerichtet sein, so wie es dir Grafik zeigt. Kann mir da einer was zu sagen, evtl. auch eine fertige CSS-Datei oder so was ähnliches zuschicken?
Ich komme da einfach nicht mehr weiter.

Ich muss doch einen Hauptdiv auf 100 x 100% setzen und alle anderen darin positionieren, oder?

Ich würde mich riesig über Eure Hilfe freuen.


mfg,
Meikel25
 

Anhänge

  • css.jpg
    css.jpg
    6,9 KB · Aufrufe: 14
Nimm der Div's doch einfach eine Tabelle mit 4 Zellen. Mit "border-collapse:collapse;" kannst du die Zellen zusammenschieben. Evtl. mit margin, padding und border die Zellen noch anpassen.

Grüße

Ortwin
 
Na mit Tabellen kann das doch jeder.
Aber ich will es eben mit CSS hinbekommen.

Ich finde mit Tabellen layouten kann eben jeder und der feiner Unterschied ist das ganze mit CSS hinzubekommen.
Daher frage ich hier im Forum.

Gruß und Danke für deinen Tipp.
 
Hi,

selbstverständlich lässt sich das gewünschte Layout absolut tabellenlos und mit purem CSS umsetzen ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Meikel25</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

#centerBox {
position:absolute;
width:400px;
height:400px;
left:50%;
margin-left:-200px; /* negative Hälfte von width:400px */
top:50%;
margin-top:-200px; /* negative Hälfte von height:400px */
}

#navi {
width:200px;
height:200px;
float:left;
background:#ffff00;
}

#pics_righttop {
width:200px;
height:200px;
float:right;
background:#bfbfbf;
}

#pics_leftbottom {
width:200px;
height:200px;
float:left;
background:#bfbfbf;
}

#content {
width:200px;
height:200px;
float:right;
background:#ffff00;
}
-->
</style>

</head>
<body>

<div id="centerBox">
     <div id="navi">navi</div>
     <div id="pics_righttop">pics_righttop</div>
     <div id="pics_leftbottom">pics_leftbottom</div>
     <div id="content">content</div>
</div>

</body>
</html>
 
Maik hats treffend formuliert, das ist die beste Lösung für dein Problem. Viel anders würd ichs auch nicht machen. Einzige Anmerkung wäre noch:

Den 5 div-Containern ein
Code: 
overflow: hidden;
zu geben, falls doch mal ein längerer Text in einem Container steht, verschwindet er hinter dem Rand und zerschießt dir nicht das Layout.
Dann könntest du auch allen 4 Containern ein
Code: 
float: left;
geben, hat aber die selbe Auswirkung wie oben genanntes Beispiel.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück