Byteandi
Administrator
Dabei seit: 23.09.2006
Beiträge: 383
Level: 35 [?]
Erfahrungspunkte: 790.168
Nächster Level: 824.290
 |
|
| div Container, variable Breite, gleiche Höhe |
     |
Wie im letzten (Link ist nur für Registrierte User sichtbar) beschrieben, ist es nicht möglich von einander unabhängige div-Container auf dieselbe Höhe zu bringen.
Nun gibt es dafür aber wie ich beschrieben habe Lösungen von der Grafischen Seite her, diese haben jedoch das Problem, dass sie in der breite nicht variabel sind, sprich wir haben ein Layout, das sich nicht der Breite oder dem vom User eingestelltem Schriftgrad anpassen kann.
Nun hab ich mir mal die Mühe gemacht mir etwas auszudenken, was auch wieder gleich hohe nebeneinander liegende div-Container simuliert, ohne dabei auf Grafiken zurückgreifen zu müssen oder in der Breite nicht flexibel zu sein.
Fangen wir also erstmal mit dem Prinzip an, wie so etwas realisierbar wäre.
wir nehmen zuerst einen alles umschließenden div-Container dem wir ein overflow:hidden und einen z-index:10 verpassen, zusätzlich geben wir in den Stylesheets an, dass auch alle anderen in der box befindlichen Elemente ein z-index:10 bekommen, damit diese Angabe wirksam wird, müssen die Elemente auch alle ein position:relative mit auf den Weg bekommen.
die Angabe position:relative stört unsere in der Box befindlichen Elemente nicht, da diese Angabe ohne den Zusatz top/left/right oder bottom nichts bewirkt.
Zusätzlich definieren wir uns in diesem Fall drei div-Container, die jeweils die gleiche breite haben wie die drei gefloateten Boxen und richten diese dann mit einer Höhe von z.B. 3000pixeln am unterem Ende der alles umschließenden Box aus, zusätzlich bekommen diese boxen alle ein z-index:1, damit sie immer von den darüber liegenden Boxen verdeckt werden.
Das hört sich jetzt alles etwas kompliziert an, ist es aber eigentlich nicht, zu besseren Verständlichkeit poste ich erst einmal den HTML Quelltext.
Wie nun zu sehen ist, ist das ein sehr einfaches Grundgerüst das sich nur dadurch auszeichnet, dass wir am ende drei augenscheinlich sinnlose div-Container ohne Inhalt haben, diese simulieren nun aber durch Ihre Stylesheet Angaben die darüber liegenden boxen, damit diese eben aussehen als ob die Höhe der drei Boxen einheitlich wären.
Widmen wir uns also dem relativ einfach definierten Stylesheets.
Hier kann man nun sehr schön sehen, dass das ganze eigentlich nichts Besonderes ist und wirklich nur drei in breite, je nach eingestelltem Schriftgrad, variable gefloatete div-Container sind.
Einzige Besonderheit ist eben, dass wir mit relativen und absoluten Positionen sowie einem Z-Index arbeiten und die Möglichkeiten eines overflow:hidden ausnutzen.
Da der Internet Explorer 6.+ beim vergrößern der Schriftart versehentlich die rechte gefloatete Box umbrechen könnte, hab ich extra für ihn etwas platz geschaffen, indem ich in den Stylesheets die main box um je 1em breiter auslege als eigentlich nötig wären, dass ist aber nur eine Vorsichtsmaßnahme, im Normal Betrieb muss das nicht sein, nur bei diesem Demo wäre es unschön, wenn es beim testen eine Fehlerhafte Darstellung hat.
Diese etwas unkonventionelle Variante habe ich selbst auf Netscape, Opera, Internet Explorer 6 + 7 und FireFox getestet sowie in verschiedenen anderen Browsern testen lassen, ich kann aber nicht garantieren, dass es auch auf Exoten funktionieren wird, obwohl hier eigentlich ein sehr simples Stylesheet verwendet wird.
Ich habe diese Variante bereits in verschiedenen HTML-Umsetzungen mit und ohne Hintergrundgrafiken angewandt und habe noch nichts über Fehlerhafte Darstellungen gehört.
Selbstverständlich kann man nun auch in den einzelnen Boxen mit Hintergrundgrafiken arbeiten.
Was gibt es zu beachten:
Es ist erforderlich, dass innerhalb der Container nur mit HTML-Tags gearbeitet wird, Text der ohne HTML-Tags in die Boxen geschrieben wird, könnte unter umständen, z.B. in Opera nicht angezeigt werden.
Aufgrund des IE ist es erforderlich, dass die div-Container spacer_1-3 wirklich am ende des Layouts eingebunden wird, auch hier könnte es sonst zu unschönen Effekten kommen.
Hier geht es wie immer zum (Link ist nur für Registrierte User sichtbar)
|
|
