nicht angemeldet
Problem mit Faux columns
Matthias Apsel
JürgenBHallo zusammen!
Bin dabei eine Homepage für den Verein zu erstellen. Der Aufbau ist so gestaltet, dass oben der Header ist über die ganze Breite, darunter über die ganze Breite ein Css-Dropdown-Menü und darunter der Content-Bereich, der seit heute Morgen 3-spaltig ist.
Jetzt sollen die Spalten links und rechts eine andere Hintergrundfarbe haben, als die in der Mitte. Und da habe ich das Problem, dass die Farben nicht durchgehend bis zum Ende der Seite gehen. Habe schon gegoogled, Faust columns und so weiter...hab auch alles mögliche ausprobiert, zuletzt Wrapper um das ganze drum herum gebaut, aber er zeigt es nicht so an, wie es gedacht ist.
Sieht so aus: http://www.myimg.de/?img=vorschau702b4.jpg
Erstens ist unten noch ein weißer Streifen über die ganze Breite und zweitens ist in der Mitte auch noch was falsch, da taucht auf einmal die Seitenfarbe auf, was ich garnicht verstehe...
Also Frage ist: Was muss ich verändern, damit ich 3 Spalten mit den Farben x,y,x habe, die jeweils bis zum unteren Seitenende gehen ?
Und hier Code:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Homepage des SV Unna</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="header.jpg" alt="header" width="100%" height="30%" style="float:left"/>
<div id="menu"><!-- öffnet die Navigationsleiste-->
<ul><!-- öffnet den ersten Themenblock -->
<li><h3><a href="index.html">Startseite</a></h3></li>
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Der Verein</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="vorstand.html">Der Vorstand</a></li>
<li><a href="">Die Mannschaften</a></li>
<li><a href="">Bildergalerie</a></li>
<li><a href="">Vereinsgeschichte</a></li>
<li><a href="">Sponsoren</a></li>
<li><a href="">Mitgliedschaft beantragen</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
<ul><!-- öffnet den ersten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 1 -->
<h3><a href="">Spielbetrieb</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 1 -->
<li> <h3> <a href="#">Mannschaften ></a> </h3>
<ul><!--öffnet die dritte Ebene für die Unterpunkte von 1.1-->
<li><a href="unna1.html">Unna I</a></li>
<li><a href="unna2.html">Unna II</a></li>
<li><a href="unna3.html">Unna III</a></li>
<li><a href="">Unna IV</a></li>
</ul><!--schließt die dritte Ebene für die Unterpunkte von 1.1-->
</li>
<li><a href="">Vereinsabend</a></li>
<li><a href="">Vereinsmeisterschaft</a></li>
<li><a href="">Turniere</a></li>
<li><a href="rangliste.html">Rangliste</a></li>
</ul><!-- schließt die Klappnavi von Thema 1 -->
</li><!-- schließt die Listeneinträge von Thema 1 -->
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Jugend</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="">Training</a></li>
<li><a href="">Diplome</a></li>
<li><a href="">Turniere</a></li>
<li><a href="">Jugend-Rangliste</a></li>
<li><a href="">Schulschach</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Unna Open</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="">Ausschreibung</a></li>
<li><a href="">Spielplan</a></li>
<li><a href="">Rangliste</a></li>
<li><a href="">DWZ-Auswertung</a></li>
<li><a href="">Feedback</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3><a href="">Links/Archiv</a></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="http://sbhamm.de" target="_blank">SB Hamm</a></li>
<li><a href="http://www.sbhamm.de/Jugendhome.html" target="_blank">SJ Hamm</a></li>
<li><a href="http://www.jugend.svr-schach.de/" target="_blank">Jugend SVR</a></li>
<li><a href="http://www.schachbund.de/spieler.html" target="_blank">DWZ - Suche</a></li>
<li><a href="" target="_blank">Archiv</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li><!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
</div><!-- schließt die Menüleiste #menu -->
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<nav>
<br />
<h2 style="text-decoration:underline"> Aktuelle Termine: </h2><br /><br />
<p> 04.10.2013: Trainingsabend </p><br />
<p> 24.12.2013: Weihnachten </p><br />
<p> 31.12.2013: Silvester </p><br />
<p> 24.12.2014: Weihnachten </p><br />
<p> 31.12.2014: Silvester </p><br />
<p> 24.12.2015: Weihnachten </p><br />
<p> 31.12.2015: Silvester </p><br />
</nav>
<nav class="right">
<br /><h2 style="text-decoration:underline">Partienschätze</h2><br />
<a href=""><img src="schatz.gif" alt="schatz" /></a>
<br /><br /><br />
<h2 style="text-decoration:underline">Aufgabe des Tages:</h2>
<br /><br />
<iframe width="310" scrolling="no" height="341" frameborder="0" src="http://www.shredderchess.com/online/playshredder/
gdailytactics.php?mylang=de&mysize=32"></iframe>
</nav>
<div id="content">
<br /><br />
<h2 style="color:#800000; line-height: 1.5em"> Willkommen auf der neuen Homepage des Schachvereins Unna 1924! <br />
- Der SV Unna -
</h2>
<div id="horizmenue">
<ul>
<li><a href="index.html">Startseite</a></li>
</ul>
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<ul>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<ul>
<li><a href="impressum.html">Anfahrt</a></li>
</ul>
</div><!-- schließt die Menüleiste #horizmenue -->
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>
</html>
@CHARSET "ISO-8859-1";
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Menüleiste unten--*/
#horizmenue {
width: 45%;
margin-top:40%;
margin-left: 27.5%;
margin-right: 27.5%;
font-family: Verdana;
font-size: 0.75em;
line-height: 1.0;
}
#horizmenue li {
display: inline;
float: left;
padding: 1%;
}
#horizmenue a {
padding: 2px 8px 5px;
}
/*--formatiert die Menüleiste--*/
#menu {
width: 100%;
padding: 0;
background: #003366;
font-family: Verdana;
font-size: 1.0em;
line-height: 1.5;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 16.666%;
list-style-type: none;
}
#menu > ul ul {
width: 100%;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366; /*--erforderlich für IE 7--*/
background: #ff8000;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #FFFAFA;
color: #003366;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #ff9224;
background: #003366;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}
/*--versteckt die dritte Ebene--*/
#menu ul li:hover ul ul {
display: none;
}
/*-- lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten und nach rechts ausklappen--*/
div#menu ul ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}
html,body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
}
#content {
background-color: #FFE4B5;
text-align:center;
font-family: Verdana;
font-size: 1.0em;
line-height: 1.0;
width:55%;
float:left;
}
#content > p {
width: 55%;
text-align:left;
line-height: 2.0em;
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
float:left;
}
#content > p > a {
}
.iframe_spielplan iframe {
display:block;
width:100%;
border:none;
height:100%;
}
header {
background:#123456;
width: 100%;
height: 30%;
}
table {
float:left;
background-color:#F5DEB3;
}
.layout_rangliste td {
width:10%;
height: 20px;
}
.layout_rangliste tr.even td {
background-color:#FAEBD7;
}
nav{
width: 22.5%;
border:0px solid black;
padding-top: 20px;
float:left;
background-color: #F5DEB3;
text-align:center;
}
.right {
float:right;
}
#wrapper1
{
background-color:#F5DEB3;
background-position:0 0;
background-repeat:repeat-y;
}
#wrapper2
{
background-color:#FFE4B5;
background-position:22.5% 0;
background-repeat:repeat-y;
}
#wrapper3
{
background-color:#F5DEB3;
background-position:77.5% 0;
background-repeat:repeat-y;
}
-
Hallo zusammen!
Bin dabei eine Homepage für den Verein zu erstellen. Der Aufbau ist so gestaltet, dass oben der Header ist über die ganze Breite, darunter über die ganze Breite ein Css-Dropdown-Menü und darunter der Content-Bereich, der seit heute Morgen 3-spaltig ist.
Jetzt sollen die Spalten links und rechts eine andere Hintergrundfarbe haben, als die in der Mitte. Und da habe ich das Problem, dass die Farben nicht durchgehend bis zum Ende der Seite gehen. Habe schon gegoogled, Faust columns und so weiter...hab auch alles mögliche ausprobiert, zuletzt Wrapper um das ganze drum herum gebaut, aber er zeigt es nicht so an, wie es gedacht ist.
Ja, CSS ist in der Hinsicht einfach _längst_ noch nicht weit genug.
Mein Ratschlag: hör auf, das HTML zu vermurksen mit irgendwelchen Wrappern oder ähnlichem und schreib dir ein kleines Javascript, was das tut, was du willst. Achte darauf, dass die Seite auch ohne Javascript benutzbar ist (auch wenn sie dann nicht so hübsch aussieht).Wahrscheinlich werde ich jetzt von einigen hier für diesen Vorschlag geköpft, aber es ist wesentlich besser die CSS Schwächen durch Javascript auszubügeln, als sie durch HTML Workarounds auszubessern, die nur den Sinn haben das Design zu beeinflussen.
-
Hallo zusammen!
Mein Ratschlag: hör auf, das HTML zu vermurksen mit irgendwelchen Wrappern oder ähnlichem und ...
bring es lieber erstmal in Ordnung. ;-)
Es steckt voller Fehler und semantisch nicht korrekten Elementen.
Auch die Wahl des Doctypes sollte man nochmal überdenken.Ferner macht es keinen Sinn, für jeden Listenpunkt eine separate Liste anzulegen.
Und wenn wir schon bei "Neuerungen" sind, dann empfehle ich, sich mal das Flexbox Modul von CSS3 anzugucken. Damit lässt sich ein solches Layout sehr einfach realisieren.
Google spuckt zu den jeweiligen Themen dutzende hilfreiche Treffer aus. ;-)
Gruß Gunther
-
Also bin jetzt erstmal zu ner Version zurückgegangen wo ich noch keine Wrapper hatte...
Sieht auf meinem 23 Zoll Monitor auch alles richtig aus. Auf meinem 19 Zoll Laptop nur leider nicht (Farben gehen nicht bis nach unten, wie beschrieben).Hier nochmal der aktuelle Code. Was da für Fehler drin sein sollen weiss ich nicht, hab den Doctype nochmal angepasst, und w3c validator sagt nur 1 Fehler, der dadurch entsteht das ich img width 100% benutze, was man ja ignorieren kann glaube ich. Wenn ich den fehler rausnehme, gibt er mir komplett grünes Licht. (P.s. die Hex-codes hab ich jetzt nur für den validator gemacht, sonst liest er die Datei nicht, weiss aber eh nicht warum er da meckert weil die Umlaute nur in den Kommentaren waren -.-)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>Homepage des SV Unna</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="header.jpg" alt="header" width="100%" style="float:left"/> <div id="menu"><!-- \xF6ffnet die Navigationsleiste--> <ul><!-- \xF6ffnet den ersten Themenblock --> <li><h3><a href="index.html">Startseite</a></h3></li> </ul><!--schlie\xDFt den ersten Themenblock--> <ul><!-- \xF6ffnet den zweiten Themenblock --> <li><!-- \xF6ffnet die Listeneintr\xE4ge von Thema 2 --> <h3><a href="">Der Verein</a></h3> <ul><!-- \xF6ffnet die Klappnavi von Thema 2 --> <li><a href="vorstand.html">Der Vorstand</a></li> <li><a href="">Die Mannschaften</a></li> <li><a href="">Bildergalerie</a></li> <li><a href="">Vereinsgeschichte</a></li> <li><a href="">Sponsoren</a></li> <li><a href="">Mitgliedschaft beantragen</a></li> </ul><!-- schlie\xDFt die Klappnavi von Thema 2 --> </li><!-- schlie\xDFt die Listeneintr\xE4ge von Thema 2 --> </ul><!--schlie\xDFt den zweiten Themenblock--> <ul><!-- \xF6ffnet den ersten Themenblock --> <li><!-- \xF6ffnet die Listeneintr\xE4ge von Thema 1 --> <h3><a href="">Spielbetrieb</a></h3> <ul><!-- \xF6ffnet die Klappnavi von Thema 1 --> <li> <h3> <a href="#">Mannschaften ></a> </h3> <ul><!--\xF6ffnet die dritte Ebene f\xFCr die Unterpunkte von 1.1--> <li><a href="unna1.html">Unna I</a></li> <li><a href="unna2.html">Unna II</a></li> <li><a href="unna3.html">Unna III</a></li> <li><a href="">Unna IV</a></li> </ul><!--schlie\xDFt die dritte Ebene f\xFCr die Unterpunkte von 1.1--> </li> <li><a href="">Vereinsabend</a></li> <li><a href="">Vereinsmeisterschaft</a></li> <li><a href="">Turniere</a></li> <li><a href="rangliste.html">Rangliste</a></li> </ul><!-- schlie\xDFt die Klappnavi von Thema 1 --> </li><!-- schlie\xDFt die Listeneintr\xE4ge von Thema 1 --> </ul><!--schlie\xDFt den ersten Themenblock--> <ul><!-- \xF6ffnet den zweiten Themenblock --> <li><!-- \xF6ffnet die Listeneintr\xE4ge von Thema 2 --> <h3><a href="">Jugend</a></h3> <ul><!-- \xF6ffnet die Klappnavi von Thema 2 --> <li><a href="">Training</a></li> <li><a href="">Diplome</a></li> <li><a href="">Turniere</a></li> <li><a href="">Jugend-Rangliste</a></li> <li><a href="">Schulschach</a></li> </ul><!-- schlie\xDFt die Klappnavi von Thema 2 --> </li><!-- schlie\xDFt die Listeneintr\xE4ge von Thema 2 --> </ul><!--schlie\xDFt den zweiten Themenblock--> <ul><!-- \xF6ffnet den zweiten Themenblock --> <li><!-- \xF6ffnet die Listeneintr\xE4ge von Thema 2 --> <h3><a href="">Unna Open</a></h3> <ul><!-- \xF6ffnet die Klappnavi von Thema 2 --> <li><a href="">Ausschreibung</a></li> <li><a href="">Spielplan</a></li> <li><a href="">Rangliste</a></li> <li><a href="">DWZ-Auswertung</a></li> <li><a href="">Feedback</a></li> </ul><!-- schlie\xDFt die Klappnavi von Thema 2 --> </li><!-- schlie\xDFt die Listeneintr\xE4ge von Thema 2 --> </ul><!--schlie\xDFt den zweiten Themenblock--> <ul><!-- \xF6ffnet den zweiten Themenblock --> <li><!-- \xF6ffnet die Listeneintr\xE4ge von Thema 2 --> <h3><a href="">Links/Archiv</a></h3> <ul><!-- \xF6ffnet die Klappnavi von Thema 2 --> <li><a href="http://sbhamm.de" target="_blank">SB Hamm</a></li> <li><a href="http://www.sbhamm.de/Jugendhome.html" target="_blank">SJ Hamm</a></li> <li><a href="http://www.jugend.svr-schach.de/" target="_blank">Jugend SVR</a></li> <li><a href="http://www.schachbund.de/spieler.html" target="_blank">DWZ - Suche</a></li> <li><a href="" target="_blank">Archiv</a></li> </ul><!-- schlie\xDFt die Klappnavi von Thema 2 --> </li><!-- schlie\xDFt die Listeneintr\xE4ge von Thema 2 --> </ul><!--schlie\xDFt den zweiten Themenblock--> </div><!-- schlie\xDFt die Men\xFCleiste #menu --> <div style="clear: both;"> </div> <!--cleart die gefloatete Men\xFCleiste--> <nav> <br /> <h2 style="text-decoration:underline"> Aktuelle Termine: </h2><br /><br /> <p> 04.10.2013: Trainingsabend </p><br /> <p> 24.12.2013: Weihnachten </p><br /> <p> 31.12.2013: Silvester </p><br /> <p> 24.12.2014: Weihnachten </p><br /> <p> 31.12.2014: Silvester </p><br /> <p> 24.12.2015: Weihnachten </p><br /> <p> 31.12.2015: Silvester </p><br /> </nav> <nav class="right"> <br /><h2 style="text-decoration:underline">Partienschätze</h2><br /> <a href=""><img src="schatz.gif" alt="schatz" /></a> <br /><br /><br /> <h2 style="text-decoration:underline">Aufgabe des Tages:</h2> <br /><br /> <iframe width="310" height="341" src="http://www.shredderchess.com/online/playshredder/gdailytactics.php?mylang=de&mysize=32"></iframe> </nav> <div id="content"> <br /><br /> <h2 style="color:#800000; line-height: 1.5em"> Willkommen auf der neuen Homepage des Schachvereins Unna 1924! <br /> - Der SV Unna - </h2> <div id="horizmenue"> <ul> <li><a href="index.html">Startseite</a></li> </ul> <ul> <li><a href="kontakt.html">Kontakt</a></li> </ul> <ul> <li><a href="impressum.html">Impressum</a></li> </ul> <ul> <li><a href="impressum.html">Anfahrt</a></li> </ul> </div><!-- schlie\xDFt die Men\xFCleiste #horizmenue --> </div> </body> </html>Das mit der Flexbox hab ich versucht... leider komme ich damit absolut überhaupt nicht klar... ausser das sich alles komplett verschoben hat, hatte ich dadurch garkeinen sinnvollen Effekt...
Also andere Lösung suchen... :/
-
Was ich auch noch sagen muss ist, das ich das Problem schon hatte als ich noch keine 3 Spalten hatte... mit irgendwelchen height=67% angaben für den content (nav links und rechts gabs vorher noch nicht) konnt ich das dann ungefähr so beheben, dass man es nicht mehr sah, aber da war schon klar, das etwas nicht stimmte..
-
-
-
Hallo,
Ja, CSS ist in der Hinsicht einfach _längst_ noch nicht weit genug.
Ist das so? display: table gibt es seit CSS 2.1 (1998) und 2009 erschien der erste IE mit Unterstützung dafür (Version 8, heute sind wir bei Version 11). Flexbox wurde auch schon angesprochen – es wird von allen aktuellen Browsern unterstützt.
Wahrscheinlich werde ich jetzt von einigen hier für diesen Vorschlag geköpft
Nein, hier wird hoffentlich niemand geköpft. Es werden höchstens sachliche Inkorrektheiten richtig gestellt und ergänzt.
aber es ist wesentlich besser die CSS Schwächen durch Javascript auszubügeln, als sie durch HTML Workarounds auszubessern, die nur den Sinn haben das Design zu beeinflussen.
Das ist im Allgemeinen richtig. Aber Faux-Columns-Lösungen für Floats werden schon seit neun (!) Jahren diskutiert und die Lösungen sind sehr robust. Dasselbe gilt für display: table. Und selbst für Flexbox lässt sich (je nach Komplexität des Layouts) recht robust einsetzen, wenn es einen Fallback für ältere Browser gibt. Großartige HTML-Workarounds sind dafür nicht nötig. Es gibt zudem dutzende ausgereifte kostenlose Frameworks, die Spaltenlayouts zum Kinderspiel machen – man muss das Rad nicht neu erfinden.
Wir sind nicht mehr im Jahr 2002, wo man noch groß diskutieren musste, ob und wie simple Layouts mit CSS möglich sind. Mein Artikel von Januar 2006 (!) zum Thema ist immer noch lesenswert und beschäftigt sich auch mit gleich langen Spalten:
Grundlagen für Spaltenlayout mit CSSMathias
-
Hallo,
Ja, CSS ist in der Hinsicht einfach _längst_ noch nicht weit genug.
Ist das so? display: table gibt es seit CSS 2.1 (1998)
Ja und? Damit kannst du den Style, den du willst, trotzdem nicht umsetzen, ohne am HTML rumzupfuschen. Erst mit CSS 3 geht das. Und der Terminus "von allen aktuellen Browsern"... naja... wenn es nur um die ginge...
aber es ist wesentlich besser die CSS Schwächen durch Javascript auszubügeln, als sie durch HTML Workarounds auszubessern, die nur den Sinn haben das Design zu beeinflussen.
Das ist im Allgemeinen richtig. Aber Faux-Columns-Lösungen für Floats werden schon seit neun (!) Jahren diskutiert und die Lösungen sind sehr robust.
Anscheinend haben wir eine andere Ansicht von "sehr robust". Alleine die Tatsache, dass die Dinger _faux_ columns heißen, sagt doch schon alles. In Spezialfällen(!) lässt sich die Anforderung umsetzen, aber nicht generell.
Beispiel von deinem Link: "I’m sharing my particular solution (for use with an absolutely positioned layout)"
Schön, aber was ist, wenn ich nicht mit absoluten Positionsangaben arbeite?Dasselbe gilt für display: table. Und selbst für Flexbox lässt sich (je nach Komplexität des Layouts) recht robust einsetzen, wenn es einen Fallback für ältere Browser gibt. Großartige HTML-Workarounds sind dafür nicht nötig.
Ob sie großartig oder kleinartig sind, ist zumindest mir egal. Ich will das HTML für das Design nicht anfassen. Punkt.
Es gibt zudem dutzende ausgereifte kostenlose Frameworks, die Spaltenlayouts zum Kinderspiel machen – man muss das Rad nicht neu erfinden.
Dann zeig mal eins mit CSS 2, dass genau diesen Style Effekt hinkriegt, ohne HTML Elemente hinzuzufügen, die inhaltich nicht sinnvoll sind. Und ohne Javascript natürlich. Ich bin gespannt, vielleicht kannst du mich ja überzeugen. Am besten mit einer konkreten Seite, wo das mal beispielhaft gezeigt wird.
-
display: table gibt es seit CSS 2.1 (1998)
Ja und? Damit kannst du den Style, den du willst, trotzdem nicht umsetzen, ohne am HTML rumzupfuschen. Erst mit CSS 3 geht das.
Ich weiß nicht, was du meinst. Was muss ich deiner Meinung nach »am HTML herumpfuschen«, wenn ich display: table einsetze? Und wieso soll das mit Flexbox nicht mehr möglich sein?
Ob ich mit Floats, display: table/table-cell oder Flexbox arbeite, die HTML-Struktur für ein dreispaltiges Layout sieht in allen Fällen ähnlich aus:
<div> <div></div> <div></div> <div></div> </div>div hier nur als Platzhalter für ggf. passendere Elemente mit genauerer Bedeutung. In manchen Fällen brauche ich den Wrapper nicht einmal.
Beispiel von deinem Link: "I’m sharing my particular solution (for use with an absolutely positioned layout)"
Schön, aber was ist, wenn ich nicht mit absoluten Positionsangaben arbeite?Hättest du den Artikel wirklich gelesen, wärst du auf diesen Abschnitt gestoßen:
»While I use absolute positioning to create a two-column layout on my own site, equally fine results can be achieved via the float property (as seen here at [A List Apart]). …«
Mein Artikel von 2006 behandelt ebenfalls gleich hohe Spalten bei Float-Layouts. Jedes beliebige CSS-Framework bringt dafür eine Lösung mit.
Ich will das HTML für das Design nicht anfassen. Punkt.
Was stört dich konkret, das gruppierende Element um die drei Spalten? Ich wüsste nicht, welche Layoutsprache auf Erden es ermöglicht, solche Container wegzulassen. Selbst Flexbox nicht. Das hat technische Gründe.
Dann zeig mal eins mit CSS 2, dass genau diesen Style Effekt hinkriegt, ohne HTML Elemente hinzuzufügen, die inhaltich nicht sinnvoll sind. … Ich bin gespannt, vielleicht kannst du mich ja überzeugen.
Wie wäre es, wenn du dich selbst einmal informierst, anstatt grundlegendes CSS-Wissen zu leugnen, über das schon 2008 ganze Bücher geschrieben worden sind.
Ich bin hier nicht, um Leute von altbekannten technischen Fakten zu überzeugen. Ich bin hier, um Leuten dabei zu helfen, sich selbst weiterzubilden. Ich habe bereits mehrere Artikel verlinkt, die du dir durchlesen kannst, und Stichworte genannt, nach denen du suchen kannst.
Mathias
-
display: table gibt es seit CSS 2.1 (1998)
Ja und? Damit kannst du den Style, den du willst, trotzdem nicht umsetzen, ohne am HTML rumzupfuschen. Erst mit CSS 3 geht das.
Ich weiß nicht, was du meinst.
Zeig mir doch einfach mal ein Beispiel wie du das meinst, dann kann ich es dir vielleicht besser erklären. Kriegt man mit display:table nicht das Problem, dass die Spalten nicht mehr untereinander angezeigt werden können?
Beispiel von deinem Link: "I’m sharing my particular solution (for use with an absolutely positioned layout)"
Schön, aber was ist, wenn ich nicht mit absoluten Positionsangaben arbeite?Hättest du den Artikel wirklich gelesen, wärst du auf diesen Abschnitt gestoßen:
»While I use absolute positioning to create a two-column layout on my own site, equally fine results can be achieved via the float property (as seen here at [A List Apart]). …«
Und weiter "The same idea applies: tile the background image, then float a column in position to overlay the faux-column backdrop behind."
Das ist nicht das, was ich will. Ich will, dass die Spalte eine entsprechende Länge hat, nicht dass sie nur so aussieht. Das war _genau_ das, was ich mit meinem entsprechenden Hinweis meinte, dass es ja auch "faux" heißt, den du leider nicht zitiert hast. =/Mein Artikel von 2006 behandelt ebenfalls gleich hohe Spalten bei Float-Layouts. Jedes beliebige CSS-Framework bringt dafür eine Lösung mit.
Und wenn die Spalten immer mindestens bis zum Ende der Seite gehen sollen? Vielleicht wärst du so nett und gibst mir das passende Beispiel an, ich habe jedenfalls auf die schnelle keins gefunden.
Ich will das HTML für das Design nicht anfassen. Punkt.
Was stört dich konkret, das gruppierende Element um die drei Spalten? Ich wüsste nicht, welche Layoutsprache auf Erden es ermöglicht, solche Container wegzulassen. Selbst Flexbox nicht. Das hat technische Gründe.
Naja, wenn man das html Element auch als Container ansieht, dann ist es okay, aber an sich, warum sollte die drei Elemente denn einen Container haben?
Dann zeig mal eins mit CSS 2, dass genau diesen Style Effekt hinkriegt, ohne HTML Elemente hinzuzufügen, die inhaltich nicht sinnvoll sind. … Ich bin gespannt, vielleicht kannst du mich ja überzeugen.
Wie wäre es, wenn du dich selbst einmal informierst, anstatt grundlegendes CSS-Wissen zu leugnen, über das schon 2008 ganze Bücher geschrieben worden sind.
Du meinst doch das geht so einfach. Wieso soll ich mir dann erst ein Buch durchlesen? Wenn du mir kein Beispiel zeigen kannst (oder es anderweitig erklären kannst) dann bleibe ich eben bei meiner Meinung und die Diskussion ist für mich beendet.
Ich bin hier nicht, um Leute von altbekannten technischen Fakten zu überzeugen. Ich bin hier, um Leuten dabei zu helfen, sich selbst weiterzubilden. Ich habe bereits mehrere Artikel verlinkt, die du dir durchlesen kannst, und Stichworte genannt, nach denen du suchen kannst.
Habe ich ja, aber nix gefunden. Wenn du die so gut kennst, wo ist das Problem einfach mal ein Beispiel ähnlich wie dieses http://blog.selfhtml.org//files/2006-01-spaltenlayout-beispiel11.html herauszusuchen und hier zu schreiben?
-
Om nah hoo pez nyeetz, Whouzuo!
Ich will, dass die Spalte eine entsprechende Länge hat, nicht dass sie nur so aussieht.
Macht das tatsächlich einen Unterschied, der für den Benutzer relevant ist? display: table-* dürfte das leisten. http://dabblet.com/gist/6666960
Matthias
-
Om nah hoo pez nyeetz, alle zusammen!
Ich will, dass die Spalte eine entsprechende Länge hat, nicht dass sie nur so aussieht.
Macht das tatsächlich einen Unterschied, der für den Benutzer relevant ist? display: table-* dürfte das leisten. http://dabblet.com/gist/6666960
Es dürfte doch wohl unbestritten sein, dass mehrspaltige Layouts vor der Einführung des Flexbox-Moduls immer ihre "speziellen Tücken" hatten und haben.
Floats haben u.a. halt den Nachteil der nicht wirklich gleich hohen Spalten. Dafür ist bei der Verwendung von 'display:table' das Problem, dass es auf die source order ankommt.
Überhaupt ist imho die "Höhe" nach wie vor eines der größten Probleme von CSS.
Aber es war halt auch schon immer so, dass man sich mit den jeweils vefügbaren/ unterstützten Möglichkeiten "arrangieren" musste. Und im Bezug auf mehrspaltige Layouts finde ich auch, dass es heutzutage genug Möglichkeiten gibt, sodass dür jeden Anwendungsfall eine passende dabei sein sollte.
Gruß Gunther
-
-
Kriegt man mit display:table nicht das Problem, dass die Spalten nicht mehr untereinander angezeigt werden können?
Sie können durch Media Queries untereinander angezeigt werden, falls erforderlich. Da die meisten Float-Layouts mit festen Breiten arbeiten, gibt es diesbezüglich keinen Unterschied zwischen Floats und CSS-Tabellen: Es sind Media Queries nötig, um sie zu serialisieren. Oder bei »Mobile First«: Es sind Media Queries nötig, um sie nebeneinander anzuzeigen.
Ich will, dass die Spalte eine entsprechende Länge hat, nicht dass sie nur so aussieht.
Was ist bei CSS der Unterschied zwischen »es sieht so aus« und »sie ist wirklich so lang«? In den meisten Fällen spielt er keine Rolle.
Und wenn die Spalten immer mindestens bis zum Ende der Seite gehen sollen?
Das geht nicht mit Floats (ohne JavaScript), aber mit Flexbox und Tabellen.
an sich, warum sollte die drei Elemente denn einen Container haben?
Weil es eine Liste von Items ist, die in gewisser Weise angeordnet werden. Klar, das ist nicht notwendigerweise eine semantische Auszeichnung, aber Layoutsysteme erfordern diesen Container. Floats i.d.R. einen Container mit Clearfix. Tabellenzellen einen Container mit display: table. Flexbox-Items erfordern einen Container mit display: flex. Aus UI-Toolkits wie Adobe Flex und XUL kenne ich das genauso.
In HTML sollte für den Container ein möglichst passendes Element gesucht werden. Das kann z.B. section, header, footer, article oder main sein, je nachdem.
Wenn du mir kein Beispiel zeigen kannst (oder es anderweitig erklären kannst) dann bleibe ich eben bei meiner Meinung und die Diskussion ist für mich beendet.
Der Artikel, den ich verlinkt habe, beginnt mit einem Beispiel für display: table/table-cell, und der Rest des Artikels erklärt dieses:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/Die Grundstruktur ist einfach:
<div style="display: table"> <div style="display: table-cell"></div> <div style="display: table-cell"></div> <div style="display: table-cell"></div> <!-- … --> </div>Mathias
-
Kriegt man mit display:table nicht das Problem, dass die Spalten nicht mehr untereinander angezeigt werden können?
Sie können durch Media Queries untereinander angezeigt werden, falls erforderlich. Da die meisten Float-Layouts mit festen Breiten arbeiten, gibt es diesbezüglich keinen Unterschied zwischen Floats und CSS-Tabellen: Es sind Media Queries nötig, um sie zu serialisieren. Oder bei »Mobile First«: Es sind Media Queries nötig, um sie nebeneinander anzuzeigen.
Ich möchte eigentlich eine Mindestbreite angeben und dass bei Unterschreiten der Mindestbreite die Spalten untereinander angezeigt werden. Unabhängig vom Ausgabemedium, ich will das schließlich auch PC. Tatsächlich ärgert mich das als Anwender oft, wenn ich den Browser mal etwas kleiner mache, um mehrere Fenster nebeneinander zu haben.
Ich will, dass die Spalte eine entsprechende Länge hat, nicht dass sie nur so aussieht.
Was ist bei CSS der Unterschied zwischen »es sieht so aus« und »sie ist wirklich so lang«? In den meisten Fällen spielt er keine Rolle.
Es geht ganz einfach darum, dass es so eine Umsetzung viel näher an meinen Gedanken ist. Und wenn ich mal eine Website sehe, die ich nicht programmiert habe und eine Spalte sieht so aus als wäre sie entsprechend lang, dann bin ich erstmal verwirrt wenn sie es doch nicht ist - außer ich kenne die entsprechende Problematik. Es ist einfach überraschend und soetwas sollte man IMMER vermeiden, völlig unabhängig von der Programmiersprache.
Vom Aussehen her mag es erstmal keinen Unterschied machen, da hast du Recht.Und wenn die Spalten immer mindestens bis zum Ende der Seite gehen sollen?
Das geht nicht mit Floats (ohne JavaScript), aber mit Flexbox und Tabellen.
Dann haben wir doch wieder die anderen Probleme, auch die von Matthias Aspel genannten.
an sich, warum sollte die drei Elemente denn einen Container haben?
Weil es eine Liste von Items ist, die in gewisser Weise angeordnet werden. Klar, das ist nicht notwendigerweise eine semantische Auszeichnung, aber Layoutsysteme erfordern diesen Container.
Eben und das ist mir zuwider. Wenn dir das egal ist, dann versteh ich auch, warum du mir so heftig widersprichst. Teilweise sind Container ja sinnvoll, aber eben nicht immer.
Wenn du mir kein Beispiel zeigen kannst (oder es anderweitig erklären kannst) dann bleibe ich eben bei meiner Meinung und die Diskussion ist für mich beendet.
Der Artikel, den ich verlinkt habe, beginnt mit einem Beispiel für display: table/table-cell, und der Rest des Artikels erklärt dieses:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/Die Grundstruktur ist einfach:
<div style="display: table">
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<!-- … -->
</div>Da findet kein Umbruch statt, wenn ich die Seite kleiner mache...-
Hallo,
Ich möchte eigentlich eine Mindestbreite angeben und dass bei Unterschreiten der Mindestbreite die Spalten untereinander angezeigt werden.
Das ist derzeit eine Aufgabe für Media Queries. Die vorhandenen Layouttechniken haben das nicht eingebaut.
Weil es eine Liste von Items ist, die in gewisser Weise angeordnet werden. Klar, das ist nicht notwendigerweise eine semantische Auszeichnung, aber Layoutsysteme erfordern diesen Container.
Eben und das ist mir zuwider. Wenn dir das egal ist, dann versteh ich auch, warum du mir so heftig widersprichst. Teilweise sind Container ja sinnvoll, aber eben nicht immer.
Es ist mir nicht egal, sonst würde ich ja nicht darauf eingehen. Ich habe 2005/2006 hitzige Diskussionen mit Leuten geführt, die meinten, das damals neue und aufgrund der Browsersituation sehr fragile CSS-Layout brächte im Gegensatz zu Tabellenlayout (<table>, <tr>, <td> direkt im HTML) nun ultimativ semantisches Markup mit sich. Tatsächlich brachte es vor allem div-Suppe.
Viele sehen das pragmatisch und stören sich nicht an gruppierenden Elementen wie div und span, die nur als CSS-Angriffspunkte eingeführt werden, aber nichts zur Strukturierung des Inhalts beitragen. Sie versuchen außerdem, zusätzliche Semantik durch IDs und Klassen hinzuzufügen. Ich persönlich bin noch puristischer als andere und versuche, das Markup so clean wie möglich zu halten und stelle jedes zusätzliche Element, was aus CSS-Sicht nötig scheint, erst einmal infrage.
Fakt ist, dass alle vorhandenen Layoutmöglichkeiten i.d.R. Container benötigen, und das hat durchaus technische Gründe. Von einem theoretischen Standpunkt kann und sollte man das infrage stellen. Aber in der Praxis sind die heute noch nötigen zusätzlichen Element kein großer Aufwand und blähen das HTML nicht signifikant auf. Vor einigen Jahren hat man noch unzählige HTML-Elemente benötigt, um simple Effekte zu erreichen. Mit CSS3-Eigenschaften und eingefügten CSS-Boxen (:before/:after und content) ist das zum großen Teil weggefallen.
Grüße,
Mathias-
Hallo,
Ich möchte eigentlich eine Mindestbreite angeben und dass bei Unterschreiten der Mindestbreite die Spalten untereinander angezeigt werden.
Das ist derzeit eine Aufgabe für Media Queries. Die vorhandenen Layouttechniken haben das nicht eingebaut.
Dann sollten die das mal nachholen, ein bisschen tut sich ja bei CSS3 wenigstens. Kann ich denn (siehe Antwort auf Gunther) dann auch mit meinen PC Browser die Seite öffnen, den Browser kleiner machen und dann wird die Media Query angewendet? Das ist nämlich genau einer der wichtigen Anwendungsfälle, die ich meine.
Weil es eine Liste von Items ist, die in gewisser Weise angeordnet werden. Klar, das ist nicht notwendigerweise eine semantische Auszeichnung, aber Layoutsysteme erfordern diesen Container.
Eben und das ist mir zuwider. Wenn dir das egal ist, dann versteh ich auch, warum du mir so heftig widersprichst. Teilweise sind Container ja sinnvoll, aber eben nicht immer.
Es ist mir nicht egal, sonst würde ich ja nicht darauf eingehen. Ich habe 2005/2006 hitzige Diskussionen mit Leuten geführt, die meinten, das damals neue und aufgrund der Browsersituation sehr fragile CSS-Layout brächte im Gegensatz zu Tabellenlayout (<table>, <tr>, <td> direkt im HTML) nun ultimativ semantisches Markup mit sich. Tatsächlich brachte es vor allem div-Suppe.
Die div-Suppe. =)
Viele sehen das pragmatisch und stören sich nicht an gruppierenden Elementen wie div und span, die nur als CSS-Angriffspunkte eingeführt werden, aber nichts zur Strukturierung des Inhalts beitragen. Sie versuchen außerdem, zusätzliche Semantik durch IDs und Klassen hinzuzufügen. Ich persönlich bin noch puristischer als andere und versuche, das Markup so clean wie möglich zu halten und stelle jedes zusätzliche Element, was aus CSS-Sicht nötig scheint, erst einmal infrage.
Ich hatte da letztens mal wieder einen Fall, wo ich eine Seite dynamisch erweitern wollte per Geasemonkey Skript. Ich vermute (oder hoffe...), dass der Quellcode komplett automatisch wurde, jedenfalls war das eine absolute Qual. Semantisches Markup mit so wenig Elementen wie möglich und sovielen wie nötig ist jedenfalls immer etwas sehr gutes, wenn man nicht vor hat, die Seite sowieso nach 2 Monaten wieder komplett zu überarbeiten.
Fakt ist, dass alle vorhandenen Layoutmöglichkeiten i.d.R. Container benötigen, und das hat durchaus technische Gründe. Von einem theoretischen Standpunkt kann und sollte man das infrage stellen. Aber in der Praxis sind die heute noch nötigen zusätzlichen Element kein großer Aufwand und blähen das HTML nicht signifikant auf. Vor einigen Jahren hat man noch unzählige HTML-Elemente benötigt, um simple Effekte zu erreichen. Mit CSS3-Eigenschaften und eingefügten CSS-Boxen (:before/:after und content) ist das zum großen Teil weggefallen.
Na dann sind wir uns ja einig. Ich hoffe dass CSS irgendwann so mächtig wird, dass in 99,9% aller Anwendungsfälle zusätzliches Markup überflüssig wird. Den Rest mach ich dann mit Javascript, ihr dürft ihn mit HTML machen. ;)
-
Hallo Whouzuo,
... Kann ich denn (siehe Antwort auf Gunther) dann auch mit meinen PC Browser die Seite öffnen, den Browser kleiner machen und dann wird die Media Query angewendet? Das ist nämlich genau einer der wichtigen Anwendungsfälle, die ich meine.
Ja. Auf dieser Seite wird das Inhaltsverzeichnis je nach Breite des Browserfensters im Text oder daneben gezeigt. Oder verstehe ich dich falsch?
Gruß, Jürgen
-
Hallo Whouzuo,
... Kann ich denn (siehe Antwort auf Gunther) dann auch mit meinen PC Browser die Seite öffnen, den Browser kleiner machen und dann wird die Media Query angewendet? Das ist nämlich genau einer der wichtigen Anwendungsfälle, die ich meine.
Ja. Auf dieser Seite wird das Inhaltsverzeichnis je nach Breite des Browserfensters im Text oder daneben gezeigt. Oder verstehe ich dich falsch?
Nein, genau so stelle ich mir das vor!
Dann revidiere ich meine Aussage und schlage dem OP vor es auf diese Art und Weise umzusetzen. =)
-
-
-
-
Hallo!
Die Grundstruktur ist einfach:
<div style="display: table">
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<!-- … -->
</div>> > Da findet kein Umbruch statt, wenn ich die Seite kleiner mache... Von alleine sicher nicht. Du musst Media Queries nutzen und dann bspw. bei geringerer Viewportbreite statt 'display: table-cell' dann 'display: table-row' verwenden. Übrigens müsstest du eigentlich ein Fan hiervon sein. Denn anders als bei der Float-Variante, kann hier tatsächlich die Container-Elemente im HTML Code weglassen. Diese fügt der Browser nämlich dann selbständig als anonyme Boxen ein. Nachteil: Du kannst diese nicht per CSS selektieren und somit auch nicht formatieren. Gruß Gunther-
Hallo!
Die Grundstruktur ist einfach:
<div style="display: table">
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<div style="display: table-cell"></div>
<!-- … -->
</div>> > > > Da findet kein Umbruch statt, wenn ich die Seite kleiner mache... > > Von alleine sicher nicht. > Du musst Media Queries nutzen und dann bspw. bei geringerer Viewportbreite statt 'display: table-cell' dann 'display: table-row' verwenden. Naja, abgesehen davon, dass Media Queries CSS3 sind und dass sie eigentlich für etwas anderes gedacht sind, ist die Lösung (wenn sie denn auch für einen PC Browser funktioniert) schonmal wesentlich besser als display:table. Das kommt auch schon relativ nah an das heran, was ich mir für CSS Wünsche, nämlich die möglichkeit damit zu programmieren. Muss nicht turing vollständig sein, aber simple Bedingungen oder Schleifen usw. muss einfach sein. Und einen parent-Selektor. Gibt es den eigentlich mittlerweile oder heißt es von den Browserherstellern immernoch "zu rechenintensiv"? > Übrigens müsstest du eigentlich ein Fan hiervon sein. Denn anders als bei der Float-Variante, kann hier tatsächlich die Container-Elemente im HTML Code weglassen. Diese fügt der Browser nämlich dann selbständig als anonyme Boxen ein. Ja richtig. Wenn diese dann nicht im HTML vorhanden sind (und auch nicht dynamisch hinzugefügt werden) dann ist diese Lösung bezüglich des HTMLs super. Danke auf jedenfall. > Nachteil: Du kannst diese nicht per CSS selektieren und somit auch nicht formatieren. Das ist kein Nachteil, sondern ein Vorteil. Wenn ich sie (nicht einzeln) selektieren will, dann muss es dafür einen Grund geben, z.B. weil sie sich eine bestimmte Eigenschaft oder ein Verhalten teilen (sollen). Das lege ich dann, wenn es so sein sollte, durch CSS Klassen fest. Oder ggf. sogar durch einen Container. Hängt dann vom Grund ab.
-
-
Hallo Whouzuo,
so richtig verstehe ich deine ganze Diskussion nicht.
Auf die Möglichkeit die table-Eigenschaften zu verwenden, habe ich bereits Anfang 2005 hingewiesen. Der damals aktuelle IE konnte das noch nicht.
Jetzt habe ich in das damalige Beispiel mal schnell ein paar zusätzliche Zeilen CSS eingefügt: http://d-graff.de/demos/selfhtml/gleichehoehe2013.htmlAuf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-
-
