Hi @all :)
Danke für Eure Ausführungen! Ich muss gestehen, dass ich mich noch nicht sooo intensiv damit beschäftigt habe, dass ich das jetzt schon alles nachvollziehen könnte, aber ich wollte eigentlich auch im Moment an dieser Stelle nur noch mal einbringen, dass es bei mir weiterhin funktioniert mit linearize und equal heights zugleich (auch ohne den äußeren Container, wie schon gesagt.). Ich hab getestet im IE 9 und aktuellen Firefox. 3 Boxen nebeneinander mit hellgrauem, gleich langen Hintergrund unabhängig von der jeweiligen Textlänge in den Boxen. Schiebe ich das Browserfenster komplett zusammen, stehen die Boxen ganz brav untereinander :)
Hier das HTML, so wie ich es jetzt habe:
Code:
<div class="ym-wrapper">
<div class=ym-wbox>
<header>
<h1>Header</h1>
</header>
<nav id="nav">
<div class="ym-hlist">
<ul>
<li class="active"><strong>Home</strong></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</nav>
<div class=ym-grid>
<div id="main">
<h3>Seitenüberschrift</h3>
<div class="ym-grid linearize-level-1 ym-equalize grid-equalheights">
<div class="ym-g33 ym-gl">
<div class="ym-gbox-left">
<h6 class="rundblau">Überschrift linke Box</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip.
</p>
</div>
</div>
<div class="ym-g33 ym-gl">
<div class="ym-gbox">
<h6 class="rundgelb">Überschrift mittlere Box</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip.
</p>
</div>
</div>
<div class="ym-g33 ym-gr">
<div class="ym-gbox-right">
<h6 class="rundblau">Überschrift rechte Box</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip.
</p>
</div>
</div>
</div>
</div> <!-- Ende main -->
</div> <!-- Ende ym-grid -->
<footer>
<div class="ym-wbox">
<p>
Footer
</p>
</div>
</footer>
</div> <!-- Ende ym-wbox -->
</div> <!-- Ende ym-wrapper -->
Die Klasse "grid-equalheights" ist die aus der Demo (heißt dort grid-demo3). Ich hab daran nichts verändert außer Name und Farben :)
Im IE8 wird hingegen nichts linearisiert. Die Boxen bleiben nebeneinander stehen und bei extrem schmalen Browserfenster läuft dann halt der Text ineinander. Nun ja, damit kann ich persönlich leben, weil ich denke, dass niemand das Browserfenster zum Surfen soooo schmal zieht. Aber ich bin nach wie vor unsicher, ob das so im Sinne des Erfinders ist, wie ich's gemacht hab.
Kann leider noch keine Live-Demo bringen, da mein kompletter Webauftritt daran hängt und ich natürlich gerne erstmal alles fertig haben möchte. Aber sobald ich das geschafft hab, gibt's dann den Link zur Seite, so dass man sich das mal live ansehen kann :) Ich hoffe, nächstes Wochenende ist es dann soweit...
Nochmal 1000 Dank an Euch alle! Ich hatte nicht geahnt, dass es ein so komplexes Thema werden würde... Vielleicht war's doch keine ganz so dumme Frage und ich find's sehr beruhigend, dass andere auf die gleiche Problematik gestoßen sind wie ich :)
Euch allen noch einen schönen Restsonntag!
Grüßli,
Tinchen
Zitieren
Lesezeichen