✔ Elemente mit automatischem Abstand zueinander

Status
Nicht offen für weitere Antworten.
C

cesupa

Erfahrenes Mitglied
Hallo,

ich möchte gern meine Website so einrichten, dass die div-container quasi "automatisch Abstand zueinander halten". Ich habs bereits mit position:relative und/oder absolute versucht aber leider nur mit mäßigem Erfolg. Nur wenn ich die position-Befehle komplett entferne, halten die Elemente zumindest Horizontal ihren Abstand, aber wie funktioniert das jetzt vertikal?

Gruß
cesupa
 
okay, das funktioniert aber leider auch nur Horizontal, ich poste mal meine CSS-Datei:

HTML: 
div.center{
  position:relative;
  top:0px;
  left:0px;
  width:200px;
  height:200px;
  background-color:#FFFFFF;
}

div.left{
  position:relative;
  top:50px;
  left:0px;
  width:200px;
  height:500px;
  margin-right:100px;
  background-color:#FF0000;
}

div.top{
  position:relative;
  display:box;
  margin-bottom:20px;
  top:0px;
  left:0px;
  width:100%;
  height:130px;
  background-color:#FFFFFF;
}

body{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#DFE3FA;
}

So, also: top und left erscheinen auf meiner Website so, wie sie auch erscheinen sollen, nur center erscheint direkt unter left, anstatt rechts daneben, wie es eigentlich sein soll. Was muss ich ändern, damit center unter top und rechts neben left erscheint?

Gruß
cesupa
 
Wie wäre es hiermit?

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

<style type="text/css">
<!--
body{
height:100%;
background-color:#DFE3FA;
}

div.top{
margin-bottom:20px;
height:130px;
background-color:#FFFFFF;
}

div.left{
margin-top:50px;
width:200px;
height:500px;
background-color:#FF0000;
float:left;
}

div.center{
margin-top:70px;
margin-left:300px;
width:200px;
height:200px;
background-color:#FFFFFF;
}
-->
</style>

</head>
<body>

<div class="top">top</div>
<div class="left">left</div>
<div class="center">center</div>

</body>
</html>

Code: 
display:box;
Zum Vergrößern anklicken....
Den Wert "box" gibt es nicht für die display-Eigenschaft.
 
Super, es funktioniert, zumindest sieht es so aus, wie es aussehen sollte. Jetzt würde mich nur noch die Automatik interessieren, da das center-Element nämlich nicht automatisch seinen Abstand zum left-Element vergrößert, wenn ich die Breite des left-Elementes verdoppel. Wie könnte man das noch mach?

Gruß
cesupa
 
Die "Automatik" besteht darin, den linken Außenabstand für das DIV .center entsprechend zu erhöhen:

Code: 
div.left{
margin-top:50px;
width:400px;
height:500px;
background-color:#FF0000;
float:left;
}

div.center{
margin-top:70px;
margin-left:500px;
width:200px;
height:200px;
background-color:#FFFFFF;
}
 
Aja, okay, ich dachte man bräuchte nur die Breite vom left-Element ändern und alles andere passt sich an.
Danke für deine Hilfe.

Gruß
cesupa
 
Hi,

es gibt eine zweite Möglichkeit, bei der die Breite des ersten Elements nachjustiert werden kann und der Rest sich automatisch anpasst, indem die zweite Box .center ebenfalls mit der float-Eigenschaft ausgezeichnet wird, und so lediglich der gewünschte Außenabstand zum benachbarten Element festgelegt wird:

Code: 
div.left{
float:left;
margin-top:50px;
width:400px;
height:500px;
background-color:#FF0000;
}

div.center{
float:left;
margin-top:50px;
margin-left:100px;
width:200px;
height:200px;
background-color:#FFFFFF;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück