| Autor |
Nachricht |
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst So 16.09.2007 17:21
Titel [html/css]multicolumn-layout |
  |
|
Tach
ich würd gern ne universelle Möglichkeit entwickeln, um n-Spaltige Layouts mit css-floats möglichst browserübergreifend darzustellen.
Bis jetzt nutze ich dazu 2 bekannte css clearing-techniken ( code ):
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multi-Columns-Test</title>
<style type="text/css" media="screen">
<!--
/* {{{ clearfix general */
.clearfix:after /* general clearfix */
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: auto;
}
/* }}} */
/* {{{ IE 7 clearfix */
.clearfix {
display: inline-block;
}
/* }}} */
/* {{{ Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
/* }}} */
-->
</style>
</head>
<body>
<h1>Ein paar Spalten im Raster</h1>
<!-- Container -->
<div style="width:450px;" class="clearfix">
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test test test test test
</div>
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
</div>
<div style="width:470px;" class="clearfix">
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
<div style="float: left; border:1px black solid; width:313px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
</div>
<div style="width:410px;" class="clearfix">
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
<div style="float: left; border:1px black solid; width:90px; padding: 5px; margin:0px 10px 10px 0px" float="left">
test
</div>
</div>
</body>
</html>
|
Das ganze krankt natürlich wieder mal am boxmodel-bug des IE, wodurch die Darstellung im IE 5.5 leicht verhauen ist.
Also, Ziel ist es, für verschiedene Browser notwendige Hacks zusammenzufassen (sowie von Wechselwirkungen zu befreien) und ein geeignetes grob-Markup zu finden. Damit soll kein CSS-Framework wie yaml entwickelt werden, sondern ein wiederzuverwendender Code-Schnippel entstehen. Wer Bock hat, bringe seine Erfahrungen hier mit rein.
Varianten:
1.) Mehrspaltigkeit ohne Registerhaltigkeit
2.) Mehrspaltigkeit mit Registerhaltigkeit
3.) Faux-Column-fähig ohne (background-image) oder mit Javascript (Höhenausgleich der Spalten).
|
|
| |
|
 |
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: 
|
Verfasst So 16.09.2007 17:51
Titel
|
|
|
|
yaml.de macht das doch eigentlich ganz schön, oder?
|
|
| |
   |
|
|
Anzeige
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst So 16.09.2007 19:21
Titel
|
|
|
|
ne eben nicht, da das auf max. 3 spalten ausgelegt ist und nachm top-down prinzip arbeitet. das löschen von 10000 selektoren möchte ich mir gerne sparen. Ich dachte ich hätte das deutlich gemacht.
|
|
| |
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht:
|
Verfasst Mo 17.09.2007 08:36
Titel
|
|
|
|
ja, hattest du, das hatte ich überlesen .. Asche auf mein Haupt.
|
|
| |
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Mo 17.09.2007 08:40
Titel
|
|
|
|
Und direkt die Antwort: Keine Ursache, passiert halt. Ich möchte in diesem Thread dazu anregen, verschiedene Erfahrungen und Hacks für und zu versch. Browserversionen zusammenzufassen um für genau diese spezifische Problematik eine allgemeinfunktionierende Lösung zu finden, die ja sicher praktisch für alle und vor allem auch als Referenz für CSS-Anfänger geeignet ist. Ich sortier das dann, probiers und schreibs auf.
|
|
| |
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Mo 17.09.2007 08:55
Titel
|
|
|
| XSchinkenX hat geschrieben: | | Und direkt die Antwort: Keine Ursache, passiert halt. Ich möchte in diesem Thread dazu anregen, verschiedene Erfahrungen und Hacks für und zu versch. Browserversionen zusammenzufassen um für genau diese spezifische Problematik eine allgemeinfunktionierende Lösung zu finden, die ja sicher praktisch für alle und vor allem auch als Referenz für CSS-Anfänger geeignet ist. Ich sortier das dann, probiers und schreibs auf. |
//
yaml - sehe ich gerade - steht unter ner sharewarelizenz, kostet also geld (wenn auch net viel) wenn man es mal kommerziell einsetzen will, so wie ich das verstanden habe.
|
|
| |
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mo 17.09.2007 09:45
Titel
|
|
|
| XSchinkenX hat geschrieben: | | XSchinkenX hat geschrieben: | | Und direkt die Antwort: Keine Ursache, passiert halt. Ich möchte in diesem Thread dazu anregen, verschiedene Erfahrungen und Hacks für und zu versch. Browserversionen zusammenzufassen um für genau diese spezifische Problematik eine allgemeinfunktionierende Lösung zu finden, die ja sicher praktisch für alle und vor allem auch als Referenz für CSS-Anfänger geeignet ist. Ich sortier das dann, probiers und schreibs auf. |
//
yaml - sehe ich gerade - steht unter ner sharewarelizenz, kostet also geld (wenn auch net viel) wenn man es mal kommerziell einsetzen will, so wie ich das verstanden habe. |
Richtig
|
|
| |
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Mo 17.09.2007 18:16
Titel
|
|
|
 Ich seh schon, hier bin ich rischtisch, hier bin isch zu huus.
Bringt das Board aber nicht wirklich weiter.
Gut, schließt das hier, ich gebs auf. Ehrlich. Ab jetzt wird nur noch geflamed und gespamt, meine Antworten such ich mir in ner Kirche.
// Jut, doch nicht schließen. Ich harre mal der Dinge die da noch kommen und schau selbst auch nochmal weiter.
Zuletzt bearbeitet von am Mo 17.09.2007 18:24, insgesamt 2-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
HTML/JS Multimedia LAyout?
HTML - rundes Layout
Bild verschiebt Layout (html, css)
HTML Export aus InDesign zerschießt Layout
Bitte mal kurz Layout auf HTML/CSS Tauglichkeit prüfen
Website mit festen Layout in dynamisches Layout umbauen
|
|
Willkommen auf dem Portal für Mediengestalter
