 |
Seite 1 von 1
|
| Autor |
Nachricht |
wernerix
Gast
|
 Dreispaltenlayout mit Spalten gleicher Länge
Hallo Leute,
ich habe ein Problem... Ich will eine Seite mit drei Spalten erstellen (ohne Tabellen!), und zwar so, dass alle drei Spalten gleich lang sind. Leider kriege ich das nicht hin. Egal, was ich mache, sind die spalten unterschiedlich lang. Sad
Der Code soll etwa so aussehen:
Code:
<div id="page">
<div id="left">...</div>
<div id="main">...</div>
<div id="main">...</div>
</div>
Was soll ich nun in CSS schreiben, damit alle drei Spalten *immer* wirklich gleich lang sind? Unabhängig davon, welcher Text in den Spalten steht!
|
| So Okt 15, 2006 9:33 pm |
|
|
Kai Hagemeister
Gast
|
RE: Dreispaltenlayout mit Spalten gleicher Länge
Dein HTML könnte folgend aussehen:
Code:
<head>
<style type="text/css" title="currentStyle" media="screen">
@import "1.css";
</style>
</head>
<body>
<div id="container">
<div id="containerInner">
<div id="header">
<h1>Header</h1>
</div>
<div id="main">
<div id="center">
Center
</div>
<div id="sidebarL">
Left
</div>
</div>
<div id="sidebarR">
Right
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</body>
Das CSS dazu:
Code:
#container {
max-width: 1200px;
background: url(img/dreiSpaltenR.gif) repeat-y 70% 0;
}
#containerInner {
background: url(img/dreiSpaltenL.gif) repeat-y 28% 0;
}
#header {
background: #966;
}
#main {
width: 70%;
float: left;
}
#center {
width: 60%;
float: right;
}
#sidebarL {
background: #966;
width: 40%;
float: left;
}
#sidebarR {
background: #966;
width: 30%;
float: right;
}
#footer {
clear: both;
background: #966;
}
Die gleiche Spaltenlänge erreicht man durch die beiden Bilder. Dafür musst Du 2 Bilder der Länge 2000px erstellen. Beim Bild für die rechte Spalte, färbst Du 600px von rechts in der Farbe ein, wie Deine rechte Spalte sein soll. Beim Bild für die linke Seite färbst Du 560px in der Farbe ein, wie Deine linke Spaltenfarbe sein soll. Beim zweiten Bild setzt Du den Hintergrund transparent, so dass er die Farben des ersten Bildes für die mittlere und rechte Spalte nicht überdeckt.
Kai
|
| Mo Okt 16, 2006 7:29 pm |
|
|
wernerix
Gast
|
Hm... Funktioniert tatsächlich! Vielen Dank! 
Ich habe viele Beispiele im Netz gefunden, aber sie hatten entweder statische Spaltenbreiten oder hantierten mit negativen Offsets, was ziemlich kompliziert aussah und Probleme bei vielen Browsern verursacht.
Aber die von Dir beschriebene Methode ist ja im Prinzip nicht viel anders als mit statischen Spaltenbreiten und Hintergrundbildern. Nur wird hier die Eigenschaft der Bildskalierung ausgenutzt. Darauf muss man erstmal kommen.
|
| Mi Okt 18, 2006 6:21 pm |
|
|
Vlad
Anmeldedatum: 15.10.2006
Beiträge: 7
|
Code:Dafür musst Du 2 Bilder der Länge 2000px erstellen.
Aufgrund dieses Monitors würde ich mindestens 2560px nehmen, oder gleich 3000, damit die Rechnung einfacher wird. 
Naja, eigentlich ist diese Methode auch eine Krücke. Aber es oft ist die beste Krücke. Diese Methode ist aber auch nicht ohne. Man muss stets aufpassen, dass kein 1-Pixel-Fehler durch Division entsteht. Außerdem ist mir aufgefallen, dass einige ältere Browser sich um 1 Pixel verrechnen, selbst wenn sich eigentlich eine ganze Zahl ergeben müsste. Vorsicht ist also angebracht! Am besten vermeidet man Layouts, wo es auf Pixelgenauigkeit ankommt. Oder man verzichtet ganz darauf und macht die gleiche Hintergrundfarbe bei allen Spalten. 
Leider gibt es keine saubere Möglichkeit, die Höhe mehrerer Elemente in Relation zueinander festzulegen, so dass es von heutigen Browsern unterstützt wird. Deswegen muss man sich leider mit solchen Tricks wie Hintergrundbildern behelfen. Mit CSS 3 soll es aber möglich werden:
http://www.w3.org/TR/2001/WD-css3-multicol-20010118/
|
| Mi Okt 18, 2006 10:29 pm |
  |
|
Andreas
Anmeldedatum: 25.03.2007
Beiträge: 8
|
Problem
Hallo,
ich habe mit der hier vorgeschlagenene Lösung folgendes Problem.
Unter Firefox funktioniert das prima. Unter IE jedoch nicht. Der IE scheint die Angabe für die Wiederholung des Hintergrundbilds zu ignorieren. Um das zu umgehen, muss ich eine Höhe für die gesamte Box angeben. Beispielsweise 100%. Was ja eigentlich Unsinn ist, denn dadurch habe ich genau das, was ich nicht wollte, nämlich eine festgelegte Höhe.
Während der IE es dann aber richtig darzustellen scheint, verhält sich Firefox so, wie es sein sollte. Er hört nach 100% auf  .
Gibt es eine Lösung für das Problem?
|
| So März 25, 2007 10:55 am |
|
|
Andreas
Anmeldedatum: 25.03.2007
Beiträge: 8
|
Nachtrag
Ich habe noch ein weiteres Problem.
Innerhalb der Center-Box habe ich eine weitere Box gesetzt, um so vernünftige Abstände setzen zu können.
Nun habe ich versucht, innerhalb der inneren Box, die Inhalte per margin: auto zu zentrieren. Das läuft auch wieder mal prima im Firefox, der IE beachtet die Anweisung einfach nicht. Hat jemand eine Idee, woran es liegen könnte?
|
| So März 25, 2007 10:58 am |
|
|
Gilbertkai
Anmeldedatum: 10.12.2008
Beiträge: 9
Wohnort: Berlin
|
Yaml
Wenn ich mal was empfehlen darf, schaut mal bei www.yaml.de rein.
Alle Spalten möglich,Browserprobleme sind weitgehend beseitigt
Viel Erfolg
_________________ Vielen Dank
Gilbertkai
www.wtm-online.de
|
| Fr Aug 14, 2009 5:29 am |
 |
|
Andreas
Anmeldedatum: 25.03.2007
Beiträge: 8
|
Re: Yaml
Gilbertkai hat Folgendes geschrieben:Wenn ich mal was empfehlen darf, schaut mal bei www.yaml.de rein.
Alle Spalten möglich,Browserprobleme sind weitgehend beseitigt
Viel Erfolg
Vielen Dank. Hast Du das schon ausprobiert?
|
| Mo Okt 12, 2009 1:55 pm |
|
|
Gilbertkai
Anmeldedatum: 10.12.2008
Beiträge: 9
Wohnort: Berlin
|
Re: Yaml
Andreas hat Folgendes geschrieben:Gilbertkai hat Folgendes geschrieben:Wenn ich mal was empfehlen darf, schaut mal bei www.yaml.de rein.
Alle Spalten möglich,Browserprobleme sind weitgehend beseitigt
Viel Erfolg
Vielen Dank. Hast Du das schon ausprobiert?
Wir machen fast alle Webseiten mit yaml, du findest die Beispiele unter Referenzen
_________________ Vielen Dank
Gilbertkai
www.wtm-online.de
|
| Do Jan 14, 2010 9:25 pm |
|
|
|
|
Aktuelles Datum und Uhrzeit: Mi Feb 08, 2012 7:50 am | Alle Zeiten sind GMT
| |
Seite 1 von 1
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
Impressum
|
