verticaal beeldvullend achtergrond van een <div>
- Onderwerp starter gast0515
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi a2010,
Als de background van een <div> onafhankelijk moet zijn van de hoogte van die <div> ...
... dan is het niet meer de background van die <div>!
Dan moet het de background worden van het element waar de <div> in zit: "één niveautje hoger" (of eventueel nog hoger).
Want:
Met vriendelijke groet,
CSShunter
________
Wil je met min-height ook nog bezoekers met IE6 bedienen, dan is daarvoor een kunstgreepje nodig!
Als de background van een <div> onafhankelijk moet zijn van de hoogte van die <div> ...
... dan is het niet meer de background van die <div>!
Dan moet het de background worden van het element waar de <div> in zit: "één niveautje hoger" (of eventueel nog hoger).
Want:
- als de background van een <div> een background-color is, gaat de opvulling vanzelf binnen die div, maar niet erbuiten;
- als de background een background-img is, gaat de opvulling ook vanzelf (als er geen {background-repeat: no-repeat} is ingeschakeld) binnen die div, maar niet erbuiten.
Met vriendelijke groet,
CSShunter
________
Wil je met min-height ook nog bezoekers met IE6 bedienen, dan is daarvoor een kunstgreepje nodig!
Laatst bewerkt:
ja, dat zou ik ook denken maar hij doet het niet.
Het gaat trouwens om background-image
Als de inhoud div op {height: auto;} staat wordt er geen background-image gelezen.
De inhoud links en inhoud rechts staan ook op {height: auto;}
Ook als ik de inhoud div {min-height: 100%;} of de container div {min-height: 100%;}
wordt er geen achtergrond weergegeven.
Alleen als ik bepaalde pixel hoogte aan de inhoud div geef, wordt de background-image gelezen.
Vooralsnog - het is de bedoeling dat onafhankelijk van de div hoogte, de background-image altijd beeldvullend is (van boven naarn beneden).
Bijgaand voorbeeld plaatje - structuur van de site waar het om gaat.
De grijze balken (en transparantie links) zijn de achtergrond. De achtergrond beeld is dus even breed als container- en inhoud div en is 1px hoog.
Het gaat trouwens om background-image
Als de inhoud div op {height: auto;} staat wordt er geen background-image gelezen.
De inhoud links en inhoud rechts staan ook op {height: auto;}
Ook als ik de inhoud div {min-height: 100%;} of de container div {min-height: 100%;}
wordt er geen achtergrond weergegeven.
Alleen als ik bepaalde pixel hoogte aan de inhoud div geef, wordt de background-image gelezen.
Vooralsnog - het is de bedoeling dat onafhankelijk van de div hoogte, de background-image altijd beeldvullend is (van boven naarn beneden).
Bijgaand voorbeeld plaatje - structuur van de site waar het om gaat.
De grijze balken (en transparantie links) zijn de achtergrond. De achtergrond beeld is dus even breed als container- en inhoud div en is 1px hoog.
Bijlagen
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Kan het niet gewoon met een faux-column: een bg-image in de body, en de header er overheen geplakt?
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
- Van onderaf gezien? Moet dat niet, of juist wel?
- Is het 't achtergrondplaatje rechts? Of 't achtergrondplaatje links?
- Is het een repeterend achtergrondplaatje?
Laatst bewerkt:
er wordt al aan gewerkt. Ik hoop morgen of overmorgen een oplossing hebben.
Maar mocht je er zelf sowieso naar willen kijken stuur ik bijgaand ander plaatje.
De 'inhoud' div bestaand uit inhoud links en inhoud rechts.
De 'inhoud' div krijgt dus als het ware een achtergrond. Achtergrond - dat is een plaatje wat breedte vd container en de inhoud (960px) en 1 px hoogte.
Het plaatje is (van links naar recht) - wit, licht grijs, doker grijs, heel donker grijs
En dat hoort ALTIJD, onafhankelijk van de hoogte van alle div's verticaal beeldvullend te zijn (eindigt altijd onderin monitor).
Is dat iets duidelijker?
a2010
Maar mocht je er zelf sowieso naar willen kijken stuur ik bijgaand ander plaatje.
De 'inhoud' div bestaand uit inhoud links en inhoud rechts.
De 'inhoud' div krijgt dus als het ware een achtergrond. Achtergrond - dat is een plaatje wat breedte vd container en de inhoud (960px) en 1 px hoogte.
Het plaatje is (van links naar recht) - wit, licht grijs, doker grijs, heel donker grijs
En dat hoort ALTIJD, onafhankelijk van de hoogte van alle div's verticaal beeldvullend te zijn (eindigt altijd onderin monitor).
Is dat iets duidelijker?
a2010
Bijlagen
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hartstikke duidelijk! :dIs dat iets duidelijker?
Alleen, ik zie nog steeds het probleem niet.
Het bg-img één niveau hoger ophangen, aan de <body>, werkt volgens mij gewoon:
Met als alternatief het bg-img twee niveaus hoger ophangen, aan de <html>:
Of was het een vergeten kliertje {clear: both;} onder de gefloate linker- en/of rechterkolom?
Met vriendelijke groet,
CSShunter
Deze is toegepast en hete werkt
body {
margin: 0px;
padding: 0px;
background: url(bg.png) 50% top repeat-y;
}
#container {
width: 960px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
}
#header {
padding:20px 0;
height: 105px;
width: 960px;
background:#FFF;
}
#inhoud {
position: absolute;
width: 960px;
left: 0px;
top: 145px;
}
#links {
position: absolute;
height: auto;
width: 545px;
left: 0px;
top: 0px;
}
#rechts {
position: absolute;
left: 545px;
top: 0px;
height: auto;
width: 415px;
background-color: #FFF;
}
Groet,
a2010
body {
margin: 0px;
padding: 0px;
background: url(bg.png) 50% top repeat-y;
}
#container {
width: 960px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
}
#header {
padding:20px 0;
height: 105px;
width: 960px;
background:#FFF;
}
#inhoud {
position: absolute;
width: 960px;
left: 0px;
top: 145px;
}
#links {
position: absolute;
height: auto;
width: 545px;
left: 0px;
top: 0px;
}
#rechts {
position: absolute;
left: 545px;
top: 0px;
height: auto;
width: 415px;
background-color: #FFF;
}
Groet,
a2010
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Mooi!
: de rechter-inhoud moet géén background krijgen.
Persoonlijk ben ik niet zo gecharmeerd van absolute posities (die 2 extra container-div's nodig hebben, iets minder overzichtelijk). Als het even kan, probeer ik absolute posities te vermijden, want voor je het weet gaat er ergens anders iets uit de hand lopen. Maar het kan hier wel, en het resultaat is hier exact hetzelfde.
Ho-stop! Daar heb je het al: bij een schermbreedte van minder dan de paginabreedte van 960px gaat in de absolute versie de achtergrond niet goed meer ...
Een oplossing hiervoor in de AP-opzet kan ik niet even makkelijk vinden (als die al bestaat).
Een goede voortzetting!
Met vriendelijke groet,
CSShunter
__________________
PS: met
gaan afwisselende pagina's met een korte inhoud en pagina's met een lange inhoud niet verspringen (links-rechts) in Firefox en Chrome.
Deze twee reserveren nl. geen ruimte voor de verticale scrollbar aan de rechterkant; dan is de schermbreedte verschillend, en dan komt bij een gecentreerde pagina het midden op een andere plaats.
De ene px onderaan forceert deze browsers om toch een scrollbar te maken, zodat het midden altijd op dezelfde positie zit, en er niet meer versprongen kan worden.
Nu moet er op de meeste webpagina's altijd wel iets gescrolld worden, en doet het probleem zich niet voor. Maar veiligheidshalve zet ik het er altijd bij.
Mocht er iemand een hele hoge resolutie hebben, of een kantelscherm, dan ziet die in elk geval ook geen springende pagina's.
- Dat is dus deze: bg-height-100pct-absolute.htm
: de rechter-inhoud moet géén background krijgen.- In mijn float-structuur kan dat ook: bg-height-100pct-float.htm.
Persoonlijk ben ik niet zo gecharmeerd van absolute posities (die 2 extra container-div's nodig hebben, iets minder overzichtelijk). Als het even kan, probeer ik absolute posities te vermijden, want voor je het weet gaat er ergens anders iets uit de hand lopen. Maar het kan hier wel, en het resultaat is hier exact hetzelfde.
Ho-stop! Daar heb je het al: bij een schermbreedte van minder dan de paginabreedte van 960px gaat in de absolute versie de achtergrond niet goed meer ...
Een oplossing hiervoor in de AP-opzet kan ik niet even makkelijk vinden (als die al bestaat).
Een goede voortzetting!
Met vriendelijke groet,
CSShunter
__________________
PS: met
Code:
html {
height: 100%;
padding-bottom: 1px;
}Deze twee reserveren nl. geen ruimte voor de verticale scrollbar aan de rechterkant; dan is de schermbreedte verschillend, en dan komt bij een gecentreerde pagina het midden op een andere plaats.
De ene px onderaan forceert deze browsers om toch een scrollbar te maken, zodat het midden altijd op dezelfde positie zit, en er niet meer versprongen kan worden.
Nu moet er op de meeste webpagina's altijd wel iets gescrolld worden, en doet het probleem zich niet voor. Maar veiligheidshalve zet ik het er altijd bij.
Mocht er iemand een hele hoge resolutie hebben, of een kantelscherm, dan ziet die in elk geval ook geen springende pagina's.
Laatst bewerkt:
- Status
