• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div unter anderen Platzieren

Status
Für weitere Antworten geschlossen.
yoshi95

yoshi95

Neues Mitglied
Ich habe folgenden QT:

Code: 
[SIZE=2][COLOR=black]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<html>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<head>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<title>Hier Titel eintragen</title>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<link rel="stylesheet" type="text/css" href="style.css">[/COLOR][/SIZE]
[SIZE=2][COLOR=black]</head>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<body>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<div class="banner">[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<br><br><br>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]</div>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<div class="menu">[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]TEST[/COLOR][/SIZE]
[SIZE=2][COLOR=black]</div>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<div class="main">[/COLOR][/SIZE]
[SIZE=2][COLOR=black]<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]TEST[/COLOR][/SIZE]
[SIZE=2][COLOR=black]</div>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]</body>[/COLOR][/SIZE]
[SIZE=2][COLOR=black]</html>[/COLOR][/SIZE]
[SIZE=2][/SIZE] 
[SIZE=2][/SIZE]

CSS dazu:

Code: 
[SIZE=2][COLOR=black]body {[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-color:#8BA0F8;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]font-family:Arial;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]}[/COLOR][/SIZE]
[SIZE=2][COLOR=black].banner {[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-color:white;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-image: url(menu.jpg);[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-repeat:repeat-x;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]border-style:solid;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]border-width:1px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]width:1010px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]float:left;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]}[/COLOR][/SIZE]
[SIZE=2][COLOR=black].menu {[/COLOR][/SIZE]
[SIZE=2][COLOR=black]margin-top:10px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-color:white;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-image: url(menu.jpg);[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-repeat:repeat-x;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]border-style:solid;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]border-width:1px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]width:200px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]float:left;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]}[/COLOR][/SIZE]
[SIZE=2][COLOR=black].main {[/COLOR][/SIZE]
[SIZE=2][COLOR=black]margin-top:10px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]margin-left:10px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-color:white;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-image: url(menu.jpg);[/COLOR][/SIZE]
[SIZE=2][COLOR=black]background-repeat:repeat-x;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]border-style:solid;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]border-width:1px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]width:800px;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]float:left;[/COLOR][/SIZE]
[SIZE=2][COLOR=black]}[/COLOR][/SIZE]
[SIZE=2][/SIZE] 
[B][SIZE=2][/SIZE][/B]

Jetzt möchte ich, dass menu und main UNTER banner platziert werden. Ich könnte es alles mit <br>s machen, aber dann wird es kein Abstand von 10PIXELN
 
Zuletzt bearbeitet:
Wenn du den Quellcode untereinander platzieren würdest wäre auch schonmal geholfen. Ansonsten suchst du nach der CSS-Eigenschaft "position". Du müsstest bei beiden div's "position: absolute" inkl. genauer Positionierung und Höhe und Breite angeben und per "z-index" die Reihenfolge bestimmen.
 
Ich hab da immer das Problem mit Weaverslave. Ich muss nur nochmal auf Ändern -> Speichern drücken und schon gehts wieder... Aber nur ein mal. Dann ist wieder alles (nach Aktualisierung) in einer Zeile

Wie geht das dann in meinem Beispiel mit Position?
 
Aber wenn jetzt noch zum Banner ein Text hinzukommt, dann ist mir sdoch mit absolut nicht geholfen, oder?
 
Du müsstest nur für die absolut positionierten Elemente einen Abstand in der Höhe des Banners nach oben festlegen. Abgesehen davon ist die Nutzung von "position: absolute;" eigentlich weniger ratsam. Da du aber wirklich 2 Elemente übereinander legen willst ...
 
threadi schrieb:
Da du aber wirklich 2 Elemente übereinander legen willst ...
Zum Vergrößern anklicken....
Ich will sie doch gar nicht übereinander legen:idea:

Also nochmal:

|--------------------------------|
Banner INHALTINHALTINHALTINHALT
|--------------------------------|
|-----| |------------------------|
MenuIN Mainframe INHALTINHALTINH
|-----| |------------------------|

Wenn ich es absolut mache, und zu Banner noch mehr inhalt kommt (das div größer wird), gehen menu und mainframe nicht nach unten, da sie ja absolut sind. float:left bringt das menu rechts neben das Banner.
 
Ach, ermaßen "übereinander". Dann musst du float nutzen um die beiden unteren nebeneinander zu bringen - KEIN position. Hinter dem banner musste nur eine neue Zeile erzwingen, was schon allein seine Breitenangabe schaffen sollte.
 
Blockelement

Ein div ist ein Blockelement.
Man muss nichts floaten oder positionieren. Blockelemente stehen auch so untereinander.

if (Untereinander == Übereinander)
{
echo "<p>Ich denke wir meinen das gleiche</p>";
}
 
Zuletzt bearbeitet:
threadi schrieb:
Ach, ermaßen "übereinander". Dann musst du float nutzen um die beiden unteren nebeneinander zu bringen - KEIN position. Hinter dem banner musste nur eine neue Zeile erzwingen, was schon allein seine Breitenangabe schaffen sollte.
Zum Vergrößern anklicken....
Aber ich will, dass die zeile unter dem banner dann genau 10px von den anderen divs entfernt ist:

|------------------|
|------------------|
10px10px10px10px
|----|10px|--------|
|----|10px|--------|
 
so?
HTML: 
body { 
background-color:#8BA0F8; font-family:Arial;
width : 1020px;
 }
 .banner {
 background-color:white;
 background-image: url(menu.jpg);
 background-repeat:repeat-x;
 border-style:solid;
 border-width:1px;
 width:1010px;
margin-bottom : 10px;
 }
 .menu {
 background-color:white;
 background-image: url(menu.jpg);
 background-repeat:repeat-x;
 border-style:solid;
 border-width:1px;
 width:200px;
 float:left;
 }
 .main { 
 margin-left:10px;
 background-color:white;
 background-image: url(menu.jpg);
 background-repeat:repeat-x;
 border-style:solid;
 border-width:1px;
 width:800px;
 float:left; }
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben