3-Spalten-CSS layout - Hintergrundfarbe

[Patchie]

Ich will ein 3-Spalten-Layout bei dem alle Spalten gleich lang sind, auch wenn der Hinhalt bei einer Spalte mal viel länger ist.

Mein Problem wird schnell sichtbar: Ich habe zwar alles gleich lang und auch die gleiche Farbe für die Außenspalten doch die Farbe der Mainbox ist nicht "bis zum Boden" Weiß. Wie kann ich das lösen?

http://www.beeindruckende-technologie.d ... loat2.html

[Lareth]

Ich will ein 3-Spalten-Layout bei dem alle Spalten gleich lang sind, auch wenn der Hinhalt bei einer Spalte mal viel länger ist.

Mein Problem wird schnell sichtbar: Ich habe zwar alles gleich lang und auch die gleiche Farbe für die Außenspalten doch die Farbe der Mainbox ist nicht "bis zum Boden" Weiß. Wie kann ich das lösen?

http://www.beeindruckende-technologie.d ... loat2.html

CSS clear sollte helfen. Alternativ schau mal das hier an: http://www.pixy.cz/blogg/clanky/css-3col-layout/

[Matthias]

Das Problem ist, dass die Mainbox nur soweit gebildet wird, wie der Text in der Box geht, du müsstest also die Box dazu kriegen, immer bis ganz unten zu gehen, mir fällt aber grad nix ein, wie man das mit CSS machen könnte. Aber du könntest eine Grafik mit der Höhe von 1Px erstellen und der Breite des Outer-Div's und die dann einfach auf Repeat-Y stellen und in das Outer-Div als Hintergrundgrafik laden.

Edit: zu langsam

MfG
Matze

[ocin-r]

"Faux Columns" heißt das Zauberwort
Lies dir am besten mal den folgenden Artikel durch: http://www.alistapart.com/articles/fauxcolumns/

greetz ocin-r

[Patchie]

COOL!

Ich werde das mal durchprobieren.

Also ich mache ja seit 1999 so ein bisschen was mit Webseiten aber man lernt nie aus!

Ist das eigentlich ernst zu nehmen wenn jemand schreibt er ist Exprter für HTML, JavaScript, PHP und mySQL?
Ich meine es ist ja schon schwer (und wegen der Browser) guten Code zu schreiben und womöglich noch Ahnung von Design zu haben aber sich mit so vielen Sachen wirklich auszukennen geht doch gar nicht?
Außer da hat jemand Medieninformatik studiert und in einem Unternehmen mehrere Projekte begleitet. Doch wenn man 8 Stunden täglich für Fremde programmiert hat man ganz sicher keinen Bock selber noch ne Seite zu betreiten...

Bewerbugnsunterlagen:

Beruf: Diplom Informatiker
Hobbys: Programmieren

*neard Bewerbung*

[Lareth]

Ehrlich gesagt habe ich bis jetzt nie Hacks benutzen müssen. Gut, den IE 5 ignoriere ich total, aber wer benutzt den schon?

[Manuel]

Ist das eigentlich ernst zu nehmen wenn jemand schreibt er ist Exprter für HTML, JavaScript, PHP und mySQL?
Ich meine es ist ja schon schwer (und wegen der Browser) guten Code zu schreiben und womöglich noch Ahnung von Design zu haben aber sich mit so vielen Sachen wirklich auszukennen geht doch gar nicht?
Außer da hat jemand Medieninformatik studiert und in einem Unternehmen mehrere Projekte begleitet. Doch wenn man 8 Stunden täglich für Fremde programmiert hat man ganz sicher keinen Bock selber noch ne Seite zu betreiten...

Bewerbugnsunterlagen:

Beruf: Diplom Informatiker
Hobbys: Programmieren

*neard Bewerbung*

Puh, was wirst du dann bloß über mich denken? Eigentlich bin ich ganz normal, aber die Sachen oben kann ich alle ziemlich gut (außer JavaScript, aber das ist erlernbar *gg*) und Diplom Informatiker bin ich auch fast und ne eigene Seite habe ich auch
Oh weh

@Lareth: Wenns um 3-spaltige Layouts geht fand ich das mit CSS bisher immer sehr umständlich und das wird auch noch ne lange Zeit so bleiben. Wir verwenden ja ein 2-spaltiges Layout und das ist auch etwas getrickst, wovon ich niemals erwartet hätte, dass es in allen Browsern so stabil läuft.

[Lareth]

@Lareth: Wenns um 3-spaltige Layouts geht fand ich das mit CSS bisher immer sehr umständlich und das wird auch noch ne lange Zeit so bleiben. Wir verwenden ja ein 2-spaltiges Layout und das ist auch etwas getrickst, wovon ich niemals erwartet hätte, dass es in allen Browsern so stabil läuft.

Sicher, tricksen ist erlaubt. Das 3-Spaltige-Layout da ist ja auch getrickst. Für mich zählt, was am Ende rauskommt. Und man kann dir Tricks ja Eleganter nutzen, mit Farbverläufen oder aber komplett umgehen, in dem man die Navi-Bauteile einfach modularisiert und einzeln gestaltet.

Noch ein paar Hinweise zum oben aufgeführten Beispiel:

- Im Inhalts-Div sollte das nächste Element auf gar keinen Fall eine Breite von 100% haben, dann gibts Probleme im IE 6
- Der leere clear-div am Ende sollte mit Inhalt gefüllt werden. Ich mach da immer den Footer rein.

[Patchie]

Da das einfach nicht klappen will habe ich das mit den 3-Spalten über den Haufen geworfen und 2-Spalten gebaut. So wie der Typ es auch auf seiner Webseite erklärt.
Ergebniss: Klappt immer noch nicht!

http://www.beeindruckende-technologie.d ... ig_v1.html

Im IE schon doch FF un OP wollen nicht. Kannn machen was ich will es geht einfach nicht vorwärts. Hat jemand eine Idee?

[Avedo]

Hast du dir den Artikel auf alistapart mal durchgelesen? Da steht die Antwort auf deine Frage drin. Du machst einfach ein Design ala

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

   <head>     
      <title>&middot; Deine-Website.tld &middot;</title>

      <meta name="Title" content="Name der Website" />
      <meta name="Author" content="name@mail.tld" />
      <meta name="Publisher" content="Deine-Website.tld" />
      <meta name="Copyright" content="Deine-Website.tld" />
      <meta name="Revisit" content="After 2 days" />
      <meta name="Keywords" content="hier, stehen, nun, Stcihwörter" />
      <meta name="Description" content="Hier steht was zu deiner Seite." />
      <meta name="Abstract" content="Here you can tell us something about your website." />
      <meta name="Robots" content="INDEX,FOLLOW" />
      <meta name="Language" content="Deutsch" />
      <meta name="Distribution" content="DE, AT, CH, EU" />
      <meta http-equiv="content-Type" content="text/html;charset=iso-8859-1" />
     
      <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
      <link rel="stylesheet" type="text/css" href="design.css"/>
   </head>
     
   <body>
      <div id="page">
         <div id="masthead">Deine-Website.tld</div>
                 
         <ul id="navigation">           
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Imprint</a></li>
         </ul>
         
         <div id="content">
            <h1 class="headline">Herzlich Willkommen</h1>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam erat, sed diam voluptua.
         </div>
         
         <p id="footer">Copyright &copy; 2008 www.Deine-Website.tld - Alle Rechte Vorbehalten.</p>
      </div>
   </body>
</html>


und setzt im Div-Container page einen Hinterrund mit repeat-y, sodass nun zwei Spalten in unterschiedlichen Farben zu sehen sind.
MfG, Andy

[Patchie]

Klar hab ich mir das durchgelesen. Beschäftige mich seit fast 2 Wochen damit aber es klappt einfach nicht.
Werde das ganze noch mal auf dem Marktplatz posten, wenn ich Geld habe, aber hier ist erstmal schluss. Wenn es nicht geht geht es eben nicht. Bin einfach nicht in der Lage es zu verstehen.

*closed*

[Eyecatcher]

Was ist an einem einfachen 3-Spalten-CSS-Layout denn so kompliziert?

Code: Alles auswählen

<div id="hauptcontainer">
  <div id="links"></div>
  <div id="mitte"></div>
  <div id="rechts"></div>
  <div id="nofloat"></div>
</div>

Code: Alles auswählen

#hauptcontainer {
width:400px;
overflow:auto;
background-image:url(bla.jpg);
background-repeat:repeat-y;
}
#links {
float:left;
width:100px;
}
#mitte {
width:200px;
float:left;
}
#rechts {
width:100px;
float:left;
}
#nofloat {
float:none;
}

[Patchie]

An dem Grundkonstrukt gar nichts. Hier ist exakt dein Code, von mir mit etwas Inhalt gefüllt.

http://www.beeindruckende-technologie.d ... _eins.html

Klappt perfekt.

Doch der ganze threat wurde ja von mir gestartet, weil ich eigentlich wissen wollte wie man so etwas vermeidet (auch exakt dein Code):

http://www.beeindruckende-technologie.d ... _zwei.html

Wenn der Linke-Navi oder der Rechte-Banner Bereich zu "lang" werden, also länger als der Haupt oder Mainbereich, dann sieht es doof aus.

Bin aber zu dem Schluß gekommen, das ich das ignoriere und einfach weniger Banner in den Bereich mache. Bei wenig Maincontent wenig Banner. Und mein 2-Spalten-Layout lass ich mir von nem "Profi" erstellen. Poste ich auf dem Marktplatz. Oder ich mache eine Anfrage bei einer "Webagentur" aber die "Billigesten" wollen mindestesn 150€. Das waren mal 300 DM

Irgentwie lol. Ich bin wieder da wo alles angefangen hat...

Edit:
Ganz vegessen zu sagen: Wenn der
#hauptcontainer {
width:400px;
overflow:auto;

background-color: red;
}
eine background-color hat, braucht man ja auch diese repeat-y Sache nicht
Das mit repeat-y WAR ja gerade DER Versuch ALLE 3-Spalten gleich Lang zu bekommen an der ich hier so rumkrebse und nicht vorwärts komme.

[ocin-r]

Hab mal eben eine Beispielseite gemacht.
http://ocinr.oc.funpic.de/faux_columns/faux_columns.html
Hier ist das benutzte Bild:

Und hier kommt der Quelltext:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
  <title>BLUB</title>
  <style type="text/css" media="screen"><!--
   html, body {
   background: #9f3636 url(bg.jpg) repeat-y 50% 0;
   margin: 0px auto;
   }
   #container {
   width: 400px;
   margin: 0px auto;   
   }
   #links {
   float: left;
   width: 100px;
   color: #ffffff;
   }
   #mitte {
   width: 200px;
   float: left;
   }
   #rechts {
   width: 100px;
   float: left;
   color: #ffffff;
   }
   #nofloat {
   float: none;
   }
  --></style>
</head>
<body>
<div id="container">
   <div id="links">
      Lorem Ipsum is simply dummy
      text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard
      dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only
      five centuries, but also the leap into electronic
      typesetting, remaining essentially unchanged. It
      was popularised in the 1960s with the release of
      Letraset sheets containing Lorem Ipsum passages,
      and more recently with desktop publishing software
      like Aldus PageMaker including versions of Lorem Ipsum.
   </div>
   <div id="mitte">
      Mitte
   </div>
   <div id="rechts">
      Rechts
   </div>
   <div id="nofloat">
   </div>
</div>
</body>
</html>

Hab teile aus Eycatchers Quelltext benutzt. Is ja bestimmt ok.
Kannste von mir aus alles so benutzen.

greetz ocin-r

[Patchie]

Shit. JETZT HABE ICH DAS FAUX COLAM VERSADEN!!!

Also wirklich. Die Erklärung auf der Webseite ist müll (nicht Dummy sicher). Und ich denke die GANZE ZEIT, das es egal ist wie das Hindtergrundbild ausschaut. Dabei MUSS es genau so sein wie die 3-Spalten-Konstruktion!
Hätte mir aber auch mal jemand sagen können!
Ich mache immer so nen Futzel und denke "warum geht das Ding nicht in jeder Spalte bis zum Boden und Bedeckt auch den ganzen Hintergrund??!"
Habe ja mehrfach geposted

Also es muss so sein Linker Navi 130 pixel BREIT (Höhe min. 1 Pixel), Main 500 Pixel und der rechte Banner auch wieder 130.

Noch mal für alle: ICH HABS VERSTANDEN! Das hat echt Nerven gekostet...

Kannste von mir aus alles so benutzen.

greetz ocin-r

Danke, aber entspricht ja, auch meinem Code. Nur das ich das eben mit der Grafik nicht verstanden habe