Text über zwei DIV´s laufen lassen

Im IE8 funktioniert dein Fundstück einwandfrei.

Mit einer Anpassung für seine Vorgänger sieht's da wohl eher schlecht aus, da z.B. IE6 grundsätzlich eine absolute Höhenangabe (hier für .content) als "Mindesthöhe" (fehl)interpretiert, sprich die Boxenhöhe erweitert, wenn der Inhalt das Höhenmaß überschreitet.

Bevor ich nun darin unnötig meine kostbare Zeit investiere, hab ich binnen weniger Minuten eine Alternative gestrickt, die anstelle der beiden Hintergrundfarben (gelb & grün) zwei entsprechende Hintergrundbilder nutzt, was gegenüber deinem genannten Demo einen deutlich schlankeren Quellcode hervorbringt, und wie gewünscht in den älteren IE-Versionen funktioniert.

Das obere (gelbe) Hintergrundbild besitzt die anvisierte fixe Höhe 200px aus dem Beispiel und wird im DIV .ContainerContent mittels no-repeat nicht wiederholt. Die untere (grüne) Grafikdatei besitzt hingegen eine geringe Höhe (2px) und wird im DIV .Container mittels repeat-y vertikal wiederholt.

Durch das, dem späteren Erscheinungsbild entsprechend, entgegengesetzte Einbinden der beiden Hintergrundbilder wird der grüne Hintergrund zu Beginn vom gelben Hintergrundbild verdeckt.

HTML: 
<!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" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="spicelab" />
<meta name="date" content="2010-10-06" />

<title>::: elasticbox redesigned by spicelab :::</title>

<style type="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
body { font:normal 1em verdana,sans-serif; }
.Container { width:900px; min-height:250px; margin:20px auto; background:url(bottom.png) left top; }
.ContainerContent { padding:0 20px; height:auto; background:url(top.png) no-repeat; }
.ContainerContent p { padding:10px 0; }
/* ]]> */
</style>

</head>
<body>

<div class="Container">
     <div class="ContainerContent">
          <p>FIXED BOX</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum lacus fringilla sapien facilisis id vestibulum erat pulvinar. Quisque mauris sem, vehicula sit amet pretium ac, facilisis a tellus! Aenean imperdiet, eros sed ultricies scelerisque, massa velit laoreet orci, vitae varius odio elit vitae quam. Praesent ac tellus ut arcu pharetra sollicitudin. Maecenas id pulvinar ipsum. Etiam viverra tincidunt risus vel lobortis. Aenean in lacus sed turpis dapibus dapibus ut at purus. Proin odio orci, luctus eleifend ultricies a, rhoncus a velit. Nam scelerisque gravida turpis a aliquet. Fusce justo nisi, pulvinar non pellentesque a, aliquet vitae mauris. Curabitur ac neque massa, vitae feugiat mi. Quisque porttitor turpis vel felis bibendum feugiat. Phasellus ultrices tincidunt ultricies? Duis sit amet quam massa. Suspendisse sit amet nibh eget lorem viverra placerat. Aliquam tempor sem sit amet magna euismod laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eget sagittis enim. Curabitur hendrerit commodo sem, sed tempus lectus sodales sed. Pellentesque fermentum sodales sapien at consectetur.</p>
          <p>ELASTIC BOX</p>
     </div>
</div>

</body>
</html>

Im Anhang sind neben dem XHTML-Doc die beiden Grafikdateien enthalten.

Und wende dich beim nächsten Mal bitte direkt an das zugehörige Fachforum, denn dies hier ist offensichtlich eine Frage zur CSS-Formatierung - danke!

//edit: Vielen Dank an Dennis Wronka für's Verschieben ;)
 

Anhänge

Zuletzt bearbeitet:
Und umgekehrt? Also oben die variable Höhe und unten die feste Höhe? Irgendwie steh ich zum frühen morgen noch auf dem Schlauch. Das kann doch ni so schwer sein.^^
 
In deinem Fundstück ist es so zwar nicht vorgesehen, aber wie es das Wörtchen umgekehrt schon umschreibt: Anstelle des grünen Hintergrundbilds wird eben das gelbe Hintergrundbild senkrecht wiederholt, und das grüne Hintergrundbild erhält die fixe Höhe.

Dementsprechend sind für die beiden Boxen die background-Regeln umzukehren, damit der grüne Anteil am unteren Boxenrand von .ContainerContent positioniert wird.

HTML: 
<!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" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="spicelab" />
<meta name="date" content="2010-10-07" />

<title>::: elasticbox redesigned by spicelab - v2 :::</title>

<style type="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
body { font:normal 1em verdana,sans-serif; }
.Container { width:900px; min-height:250px; margin:20px auto; background:url(top.png); }
.ContainerContent { padding:0 20px; height:auto; background:url(bottom.png) no-repeat left bottom; }
.ContainerContent p { padding:10px 0; }
/* ]]> */
</style>

</head>
<body>

<div class="Container">
     <div class="ContainerContent">
          <p>ELASTIC BOX</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum lacus fringilla sapien facilisis id vestibulum erat pulvinar. Quisque mauris sem, vehicula sit amet pretium ac, facilisis a tellus! Aenean imperdiet, eros sed ultricies scelerisque, massa velit laoreet orci, vitae varius odio elit vitae quam. Praesent ac tellus ut arcu pharetra sollicitudin. Maecenas id pulvinar ipsum. Etiam viverra tincidunt risus vel lobortis. Aenean in lacus sed turpis dapibus dapibus ut at purus. Proin odio orci, luctus eleifend ultricies a, rhoncus a velit. Nam scelerisque gravida turpis a aliquet. Fusce justo nisi, pulvinar non pellentesque a, aliquet vitae mauris. Curabitur ac neque massa, vitae feugiat mi. Quisque porttitor turpis vel felis bibendum feugiat. Phasellus ultrices tincidunt ultricies? Duis sit amet quam massa. Suspendisse sit amet nibh eget lorem viverra placerat. Aliquam tempor sem sit amet magna euismod laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eget sagittis enim. Curabitur hendrerit commodo sem, sed tempus lectus sodales sed. Pellentesque fermentum sodales sapien at consectetur.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum lacus fringilla sapien facilisis id vestibulum erat pulvinar. Quisque mauris sem, vehicula sit amet pretium ac, facilisis a tellus! Aenean imperdiet, eros sed ultricies scelerisque, massa velit laoreet orci, vitae varius odio elit vitae quam. Praesent ac tellus ut arcu pharetra sollicitudin. Maecenas id pulvinar ipsum. Etiam viverra tincidunt risus vel lobortis. Aenean in lacus sed turpis dapibus dapibus ut at purus. Proin odio orci, luctus eleifend ultricies a, rhoncus a velit. Nam scelerisque gravida turpis a aliquet. Fusce justo nisi, pulvinar non pellentesque a, aliquet vitae mauris. Curabitur ac neque massa, vitae feugiat mi. Quisque porttitor turpis vel felis bibendum feugiat. Phasellus ultrices tincidunt ultricies? Duis sit amet quam massa. Suspendisse sit amet nibh eget lorem viverra placerat. Aliquam tempor sem sit amet magna euismod laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eget sagittis enim. Curabitur hendrerit commodo sem, sed tempus lectus sodales sed. Pellentesque fermentum sodales sapien at consectetur.</p>
          <p>FIXED BOX</p>
     </div>
</div>

</body>
</html>
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück