✔ Anfängerproblem mit CSS Layout

Status
Nicht offen für weitere Antworten.
B

blubber

Erfahrenes Mitglied
Hallo,

ich versuch mich grad daran ein CSS Layout - also mit <div> - zu erstellen. Hab allerdings ein Problem mit der richtigen Positionierung meiner Ebenen. Und zwar möchte ich folgendes machen:

Zwei einfarbige Rechtecke mit unterschiedlicher aber fester (!) Breite und gleicher Höhe sollen ganz oben zentriert (!) am Bildschirm nebeneinander (!) positioniert werden. Also meine Seite soll exakt 800px breit und zentriert sein. Einer der zwei Rechtecke (grün) soll 600px breit und 50px hoch sein, das zweite Rechteck (blau) soll rechts daneben lieben und 200px breit und 50px hoch sein.

Jo, also wenn ich eine absolute Positionierung mache, dann bekomm ich das hin, dass die Rechtecke direkt nebeneinander liegen, allerdings haben sie dann zu irgend einem Rand einen festen Abstand. Ich möchte aber gerne, dass sie eben zentriert sind.
Geht das?

Gruß
 
Hi,

ich hab dir mal fix ein Modell gestrickt ;)

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_blubber</title>

<style type="text/css">
<!--
div#wrapper {
width:800px;
margin:0 auto;
}

div#leftBox {
width:600px;
height:50px;
float:left;
background:green;
}

div#rightBox {
width:200px;
height:50px;
float:right;
background:blue;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="leftBox"></div>
     <div id="rightBox"></div>
</div>

</body>
</html>
 
Ok...doch noch n kleines Problem. Nun möchte ich einen Abstand von 2px zwischen den Ebenen und weitere Ebenen darunter. Das mit dem Abstand hatte ich hinbekommen, ich hab einfach beim wrapper die 800px auf 802px erhöht. Eine rote Ebene unter der blauen Ebene war auch kein Problem, nur wie bekommt man zwischen rot und blau den 2px Abstand? Hier mal mein aktueller Code:

HTML: 
<!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_blubber</title>

<style type="text/css">
body {
  margin: 2px;
  background-color: #ffffff;
}

#wrapper {
width:802px;
margin:0px auto;
}

#box1 {
width:600px;
height:50px;
float:left;
background:green;
}

#box2 {
width:200px;
height:50px;
float:right;
background:blue;
}

#box3 {
width:600px;
height:120px;
float:left;
background:red;
}

</style>

</head>
<body>

<div id="wrapper">
     <div id="box1"></div>
     <div id="box2"></div>
     <div id="box3"></div>
</div>

</body>
</html>

*edit*
hat sich grad erledigt....margin-top hat geholfen :)
 
Zuletzt bearbeitet:
Ganz einfach ;)

Code: 
#box3 {
width:600px;
height:120px;
float:left;
background:red;
margin-top:2px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück