• Liebe User, bitte beachtet folgendes Thema: Was im Forum passiert, bleibt im Forum! Danke!
  • Hallo Gemeinde! Das Problem leidet zurzeit unter technischen Problemen. Wir sind da dran, aber das Zeitkontingent ist begrenzt. In der Zwischenzeit dürfte den meisten aufgefallen sein, dass das Erstellen von Posts funktioniert, auch wenn das Forum erstmal eine Fehlermeldung wirft. Um unseren Löschaufwand zu minimieren, bitten wir euch darum, nicht mehrmals auf 'Post Reply' zu klicken, da das zur Mehrfachposts führt. Grußworte.

HTML: div-Layout richtig gestalten (CSS gesucht)

Sholvar

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
ich möchte folgendes Layout hinbekommen:
layoutgerstvd6.gif

Der grüne Container enthält den gesamten Inhalt der Seite. Das kann der Body sein. Alle anderen Container sollen divs sein.
Die roten Container sind in dem grünen Container und trennen Kopf, Körper und Fuß Bereich der Seite. Im Körper gibt es zusätzlich nochmal eine 3 Spalten einteilung, die auch durch drei divs realisiert werden soll.

Alle divs sollen folgende Bedingungen erfüllen:
- kein Rand oder Abstand in irgendeine Richtung
- eine feste Breite
- die Höhe ist mindestens 0
- in jede Dimension umschliessen(!) die Grenzen des Containers zu jeder Zeit seinen Inhalt
- diese Bedingungen sind unabhängig von der Realisierung des Inhalts

das HTML:
PHP: 
<body>
  <div id="header" class="red">
  </div><div id="body" class="red">
    <div id="content-left" class="yellow">
       <!-- hier kommt Content unbekannter definition rein -->
    </div><div id="content-center" class="yellow">
       <!-- hier kommt Content unbekannter definition rein -->
    </div><div id="content-right" class="yellow">
       <!-- hier kommt Content unbekannter definition rein -->
    </div>
  </div><div id="footer" class="red">
  </div>
</body>

Tjo. Irgendwie muss man das jetzt mit CSS so formatieren, dass es auch funktioniert. Ich dachte eigentlich das korrekt gemacht zu haben, aber jetzt springt mir zum hundertsten Mal der Content durch verschiedene Implementierung irgendwo hin, und der Footer bleibt oben am Header kleben. Dabei würde das nicht passieren, wenn das content umschliessende div seine größe an seinen Inhalt anpassen würde. :|

helpz
 

CyoZ

Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
wo ist denn genau das problem jetzt ?

bei den roten div's ist doch nicht mehr zu tun, als eine höhe und breite zu setzen.. die ordnen sich doch automatisch unterneinander an.

die gelben dann floaten lassen..
 

Sholvar

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
das problem ist, dass die Person, die für den Content zuständig ist, natürlich auch wieder divs verwendet. Und die gelben Divs passen sich von der Größe nicht an diese divs an. Deshalb liegt mein Footer hinter dem Content statt da drunter.
 

voelkerballtier

Coverage, Staff, Coding
Mitglied seit
01.12.2003
Beiträge
1.603
Reaktionen
0
benutzt diese person position attribute im css? ohne diese sollte das eigentlich nicht passieren
 

Sholvar

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
kann sein. es sind ziemlich viele CSS Dateien, die er mir da gegeben hat ;)

Wie kann er es denn anders machen?
 

CyoZ

Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
wenn da divs in den containern sind, wirst du es IMO nicht hinkriegen, dass die wirklich immer alles umschließen.

wenn diese andere person irgendwo margin:-400px reinhaut rutscht es halt raus.

versuch mal beim footer clear:both. dann sollte da immerhin schonmal nichts hinfloaten.
 

CyoZ

Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
so habe jetzt mal schnell was geschrieben:

html:

Code: 
<div ID="wrapper">

	<div ID="header"></div>
	
	<div ID="inhaltwrapper">
	
		<div class="inhalt"></div>
		<div class="inhalt"></div>
		<div class="inhalt"></div>
	
	</div>
	
	<div ID="footer"></div>

</div>

CSS:
Code: 
#wrapper {
width:800px;
margin:0 auto;
background-color:green;
border:solid 1px black;
}

#header {
margin:5px auto;
background-color:red;
height:200px;
width:750px;
border:solid 1px black;
}

#inhaltwrapper {
margin:0 auto;
background-color:red;
height:700px;
width:750px;
border:solid 1px black;
}

.inhalt {
background-color:yellow;
float:left;
width:230px;
height:600px;
border:solid 1px black;
margin-left:12px;
margin-top:10px;
}

#footer {
clear:both;
margin:5px auto;
background-color:red;
height:200px;
width:750px;
border:solid 1px black;
}

border nur zur veranschaulichung.
 

Sholvar

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
im Moment scheint es halbwegs zu funktionieren, wenn ich aus position:absolute einfach position:relative mache und dann die top: und left: angaben anpasse.

Danke für die Ausführliche Antwort, Cyoz. Dazu noch ein paar kleine Fragen: Welchen Unterschied macht das auto hinten am margin. Hab das schon ein paar Mal in CSS Dateien gesehen, aber bei selfhtml oder css4you bin ich bisher noch nicht drüber gestolpert. Und wenn ich es weglasse hatte sich da für mich auch noch nie was geändert.
Was ist der defaultwert für die senkrechten divs, dass diese trotzdem korrekt floaten?
 

voelkerballtier

Coverage, Staff, Coding
Mitglied seit
01.12.2003
Beiträge
1.603
Reaktionen
0
wenn man margin-left und margin-right auf auto setzt, wird das element horizontal zentriert (vertikale zentrierung analog) - das ist eigentlich der einzige mir bekante fall wo man auto einsetzen kann.

die frage mit dem default-wert versteh ich nicht
 

Sholvar

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
wenn ich nichts angebe, wie sich ein <div> verhalten soll, hat es doch ein bestimmtes Default-Verhalten. Welche Eigenschaften hat dieses Verhalten?
 

CyoZ

Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
div's nehmen standartmäßig allen horizontalen platz ein und ordnen sich ohne abstand untereinander an.

wie völkerballtier schon gesagt hat, macht margin:0 auto oben und unten 0px abstand, rechts und links zentriert.
Mit float hat das nichts zu tun.


wofür brauchst du denn position: relative? das führt nur dazu, dass die anderen blockelemente das element mit position:relative so behandeln als wäre es nicht verschoben worden.. für dieses design seh ich da kein grund dafür.

mach es lieber mit margins.

poste doch einfach mal dein CSS.
 

Sholvar

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
wenn wir den position tag ganz rausgenommen haben, dann haben sich im Content die Content Elemente verschoben, weil sie ihr parent-div einfach ignoriert haben, wenn dieses kein position:xyz enthalten hat.

Würde es eigentlich auch gehen, wenn man für alles komplett feste Werte nimmt und garnichts mehr relativ lässt?

Dann müsste der Inhalt natürlich auch von mir Vorgaben für die Positionierung kriegen, aber eigentlich ist er ja sowieso an die Entwürfe des Layouters gebunden.
 

Sholvar

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
Original geschrieben von e-Sport)Xedo(
klar geht es, jedoch höchst unüblich.
Zum Vergrößern anklicken....
Warum?
Ich hab noch nicht soviel Erfahrung damit, größere Seiten zu managen, wo verschiedenste Leute dran mitarbeiten. Wenn man was für sich selbst macht, ist es ja meist egal, welchen Weg man geht. Aber in der Gruppe sollte man schon etwas machen, was allgemeinen Zuspruch findet.
Ich brauch die Argumente außerdem um sie dann vor meinem Layouter zu vertreten ;)
 

voelkerballtier

Coverage, Staff, Coding
Mitglied seit
01.12.2003
Beiträge
1.603
Reaktionen
0
du scheinst dich noch nicht allzu viel mit css auseinandergesetzt zu haben.

das ignorieren der parent divs ist normal und dokumentiert

entweder du baust das ganze layout mit position oder machst es komplett ohne - eine mischung ist immer problematisch
mit position verlierst du u.a. halt jegliche anpassung an die fensterbreite und vermutlich auch die anpassung an die contenthöhe (bin mir nicht sicher ob man das vllt doch hinbekommt). bw.de layout geht zb mit nicht position attributen...
 

RRA^StArFiRe

Guest
evtl. hilft dir das property "white-space: nowrap" weiter?
 

CyoZ

Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
vielleicht eine kleine hilfe:

wenn du das mit position:relative positionierst, dann reagieren nachfolgende elemente so, als wäre das position:relative nicht da. es wird da die orginalposition genommen.

wenn das zb mit ner negative margin machst, reagieren nachfolgende elemente auf die neue position.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben