  |
| Autor |
Nachricht |
rOckstaR
User [User]
Anmeldung: 24.01.08
Beiträge: 12
|
 Verfasst am: 28.02.2008, 16:19 Titel: 3 Divs mit BG-Image übereinander lagern? |
 |
|
Hallo zusammen.
Hab folgendes Problem.
Hab ne Seite mit 3 Divs: Top,Content,Bottom
Jeder Div hat nen eigenes BG-Image.
Top und Bottom sind eig. nur für nen Hintergundbild da
Würde den Content gerne über Top und Bottom legen nur das Problem
ist das der Content selbst ein eigenen BG hat und dieser, die BGs von
Top und Bottom "übermalt"
Weiss net wie ich es hin krig. Hier ma ne Skizze:
Und die CSS:
| Code: |
.content
{ text-align: left;
margin: 0px auto;
width: 740px;
background: #FFFFFF url(cbg.jpg);
padding: 20px; }
.top
{ text-align: left;
margin: 0px auto;
width: 780px;
height: 200px;
background: #FFFFFF url(top-bg.jpg); }
.bottom
{ text-align: left;
margin: 0px auto;
width: 780px;
height: 150px;
background: #FFFFFF url(bottom-bg.jpg); }
|
Wär echt super wenn mir da jemand weiterhelfen kann
mfg[/quote]
|
|
| Nach oben |
|
 |
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1489
|
| Verfasst am: 28.02.2008, 17:46 Titel: |
|
|
| Code: | <div class="content_bg"><div class="top_bg"><div class="bottom_bg">
Inhalt...
</div>
|
| Code: |
.content_bg {
text-align: left;
margin: 0px auto;
width: 740px;
background: url(cbg.jpg);
}
.top_bg {
background: url(top-bg.jpg) no-repeat;
}
.bottom_bg {
background: url(bottom-bg.jpg) no-repeat left bottom;
}
|
Das Prinzip:
Das erste div ist das content_bg-div mit dem Content-Hintergrund. Darin befindet sich das top_bg-div mit dem Top-Hintergrund; dieses wird aber nicht widerholt (geg. durch no-repeat, das Zuständige Attribut lautet background-repeat). Falls es sich horizontal widerholen soll, wähle statt "no-repeat" "repeat-x.
In diesem div dann das bottom_bg-div mit dem Bottom-Hintergrund. Hier auch keine Widerholung. Zusätzlich wird es unten links angeordnet (left bottom). Das zugehörige Attribut heißt background-position.
Außenabstände solltest du für's äußerste div (content_bg) festlegen, Innenabstände für's innerste (bottom_bg).
Falls noch Fragen sind, her damit 
Schönen Gruß,
Chris
PS: Das ganze gleich merken, braucht man immer wieder mal 
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
rOckstaR
User [User]
Anmeldung: 24.01.08
Beiträge: 12
|
| Verfasst am: 28.02.2008, 18:06 Titel: |
|
|
Alles klar!
Also im FF funzt es astrein!
 http://bfit5a.bf.funpic.de/webseite/index3.php
Nur im IE irgendwie nicht.
Ist der Inhalt kleiner als das top img verschwindet er unter dem top img
und wenn er länger ist, fängt er auch erst am ende des top img irgendwo in der
mitte an! 
Aber schonma danke schön =)
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1489
|
| Verfasst am: 28.02.2008, 20:37 Titel: |
|
|
achso, ja klar
Du musst einmal zusammenrechnen wieviel Pixel die Mindesthöhe betragen muss, bei dem gerade alles richtig angezeigt wird.
Dann .top_bg noch ein "min-height: Dieser Wert px" geben.
Der IE6 kennt min-height aber nicht. Dafür interpretiert der die normale Höhe so wie andere Browser die Mindesthöhe.
Also zusätzlich noch ein
| Code: | * .top_bg {
height: (errechneter Wert) px;
} |
Sollte dann klappen. Probiers vorsichtshalber nochmal im IE6 aus
Schönen Gruß,
Chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
rOckstaR
User [User]
Anmeldung: 24.01.08
Beiträge: 12
|
| Verfasst am: 29.02.2008, 16:43 Titel: |
|
|
hmm also, entweder bin ich zu blöd oder ich weiss net weiter 
top-bg.jp = 440px
cbg.jpg = 85px
bottom-bg = 181px
macht nach Adam Riese 706px!
Hab nun alle möglichkeiten ausprobiert:
| Code: |
.top_bg {
min-height: 706px;
height: 706px;
background: url(top-bg.jpg) no-repeat;
}
.top_bg {
min-height: 706px;
background: url(top-bg.jpg) no-repeat;
}
.top_bg {
height: 706px;
background: url(top-bg.jpg) no-repeat;
}
.top_bg {
height: 706px;
min-height: 706px;
background: url(top-bg.jpg) no-repeat;
}
|
aber so richtig funktionieren tut es nicht. Mal verschluckt er das ende. Mal den Anfang mal is im FF ne lücke,... 
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1489
|
| Verfasst am: 29.02.2008, 16:49 Titel: |
|
|
tschuldigung, mein Fehler.
Es muss natürlich das innerste div diese Mindesthöhe bekommen.
Also
| Code: |
.bottom_bg {
min-height: 706px;
background: url(top-bg.jpg) no-repeat;
}
* html .bottom_bg {
height: 706px;
}
|
So sollte es dann klappen.
Schöne Grüße,
chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
rOckstaR
User [User]
Anmeldung: 24.01.08
Beiträge: 12
|
| Verfasst am: 29.02.2008, 17:05 Titel: |
|
|
Alles klar.
Funzt einwandfrei 
Vielen vielen Dank
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 472
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1489
|
| Verfasst am: 29.02.2008, 19:20 Titel: |
|
|
@rOckstaR: super
@sejuma: Ja, aber das ist ja doch schon spezieller
Und zu dem Thema gibt's auch 'nen schönen selfHTML-Beitrag:
CSS: Footer aller Art - feststehende Elemente realisieren
Schönen Gruß,
Chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
|
|
