[PHP/CSS]100% van browserhoogte in DIV

[TranceSetter]

Beste medetweakers,

Ik ben bezig om een thema te ontwikkelen voor een op e107 gebaseerde website. Ik heb echter een probleem waar ik tegenaan loop en vooralsnog alleen vervelende 'hacks' heb kunnen vinden als oplossing.

Het probleem is dat ik een afbeelding wil herhalen tot onderaan de browser. Echter lukt me dit niet, omdat de afbeelding alleen herhaalt wordt tot het laatste stukje tekst. Een oplossing om een vast aantal pixels in te stellen is dus niet mogelijk in verband met de variabele hoogte, en 100% werkt dus niet.

De code is de volgende:

theme.php

code:

$HEADER = "
<div id='rap'>
<h1 id='header'><a href='#' title='e107 v0.7'>".$pref['sitename']."</a></h1>
<div class='post'>
{SETSTYLE=post}
";


$FOOTER = "
{SETSTYLE=default}
</div>
<div id='menu'>
{SITELINKS}
{MENU=1}
<br /><hr /><span class='smalltext'>{SITEDISCLAIMER}<br />{THEME_DISCLAIMER}</span>
</div>
</div>
";

style.css

code:

body, html {
    margin: 0 auto;
    background: url(images/bg2.png) repeat;
    font-family: Lucida Grande, Lucida Sans Unicode, Lucida, Helvetica, Verdana, Arial, Sans-serif;
    text-align: center;
}

a:link {
    color: #3F729E;
    text-decoration: none;
    page-break-after: always;
}

a:visited {
    color: #093860;
    text-decoration: none;
}

a:hover, a:active {
    color: #093860;
}

#rap { 
    margin-left: auto;
    margin-right: auto;
    width: 995px;
    height: 100%;
    background: url(images/bg3.png) 
} 
    

#header {
    background: url(images/header.png) repeat-x;
    height: 80px;
    width: 975px;
    margin: 0 auto;
    text-align: left;

Ook heb ik al een andere achtergrond ingesteld, aangezien deze pagina gecentreerd wordt weergegeven. Het gaat om deze website als het handig is om het voorbeeld te bekijken: Below 0°

[BasieP]

ik ken dat e107 ding niet, maar normaal gesproken is het zoiets:

html, body {
height: 100%;
}

div#jedivje {
height: 100%;
background-image: url(plaatje.png);
}

echter, als je html of body groter word dan 100% (lees: scrollbars) dan blijft je div 100%, en dus groeit ie niet mee.

wat je dan doet, is overflow van je div op auto zetten, en die van body en html op 'hidden' (voor IE, FF doet het standaard goed)
Dan moet de rest van je site binnen dat divje komen, anders wordt je body dus groter dan je divje.

[TranceSetter]

bedankt voor je reactie. Dooe bij de body-tag height: 100%; neer te zetten is het probleem opgelost. Voor FF en IE7 tenminste.

Iemand met IE6 die dit ook eens zou kunnen bekijken?

[TheBorg]

TranceSetter schreef op zondag 08 april 2007 @ 23:38:
Iemand met IE6 die dit ook eens zou kunnen bekijken?

IE6 == FF

[TranceSetter]

bedankt

Ben ik FF met IE aan het vergelijken, zet FF fijn onder elk menu-item aan de rechterkant een grote ruimte, IE zet er bijna geen ruimte tussen... En ook zijn de menu's bij IE te ver naar rechts geplaatst...

Waarom werken alle browsers toch niet gewoon hetzelfde

BasieP schreef op zondag 08 april 2007 @ 23:25:echter, als je html of body groter word dan 100% (lees: scrollbars) dan blijft je div 100%, en dus groeit ie niet mee.

wat je dan doet, is overflow van je div op auto zetten, en die van body en html op 'hidden' (voor IE, FF doet het standaard goed)
Dan moet de rest van je site binnen dat divje komen, anders wordt je body dus groter dan je divje.

Dit heb ik geprobeerd, Echter krijg ik dan direct een horizontale en verticale scrollbar. Die horizontale is natuurlijk omdat er een verticale scrollbar is gekomen. Echter staat die verticale niet meer helemaal aan de zijkant van de pagina, maar zo'n beetje midden erop. Aan het einde van die div.

Dat is dan ook weer net niet de bedoeling. Is dit nog op te lossen?

[ Voor 59% gewijzigd door TranceSetter op 09-04-2007 00:04 ]

[BasieP]

TranceSetter schreef op zondag 08 april 2007 @ 23:54:
bedankt

Ben ik FF met IE aan het vergelijken, zet FF fijn onder elk menu-item aan de rechterkant een grote ruimte, IE zet er bijna geen ruimte tussen... En ook zijn de menu's bij IE te ver naar rechts geplaatst...

Waarom werken alle browsers toch niet gewoon hetzelfde


[...]


Dit heb ik geprobeerd, Echter krijg ik dan direct een horizontale en verticale scrollbar. Die horizontale is natuurlijk omdat er een verticale scrollbar is gekomen. Echter staat die verticale niet meer helemaal aan de zijkant van de pagina, maar zo'n beetje midden erop. Aan het einde van die div.

Dat is dan ook weer net niet de bedoeling. Is dit nog op te lossen?

je div breeder maken (100%) of het geheel op je body toepassen ipv o je div. Dan heb je dus gewoon een background-image op je body (Eigenlijk heel basic)

[TranceSetter]

BasieP schreef op maandag 09 april 2007 @ 00:09:
[...]

je div breeder maken (100%) of het geheel op je body toepassen ipv o je div. Dan heb je dus gewoon een background-image op je body (Eigenlijk heel basic)

Probleem is dat ik al een background op mijn body heb, en daar overheen nog een andere background neer wil zetten. Daar loop ik op dit moment vast. Het lukt me niet om dit netjes af te werken

[Zillion01]

Behalve dat je je body een achtergrond kunt geven kun je ook je HTML een achtergrond geven, deze loopt door als de body is beeindigd