3 Spalten mit div´s

[Frettchen]

3 Spalten mit div´s

Mal ne frage.

Wie bekomme ich 3 div´s wie auf dem Bild zu sehen nebeneinander.

Quasi soll links ein menue hin und rechts so ne info spalte und in die Mitte text und so.

Habe da schon rumgefummelt mit float:left und so aber da kann man aj nur links und rechts ausrichten. Raff das nciht so ganz.

 

[DivineDominion]

musst breiten angeben und beim mittleren bereich (der sich ja mitvergrößern soll, nehme ich an) mit width:100%; und margin-left und -right arbeiten, die als wert die breite der spalten der jeweiligen sidebars haben.

Hier ein schöner Artikel dazu
http://www.alistapart.com/articles/negativemargins/

 

[Frettchen]

Hmm, versteh ich jetzt nicht ganz, aber habe es grade eben hinbekommen.

Das ganze soll nacher in der Mitte zentriet sein un 760px breit sein. Habe den linken div mit float:left ausgerichtet und die anderen mit float:right und allen mit width feste breiten zugeordnet. Nun gehts. Ob das so richtig ist weis ich nun auch nicht, aber der IE und FF zeigen es so an wie ich gerne hätte.

 

[DivineDominion]

Das da feste Breiten und float vorkommt passt schon. Aber der mittlere kann sich ruhig der Größe Anpassen (klingt so als hättest du dem auch ne feste Breite gegeben).

Der wichtige Teil da ist:

<div id="wrapper">
    <div id="container">
      <div id="content">
      
        <div id="left">
          <h1>navbar</h1>
          <ul>
            [*]link one
            [*]link two
          [/list]
        </div>
        
        <div id="main">
          <h1>content</h1>
          

Lorem ipsum dolor sit amet,
          consectetuer adipiscing elit.
          Phasellus varius eleifend.</p>
          <p class="last">Donec euismod.
          Praesent mauris mi, adipiscing non,
          mollis eget, adipiscing ac, erat.
          Integer nonummy mauris sit.</p>
        </div>
        
      </div>
    </div>

    <div id="sidebar">
      <h1>sidebar</h1>
      

Here be your sidebar.
      Add whatever content you may desire.</p>
    </div>

    <div class="clearing"></div>
  </div>
  
</div>

Und zum Ausrichten das hier (die Background-Images sind dafür da, um ein Tabellen aussehen mit gleicher vertikaler Höhe zu haben):

http://www.alistapart.com/d/negativemargins/background_2.gif Sidebar rechts
http://www.alistapart.com/d/negativemargins/background_3.gif Navigation links

#outer_wrapper {
  background: #fff url(background_3.gif) repeat-y left; /* Navigation-BG */
}
#wrapper {
  background: url(background_2.gif) repeat-y right; /* Sidebar-BG */
}
/* 
  Container und Content wrappen quasi das gleiche, man brauch aber einen für
  die Breite mit float und einen "festen" für den Inhalt selber. Also Content immer
  zweimal wrappen */
#container {
  width: 100%;
  float: left;
  margin-right: -200px;
  background: url(background_2.gif) repeat-y right;
}
#content {
  margin-right: 200px;
  background: url(background_3.gif) repeat-y left;
}

#left {
  width: 150px;
  float: left;
}
#main {
  margin-left: 150px;
}
#sidebar {
	width: 200px;
	float: right;
}

Dieses Zeug da ist ganz nützlich wenn die Website nicht nur 760px breit, sondern 100% breit sein soll.

 

[Frettchen]

Also so langsam komm ich schon weiter. Stehe nur auf dem schlauch jetzt.

Also ich habe ein paar divs in einen eingeschlossen. Dieser eine soll aussen rum einen rahmen ziehen. Da sklappt auch wunderbar, nur nicht im Firefox. IE geht es.

Schaut es euch mal an.

http://www.supporters-trier.de/sct2/index.php

Der Code der css:

.rahmen {
margin:0px auto;
background-color: #CCCCCC;
width: 780px;
border: 1px solid #000000;
padding: 3px;
}
.titel {
background-color: #999999;
margin-bottom: 3px;
border: 1px solid #000000;
}
.navi {
background-color: #999999;
border: 1px solid #000000;
width: 120px;
float:left;
margin-right: 3px;
}
.content {
background-color: #CCCCCC;
width: 508px;
border: 1px solid #000000;
float:left;
margin-right: 3px;
}
.sitebar {
width: 140px;
border: 1px solid #000000;
float:left;
background-color: #CCCCCC;
}

 

[Prophet]

du hast das div von sitebar nicht geschlossen.

wenn das nichts bringt dann setz danach noch folgenden zeilenumbruach: <br style="clear:both;" />

 

[Frettchen]

Danke,

der div war aber geschlossen. Aber mit dem Zeilenumbruch hats funktioniert.

 

[CrackPod]

den zeilen umbruch muss man immer setzten, da float dieselbe wirkung hat wie align auf ein bild und zwar, dass der text/andere tags diesen tag und den inhalt in der form umfliesen wie float angibt deswegen muss man sobald diese tags geschlossen sind und man normal weiterarbeiten will <br style="clear:both;" \> schreiben

guten tag ;ugl

 

[Frettchen]

Supi.

Danke

 

[DivineDominion]

Muss übrigens kein
sein. clear:both; tuts auch in dadrunter folgenden Elementen wie einem footer.

 

[Frettchen]

Mal was anderes. Wenn ich ind er mitte sehr viel text habe der weiter nach unten geht wie die navi oder sitebar gefüllt ist, wie bekomme ich es dnn hin das sich der div z.B. von der navi sich bis nach unten durchzieht, da der ja eine andere farbe hat als der wo der text ist. Versteht keiner, gel??

Quasi soll der div wo die navibar drin ist sich automatisch bi unten hin ziehen, also so weit wie der Text den Berich nach unten drückt.

___________________________________
|Link--------| text---------------|-------------|
|Link--------| text---------------|-------------|
|Link--------| text---------------|-------------|
|Link--------| text---------------|-------------|
|-------------| text---------------|-------------|
|-------------| text---------------|-------------|
|-------------|--------------------|-------------|
|-------------|--------------------|-------------|

 

[DivineDominion]

Muss er wirklich nach unten oder soll es nur aussehen wie eine Tabelle?

Dan Cederholm hat da was geschrieben: http://www.alistapart.com/articles/fauxcolumns/

Du baust um alle 3 Spalten einen <div id="wrap"> o.ä. und gibst dem ein Hintergrundbild auf dem alle 3 Spalten drauf sind. Wenn sich die mittlere Spalte an die Bildschirmbreite anpasst, geht das antürlich nicht.

Dann musst du gruppieren.

Z.B. "wrap" ganz außen rum, mit "background: url(bild_rechts) right repeat-y;" um die rechte Spalte mit nem Hintergrund auszustatten.
Dann die links und die in der Mitte mit "content-wrap" oder sowas nochmal einschließen. Da nimmst du dann: "background #content_farbe url(bild_links) left repeat-y;" und gibst eine hintergrudnfarbe für beide Spalten. Da die linke Spalte aber mit einer Grafik utnerlegt wird, behält nur der Content diese Farbe.

Klingt bisschen komisch und gewöhnungsbedürftig - isses auch - aber klappt ganz gut wenn man damit ein wenig rumprobiert.

Wenn das jetzt irgendwie ein bisschen komisch war, mach ich gerne ein sample :)

In meinem langenpost oben habe ich das Prinzip übrigens auch erwähnt. Lies dir das bitte vorher nochmal durch :)

 

[Frettchen]

Also die Spalten haben feste Werte,das gehen. Werd mich dann mal versuchen.

Danke

 

[Frettchen]

Hat Super funktioniert mit deiner Idee. Danke nochmals.