mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 15.07.2020 00:24 Benutzername: Passwort: Auto-Login

Thema: CSS / Newbie / DIVs nebeneinander positionieren? vom 31.01.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS / Newbie / DIVs nebeneinander positionieren?
Seite: Zurück  1, 2, 3
Autor Nachricht
traumgaertner

Dabei seit: 18.01.2009
Ort: Franken
Alter: 39
Geschlecht: Männlich
Verfasst Mo 26.01.2009 05:51
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
lara_s

Dabei seit: 06.12.2006
Ort: BERLIN Kreuzberg
Alter: 42
Geschlecht: Weiblich
Verfasst Di 27.01.2009 11:30
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
traumgaertner

Dabei seit: 18.01.2009
Ort: Franken
Alter: 39
Geschlecht: Männlich
Verfasst Di 27.01.2009 12:54
Titel

Antworten mit Zitat Zum Seitenanfang

Au weia ^^

Da macht es sich jemand aber ganz schön kompliziert Lächel

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] 4 DIVS nebeneinander
[css] divs nebeneinander zentrieren
css Div _Layer Problem / mehrere Divs nebeneinander und unte
div nebeneinander positionieren
3 divs nebeneinander
divs positionieren
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.