CSS Problem mit flexiblem Hintergrund

CanRau · 09.07.2009

guten tag

also ich versuche nun schon seit einiger zeit vergeblich folgendes umzusetzen...(dient mehr als übungsvorlage)

nun soll der teil zwischen den roten balken flexibel sein..sich also der höhe anpassen...
der text soll allerdings schon darüber anfangen..

jetzt weiß ich nicht genau wie ich das ganze angehen soll..meine ansätze scheitern immer daran, dass der text dann nicht mehr im wrapper bleibt, also einfach den seitenrand überlappt..und scrollbalken will ich dadrin ja auch nicht haben

habe viel zu float, position faux columns etc gelesen..allerdings komme ich leider trotzdem nicht weiter

bin für jede hilfe echt dankbar

Herr_D · 09.07.2009

AW: css problem mit flexiblem hintergrund

Hintergrundbild unten links positionieren... das HGB sollte etwa 2000px hoch sein

Den oberen Teil einfach mit einem eigenen Hintergrund ausstatten...

Bild & Code könnte ich erst heute abend liefern... sitz grad in der Schule und muß gleich erst mal Unterricht machen

CanRau · 09.07.2009

AW: css problem mit flexiblem hintergrund

achsoooo

musste grade erstmal etwas grübeln was genau du meinst^^

das wär natürlich auch eine variante..

ich hatte das ganze immer in 3 abschnitte (header, flexibler linker hintergrund und footer) unterteilt..

werde das mal ausprobieren...und nochmal bescheid geben

danke auf jedenfall für die schnelle antwort und viel spass

--------EDIT-------

wunderbar..habs geschaft

wär nur nett wenn sich einer mal meinen code angucken könnte ob der so in ordnung ist oder obs auch besser/eleganter geht

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="wrapper">
<div class="header">HEADER</div>
<div class="content">
Lorem ipsum mel mutat facete assueverit ut, cum ea error suscipiantur deterruisset. In eos iriure pertinax, liber albucius forensibus in nec. Ea nam nisl salutatus, magna doming ornatus eu sea, has dico minim invenire ne. Nam agam ponderum intellegebat no, vel tempor evertitur at. Mel ad discere mentitum ocurreret, affert tollit quaeque has id, est at fugit soleat mandamus. Nobis molestie ut pri.
<p />
Usu modo feugiat ex, recusabo mandamus euripidis ius ea, ex duo tota discere molestie. Ullum putant pertinax pro eu, ea qui esse iracundia cotidieque. Mutat fugit pri id, has ea lorem sonet menandri, ludus eirmod hendrerit in mei. Vel ut suas appetere efficiendi, singulis electram ut pri, harum ignota accusata est ut. Sonet tollit contentiones sit te, no eum duis torquatos moderatius, mea ad tibique appetere insolens.
</div>
</div>
</body>
</html>

und die css

Code:

.wrapper {
    background-image:url('images/bg.png');
    background-repeat:no-repeat;
    background-position:left bottom;
    width:800px;
    margin-left:20%;
    border:1px solid red;
    height:100%;
}

.header{
    position:absolute;
    background-image:url('images/head.png');
    background-repeat:no-repeat;
    width:343px;
    height:212px;
}

.content {
    margin-left:100px;
    margin-top:90px;
    padding:10px;
    width:680px;
    height:100%;    
}

VIIEELEN DANK erstmal an HERR_D