Antworten auf deine Fragen:
Neues Thema erstellen

CSS Problem mit flexiblem Hintergrund

CanRau

Noch nicht viel geschrieben

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

offline

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

Noch nicht viel geschrieben

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 :D


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 :D
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.526
Neuestes Mitglied
Winfriedtesmer
Oben