15.12.2005, 13:26
|
|||
|
|||
Zitat:
Code:
<!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" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
}
.containing-float-particular
{
/* fuer alle Browser;
* Block Formatting Context (~auto-clearing)
*
* 9prev1, Safari & IE/Mac
*/
display: inline-table;
/* fuer alle Browser;
* Block Formatting Context (~auto-clearing)
*
* Moz/Firefox, Opera 8.50 & Safari
*/
overflow: auto;
}
* html .containing-float-particular
{
/* nur fuer IE-Win;
* Dimension (~ auto-clearing);
*
* verbergen IE-Mac \*/
height: 0;
/* ende verbergen IE-Mac */
/* nur fuer IE;
*/
overflow: visible;
}
/*---------------------------------------*/
.floater {
float: left;
background-color: #99CCFF;
}
#sidebar
{
float: left;
width: 10em;
height: auto !important;
height: 30em;
min-height: 30em;
background-color: #FFFF00;
}
#main {
background-color: #FFCC99;
}
#wrap {
background-color: #DDDDDD;
}
#column {
float: right;
width: 10em;
height: auto !important;
height: 15em;
min-height: 15em;
background-color: #33CC33;
}
/*]]>*/
</style>
</head><body>
<div id="sidebar" class="containing-float-particular">
[#sidebar]
<p class="floater">
[.floater]
</p>
</div>
<div id="wrap" class="containing-float-particular">
<div id="column" class="containing-float-particular">
[#column]
.
.
.
.
.
.
.
.
.
.
.
.
.
.
<p class="floater">
[.floater]
</p>
</div>
<div id="main" class="containing-float-particular">
[#main]
<p class="floater">
[.floater]
</p>
</div>
[#wrap] after floating elements
<p class="floater">
[.floater]
</p>
</div>
<p class="floater">
[.floater]
</p>
</body></html>
__________________
</ulle> 
|
| Sponsored Links |
|
16.12.2005, 00:32
|
|||
|
|||
|
Irgendwer hat diesen Thread verschoben...
Ulle, ich habe deinen Test mal genommen und Georgs Original-Vorschlag eingesetzt. Ging nicht gut in Safari, Opera und IEMac. Das Problem war: - nur IEMac wollte das inline-table sehen, die anderen bis auf Fx konnten es nicht gut ab. - IEMac wollte die Einträge "[#sidebar]" usw. in </p> gestellt wissen - IEMac mochte height: auto !important; in #sidebar nicht und ließ den Sidebar kollabieren. Habe ich jetzt mal ganz rausgenommen, was den Test natürlich verändert. - IE6 zeigt den 3px text jog zu beiden Seiten des #main Containers wie erwartet. Habe ich nicht angefasst, sollte aber mit negativen -3px korrespondierenden margins für #sidebar und dir rechte #column gehen. live: http://www.satzansatz.de/xforum/cleartest2.html Sieht gleich aus hier in Safari2.02 / IEMac5.2.3 / Fx1.5 / Opera8.01-Opera9TP1 /IE6 Andere nicht getestet. Ed: Toll, aber eigentlich ist das jetzt auch nur ein overflow:auto für alle und was anderes für die IE's. Ich glaube einfach nicht, dass es den ultimativen floatcontainer oder floatclearer gibt. Code:
<!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" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cleartest2</title>
<style type="text/css" media="screen,projection">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
}
.contain {
overflow: auto;
}
* html .contain {
height: 0;
overflow: visible;
}
/*\*//*/
* html .contain {
display: inline-table;
height: auto;
}
/**/
/*---------------------------------------*/
.floater {
float: left;
background-color: #99CCFF;
}
#sidebar {
float: left;
width: 10em;
height: 30em;
min-height: 30em;
background-color: #FFFF00;
}
#main {
background-color: #FFCC99;
}
#wrap {
background-color: #DDDDDD;
}
#column {
float: right;
width: 10em;
height: auto !important;
height: 15em;
min-height: 15em;
background-color: #33CC33;
}
/*]]>*/
</style>
</head><body>
<div id="sidebar" class="contain">
[#sidebar left]</p>
<p class="floater">[.floater1]</p>
</div>
<div id="wrap" class="contain">
<div id="column" class="contain">
[#column right]</p>
.
.
.
.
.
.
.
.
.
.
.
.
.
.
<p class="floater">[.floater2]</p>
</div>
<div id="main" class="contain">
[#main center]</p>
<p class="floater">[.floater3]</p>
</div>
[#wrap] after floating elements</p>
<p class="floater">[.floater4]</p>
</div>
<p class="floater">[.floater5]</p>
</body></html>
|
| Sponsored Links |
|
16.12.2005, 12:08
|
|||
|
|||
|
Zitat:
Zitat:
 Markup-Änderung für den Mac! Ich denke das ist der Moment den IE-Mac mit dem Netscape 4 auf eine Stufe zu stellen, d. h. für mich kein CSS mehr. Kennt jemand eine Möglichkeit dem IE-Mac das CSS vorzuenthalten? Oder ist Folgendes die einzige Möglichkeit. Gibt es zu dieser radikalen Haltung einwende? Code:
<style type="text/css" media="screen,projection" title="standard-style">
/*<![CDATA[*/
/* fuer alle Browser die
* die @import verstehen;
*
* verbergen IE-Mac \*/
@import url("style.css");
/* ende verbergen IE-Mac */
/*]]>*/
</style>
Code:
.containing-float-particular
{
/* fuer alle Browser;
* Block Formatting Context (~auto-clearing)
*
* Bedingt in eingesetzen Containern
* das die Eigenschaft [height] durch
* [min-height] ersetzt wird!!
*/
overflow: auto;
}
* html .containing-float-particular
{
/* nur fuer IE;
*/
height: 0;
overflow: visible;
}
Zitat:
__________________
</ulle>
|
|
19.12.2005, 14:56
|
|||
|
|||
|
Zitat:
__________________
</ulle>
|
|
03.02.2006, 11:56
|
|||
|
|||
|
Zitat:
__________________
</ulle>
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Navi funzt micht richtig | Miso | CSS | 21 | 28.04.2009 16:57 |
| background-image mit Annimation funzt nur im IE richtig ? | arnibe | CSS | 1 | 03.11.2005 10:38 |
| boxmodell funzt nicht richtig | chrimp | CSS | 4 | 27.06.2005 09:52 |
| padding funzt net so richtig im Firefox | big-a | CSS | 12 | 25.05.2005 15:32 |
| Mittig ausrichten. Funzt weder im IE noch im Moz richtig | Nils | CSS | 10 | 04.02.2005 19:56 |
Dirk
Linear-Darstellung
