 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
traumgaertner
Dabei seit: 18.01.2009
Ort: Franken
Alter: 43
Geschlecht: 
|
Verfasst Mo 26.01.2009 05:51
Titel
|
  |
|
| lara_s hat geschrieben: | | ich bin auch ziemlich ratlos was meine divs angeht. ich will eigentlich nur zwei divs untereinander haben (was klappt) und das dritte daneben mit der oberkante auf der höhe des ersten, was nicht klappt, denn es klebt immer unter dem zweiten. |
Da es kein Beispiel dazu gibt, das man sich ansehen könnte, ist das natürlich im Detail nicht zu beantworten, aber ich würde einfach mal drauf wetten dass es an der chronologischen Anordnung der Container liegt, in Verbindung mit ihrer Grösse.
Also, wenn Du DIV#3, der oben neben dem ersten liegen soll, an dritter Stelle im Code stehen hast, mit der Position relative, dann orientiert der sich natürlich an DIV#2, weil der das Mutterelement darstellt, in diesem Fall. Schreib den mal hinter DIV#1, dann dürfte sich das erledigt haben. Ist jetzt aber natürlich nur gaaaaaaaaanz oberflächlich, weil, ich kenne ja weder Seite noch Code. Handelt es sich aber um drei Elemente die allesamt zusammenliegen...
[DIV1][DIV3]
[DIV2][ ]
dann geht das.
Dann muss das eben lauten, in der Reihenfolge:
<div class="1">
<div class="3">
<div class="2">
Ausser Du hast einem der Divs, in dem Fall vermutlich #1 und #3 Floats und/oder relative Positionen zugewiesen, dann liegt es vermutlich daran.
Wenn das Layout nicht dynamisch sein soll würde ich eh generell verzichten, und mit absoluten Positionen arbeiten.
Zuletzt bearbeitet von traumgaertner am Mo 26.01.2009 05:54, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
lara_s
Dabei seit: 06.12.2006
Ort: BERLIN Kreuzberg
Alter: 46
Geschlecht: 
|
Verfasst Di 27.01.2009 11:30
Titel
|
|
|
Das sind die drei divs. Infobox ist das erste div, direkt darunter soll ein grüner balken (was ich auch einfach als div gemacht habe) und daneben, also auf der gleichen Höhe von infobox, kommt dann das hauptspalten div.
Klappt aber nicht. ich hab schon alles möglich probiert mit clear:both und position:relative, aber irgendwie klappts nie....
--------------------------------------------------------------------------------------------------------
.infobox {
margin-top:-4px; margin-left: 14px;
width:145px;
padding-left: 20px; padding-top: 25px; padding-bottom: 35px; padding-right: 23px;
background-image: url(../img/background3.png);
layer-background-image: url(../img/background3.png);
}
.gruen {
margin-left: 14px;
width:145px;
}
.hauptspalte {
float:left;
margin-top:-4px; margin-left: 5px; margin-bottom: 18px; margin-right:10px;
width:516px;
padding-left: 20px; padding-top: 45px; padding-bottom: 15px; padding-right: 30px;
background-image: url(../img/backgroundh.png);
layer-background-image: url(../img/backgroundh.png);
}
--------------------------------------------------------------------------------------------------------
Zuletzt bearbeitet von lara_s am Di 27.01.2009 11:50, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
traumgaertner
Dabei seit: 18.01.2009
Ort: Franken
Alter: 43
Geschlecht:
|
Verfasst Di 27.01.2009 12:54
Titel
|
|
|
Au weia ^^
Da macht es sich jemand aber ganz schön kompliziert 
Warum arbeitest Du nicht mit Positionsangaben? Auch dann wenn das Layout dynamisch sein soll...diese ganzen Angaben wohin Deine Container marschieren sollen (diese haufenweise margins) haben ja noch gar keinen klaren Bezugspunkt wohin sie genau wandern sollen, geschweigedenn von wo aus das geschehen soll.
Hier mal das (ganz grobe) Grundgerüst für die richtige Positionierung, damit erstmal optisch alles da ist wo es hingehört:
| Code: | .layer {
position:absolute;
top:10px;
left:20px;
height:200px;
width:661px;
border:1px solid black;
}
.infobox {
position:absolute;
top:0px;
left:0px;
height:100px;
width:145px;
background-color:red;
border:none;
}
.hauptspalte {
position:absolute;
top:0px;
left:145px;
width:516px;
height:200px;
background-color:blue;
border:none;
}
.gruen {
position:relative;
top:100px;
height:10px;
width:145px;
background-color:green;
border:none;
}
|
Und das HTML dazu:
| Code: | <div class="layer">
<div class="infobox"></div>
<div class="gruen"></div>
<div class="hauptspalte"></div>
|
Der zusätzliche Layer, den ich hier eingebaut habe, dient dazu dass Du deine drei Container gruppiert frei auf der Seite positionieren kannst. Der ganze "Komplex" hat jetzt einen festen Bezugspunkt unabhängig von der Seite selbst; vorher haben sich ja alle getrennt voneinander am Body ausgerichtet, was unnötig kompliziert ist und so in der Form meist auch gar nicht funktioniert.
Die Höhen- und Breitenangaben, Rahmen etc im Layer dienen nur der Veranschaulichung und sind unerheblich.
Jetzt kannst Du auch mit deinen margins und paddings (in Kombination miteinander immer etwas aufpassen, dass es nicht zu komplex wird) wesentlich zielsicherer arbeiten.
Zuletzt bearbeitet von traumgaertner am Di 27.01.2009 12:56, insgesamt 2-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
div nebeneinander positionieren
[CSS] 4 DIVS nebeneinander
3 divs nebeneinander
[css] divs nebeneinander zentrieren
divs positionieren
mehrere divs nebeneinander ohne umbruch
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
