[HTML] achtergrond vastzetten

[SteZZz]

momenteel ben ik bezig met een site voor een klant.
nu is het de bedoeling dat de achtergrond in een table wordt vastgezet en dat de tekst te scrollen is door middel van een scroll bar.
nu is dit aardig gelukt, want in firefox werkt dit prima. maar in internet explorer daarintegen wil dit niet werken.

voorbeeld:
http://www.rr-solutions.n...dex2.php?page=ontbijtmenu

nu heb ik een css file geinclude voor men styles, ik citeer wat van belang is:

code:

.background
{
overflow: auto;
background-repeat: repeat;
background-attachment: fixed;
}

nu ziet men pagina er als volgt uit:

code:

<div style="width:700px;height:400px;overflow:auto;overflow-y:auto;overflow-x:auto;border:1px solid black;">
<?
echo ("
<table class=bedrag width='100%' height='100%' border='1' valign=top align='center' background='images/background.jpg' cellpadding='0' cellspacing='0'>
    <tr>
        <td>
            <center>[img]'images/logo.gif'[/img]</centern>
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
");
?>

zoals je kunt zien heb ik het deels geprobeert met een div op te lossen om de scroll bar in de pagina te krijgen, ook dit geeft in internet explorer deels problemen.
probeer de site maar eens in internet explorer te openen en vervolgens te resizen, dan zie je dat de table een stuk naar benede verschuift, als je de site refreshed komt de table weer op zen plaats te staan.

een aantal rare bugs waar ik niet echt uitkom dus.
wie kan me hiermee helpen?
alvast bedankt voor het inzien van dit topic

en als er nog enige onduidelijkheden zal ik deze zsm proberen te verhelderen, ik zal dit topic iig goed in de gaten houden.

[Gonadan]

Haal je background tag eens vanuit je html naar je css.

Cascading Stylesheet:

#divje
{
background-image: url('images/background.jpg');
background-repeat: repeat;
background-attachment: fixed;
width:700px;
height:400px;
overflow:auto;
border:1px solid black;
}

HTML:

<div id="divje">
<?
echo ("
<table class=bedrag width='100%' height='100%' border='1' valign=top align='center' cellpadding='0' cellspacing='0'>
    <tr>
        <td>
            <center>[img]'images/logo.gif'[/img]</centern>
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
");
?>

Je moet ook een beetje opletten aan welke items je welke eigenschappen wilt toekennen

[ Voor 141% gewijzigd door Gonadan op 08-05-2006 11:59 ]

[SteZZz]

Gonadan schreef op maandag 08 mei 2006 @ 11:54:
Haal je background tag eens vanuit je html naar je css.

Cascading Stylesheet:

#divje
{
background-image: url('images/background.jpg');
background-repeat: repeat;
background-attachment: fixed;
width:700px;
height:400px;
overflow:auto;
border:1px solid black;
}

HTML:

<div id="divje">
<?
echo ("
<table class=bedrag width='100%' height='100%' border='1' valign=top align='center' cellpadding='0' cellspacing='0'>
    <tr>
        <td>
            <center>[img]'images/logo.gif'[/img]</centern>
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
");
?>

Je moet ook een beetje opletten aan welke items je welke eigenschappen wilt toekennen

hmmz, nu krijg ik geen background meer.

[Gonadan]

Dat klopt, hij kan het plaatje niet vinden.

http://www.rr-solutions.n...ude/images/background.jpg

Hoort hij daar te staan?
Anders moet je het relatieve pad nog even nakijken

Je styles staan waarschijnlijk in 'include'.
Doordat je het image vanuit de stylesheet definiëert is dat ook z'n root.
Dus:

Cascading Stylesheet:

background-image: url('../images/background.jpg');

[ Voor 34% gewijzigd door Gonadan op 08-05-2006 12:05 ]

[SteZZz]

jah die css staat in de includes map.
maar heb het al weten op te lossen door een simpele ../ toe te voegen:

code:

#divje
{
background-image: url('../images/background.jpg');
background-repeat: repeat;
background-attachment: fixed;
width:700px;
height:400px;
overflow:auto;
border:1px solid black;
}

nu werkt die background in internet explorer wel goed.
dit is echt perfect dus!!
alleen nog een beetje vreemde bug heeft IE dat als je de site resized dat de table naar benede schiet.

[ Voor 24% gewijzigd door SteZZz op 08-05-2006 12:09 ]

[Gonadan]

SteZZz schreef op maandag 08 mei 2006 @ 12:08:
nu werkt die background in internet explorer wel goed.
dit is echt perfect dus!!
alleen nog een beetje vreemde bug heeft IE dat als je de site resized dat de table naar benede schiet.

Da's inderdaad vreemd.
Net als het feit dat je een DIV in een tabel zet, maargoed

Probeer eens die DIV binnen je cel te positioneren.
Het lijkt er op dat hij naar de ondergrens van de cel springt na een resize.

Cascading Stylesheet:

position: relative;
top: auto;

Bijvoorbeeld, speel er maar even mee

[ Voor 10% gewijzigd door Gonadan op 08-05-2006 12:18 ]

[SteZZz]

width:700px;
height:400px;

als ik de width weghaal dan staat de table zoiezo in de bodem van de pagina.
als ik die width ook weghaal dan scrolt de achtergrond in IE weer mee, maar in FF niet.

[Gonadan]

Waarom zou je die weghalen?

Edit:
Ik zie trouwens dat je de cel waarin je div staat een class hebt gegeven die niet terug te vinden is in je stylesheet.

Desnoods:

Cascading Stylesheet:

margin: auto;

[ Voor 83% gewijzigd door Gonadan op 08-05-2006 12:31 ]

[SteZZz]

jah dat klopt, dat zag ik dus ook. heb em der al uitgehaalt.
die margin: auto; haalt niet veel uit.
waar het mij iig om gaat is dat die table resizeble is met de site mee. dus het liefste geen waardes opgeven. maar % werken niet echt.
maar ik ben dus gedwongen om een vaste waarde op te geven voor zowel height als width, das wel jammer.

[CodeCaster]

offtopic:
Ik hoop dat je de plaatjes nog gaat resizen?

[SteZZz]

jah die zijn zo aangeleverd door de klant, ik wilde in eerste instantie de functionaliteit van de site voorop stelle voor dat ik ga beginnen aan het uiterlijk van de site. leuk menutje en dat soort dingen zullen er nog zeker in komen.

[Gonadan]

Volgens mij was het zo dat als je de width en height weg haalt en er margin: auto; voor in de plaats zet dat hij de ruimte pakt die hij kan pakken.

[SteZZz]

maar dat resize probleem kan ik dus echt niet verhelpen, wil dus uiteindelijk een leuk templatje maken, maar dan als de site wordt geresized dan zal men template uit zen voegen worden getrokken. enig idee hoe ik die zou kunnen oplossen?

ik heb trouwens wel gehoord van een script dat je je site kan restricten voor alleen FF, maar ook dit lijkt me niet echt een optie.

[SteZZz]

Gonadan schreef op maandag 08 mei 2006 @ 12:52:
Volgens mij was het zo dat als je de width en height weg haalt en er margin: auto; voor in de plaats zet dat hij de ruimte pakt die hij kan pakken.

als je nu kijkt bij:
http://www.rr-solutions.n...dex2.php?page=ontbijtmenu

kan je zien dat je wel gelijkt hebt, hij pakt precies wat die kan gebruiken, alleen nu gaat het erom dat die gelimit wordt op de height zodat die niet een scrollbar heeft van de webbrowserver zelf maar alleen van de table.
is dit ook mogelijk? zonder die IE bug.

[Gonadan]

SteZZz schreef op maandag 08 mei 2006 @ 13:03:
[...]


als je nu kijkt bij:
http://www.rr-solutions.n...dex2.php?page=ontbijtmenu

kan je zien dat je wel gelijkt hebt, hij pakt precies wat die kan gebruiken, alleen nu gaat het erom dat die gelimit wordt op de height zodat die niet een scrollbar heeft van de webbrowserver zelf maar alleen van de table.
is dit ook mogelijk? zonder die IE bug.

Hij pakt nu de ruimte die hij kan krijgen zover als hij nodig heeft, da's dus oneindig.
Wat je zou kunnen doen is één grote main DIV maken die op 100% zet.
En daar zet je de hele site in.
Binnen die main DIV kan je dan relatief gaan positioneren met al je overige DIV's
Dan kan je ook die tabel dumpen.

Edit:
Je (X?)HTML is helaas wel een beetje brak.
Je hebt geen header en body gemaakt.

[ Voor 7% gewijzigd door Gonadan op 08-05-2006 13:10 ]

[Blaise]

Je (X?)HTML is helaas wel een beetje brak.
Je hebt geen header en body gemaakt.

Dat is ook niet verplicht of noodzakelijk.

[SteZZz]

ik zeg toch die site is in ontwikkeling
maar goed... tables dumpen?
ben eigenlijk erg gehecht aan die tables ^^
hoe kan ik die tables dan vervangen met divjes?
ik heb namelijk een aantal tabletjes, en ik include met php de juiste pagina's heel simpel if elseif else scriptje:

code:

<?
if ($page == 'home')
    {
        include ('home.php');
    }
elseif ($page == 'ontbijtmenu')
    {
        include ('ontbijtmenu.php');
    }
elseif ($page == 'bestellen')
    {
        include ('bestellen.php');
    }
elseif ($page == 'bezorgen')
    {
        include ('bezorgen.php');
    }
elseif ($page == 'betalingen')
    {
        include ('betalingen.php');
    }
elseif ($page == 'nieuwsbrief')
    {
        include ('nieuwsbrief.php');
    }
elseif ($page == 'contact')
    {
        include ('contact.php');
    }
else
    {
        include ('home.php');
    }
?>

misschien is het anders makkelijker om dit via msn te bespreken?

[ Voor 14% gewijzigd door SteZZz op 08-05-2006 13:18 ]

[Gonadan]

Blaise schreef op maandag 08 mei 2006 @ 13:16:
[...]
Dat is ook niet verplicht of noodzakelijk.

Helaas niet noodzakelijk.
Wel vreselijk verplicht

SteZZz schreef op maandag 08 mei 2006 @ 13:17:
ik zeg toch die site is in ontwikkeling
maar goed... tables dumpen?
ben eigenlijk erg gehecht aan die tables ^^
hoe kan ik die tables dan vervangen met divjes?
ik heb namelijk een aantal tabletjes, en ik include met php de juiste pagina's heel simpel if elseif else

Je hoeft ze niet te dumpen.
Je kan ook zelfs die andere DIV dumpen en je table rechtstreeks in die ander plaatsen.

misschien is het anders makkelijker om dit via msn te bespreken?

Maakt mij niet uit.
Als je dan uiteindelijk maar wel hier post hoe je het opgelost hebt.
Voor de toekomstige scripters

[bartje321]

kun je niet beter je if'jes vervangen door dit?

code:

<?
if ($page)
    {
        include ($page.'.php');  
    }else{
        include ('home.php');
    }
?>

je zou ook eventueel kunnen werken met 5 frames (wel bah), (3 frames maken; links menu, rechts vulling, centerum weer in 3 frames verdelen; boven de titel, onder is weer opvulling, centrum komt dan de 'echte pagina' in het midden, dan geef je alle vrames, behalve de center frames een fixed widht/height. het middelste frame zal dan automatisch resizen)

[ Voor 6% gewijzigd door bartje321 op 08-05-2006 13:28 ]

[Gonadan]

bartje321 schreef op maandag 08 mei 2006 @ 13:26:
kun je niet beter je if'jes vervangen door dit?

code:

<?
if ($page')
    {
        include ($page.'.php');  
    }else{
        include ('home.php');
    }
?>

Yup, zo doe ik het zelf ook.

je zou ook eventueel kunnen werken met 5 frames (wel bah), (3 frames maken; links menu, rechts vulling, centerum weer in 3 frames verdelen; boven de titel, onder is weer opvulling, centrum komt dan de 'echte pagina' in het midden, dan geef je alle vrames, behalve de center frames een fixed widht/height. het middelste frame zal dan automatisch resizen

Dan kan je beter met floating DIV's aan de gang, dat is een stuk netter en daar kan je hetzelfde mee.

[Patriot]

@Bartje: nee, dat kan zelfs onveilig zijn.

Over het algemeen word daar een switch statement voor gebruikt.
Zo dus:

PHP:

<?php

// Als je code nog werkt met dit op E_ALL, is het meestal vrij net
error_reporting(E_ALL);

// Deze regel controleert of ?page wel gebruik wordt in de url
// Dit voorkomt warnings als de error reporting op E_ALL staat (zoals het geval is)
$sPage = (IsSet($_GET['page'])) ? $_GET['page'] : '';

switch($sPage) {

    case "home": // Let op, dubbele punt in plaats van een punt komma
        include "home.php";
        break;

    case "contact":
        include "contact.php";
        break;

    case "other":
        include "other.php";
        break;

    default: // Als de case aan géén van de bovenstaande voldoet, wordt deze gebruikt (optioneel)
        include "home.php";
        break;

}

?>

[ Voor 172% gewijzigd door Patriot op 08-05-2006 13:36 . Reden: Verkeerde knopje aangeklikt ]

[brokenp]

bartje321 schreef op maandag 08 mei 2006 @ 13:26:
kun je niet beter je if'jes vervangen door dit?

code:

<?
if ($page)
    {
        include ($page.'.php');  
    }else{
        include ('home.php');
    }
?>

je zou ook eventueel kunnen werken met 5 frames (wel bah), (3 frames maken; links menu, rechts vulling, centerum weer in 3 frames verdelen; boven de titel, onder is weer opvulling, centrum komt dan de 'echte pagina' in het midden, dan geef je alle vrames, behalve de center frames een fixed widht/height. het middelste frame zal dan automatisch resizen)

Ik zou wel opletten wat er geinclude mag worden. Ik zou voor zoiets gaan:

code:

$allowed = Array('home', 'bestellen', ...) 
if(in_array($page,$allowed)
    include ($page.'.php');
else
  include ('home.php');

[Gonadan]

En je moet dan ook code injectie gaan afvangen.

[Patriot]

Brokenp's voorbeeld kan ook, en is korter. Ik vind de switch statement toch lekkerder werken en gebruik die dan ook.

EDIT: Oh, wel even de variabele filteren op code

EDIT2: Ah, zo te zien was mijn eerste edit nogal spuit 11

[ Voor 44% gewijzigd door Patriot op 08-05-2006 13:46 . Reden: spuit 11 ]

[Calamor]

Ik zou echt eerst wat aan die plaatjes doen op de site. Het is daardoor echt eel erg traag.

[crisp]

Gonadan schreef op maandag 08 mei 2006 @ 13:22:
[...]

Helaas niet noodzakelijk.
Wel vreselijk verplicht

body, head en html zijn implied; de tags zijn optioneel. Er zitten inderdaad wel wat validatie-errors in die site maar niet gerelateerd aan het ontbreken van deze tags

[Gonadan]

crisp schreef op maandag 08 mei 2006 @ 14:01:
[...]

body, head en html zijn implied; de tags zijn optioneel.

Wat betekend dat?

Er zitten inderdaad wel wat validatie-errors in die site maar niet gerelateerd aan het ontbreken van deze tags

Als je

HTML:

<html>
<p>test</p>
</html>

door de validator gooit krijg je ook fouten.

[ Voor 6% gewijzigd door Gonadan op 08-05-2006 14:06 ]

[crisp]

Gonadan schreef op maandag 08 mei 2006 @ 14:05:
[...]

Wat betekend dat?

[...]

Als je

HTML:

<html>
<p>test</p>
</html>

door de validator gooit krijg je ook fouten.

Ja, je mist een doctype en een title; dit is wel valid:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<title>Valid!</title>
<p>This is valid HTML</p>

(character-encoding wordt doorgaans in een header meegestuurd dus errors/warnings daarop kan je negeren )

Implied wil zeggen dat ook als de tags ontbreken de renderengine ze wel in de parsetree moet opnemen

[ Voor 9% gewijzigd door crisp op 08-05-2006 14:46 ]

[Gonadan]

crisp schreef op maandag 08 mei 2006 @ 14:45:
[...]

Ja, je mist een doctype en een title; dit is wel valid:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<title>Valid!</title>
<p>This is valid HTML</p>

(character-encoding wordt doorgaans in een header meegestuurd dus errors/warnings daarop kan je negeren )

Implied wil zeggen dat ook als de tags ontbreken de renderengine ze wel in de parsetree moet opnemen

Het gèt, dat vind ik wel zo ongelooflijk viesbah.

Nog een reden voor mij om bij XHTML-strict te blijven dan

Weer wat geleerd

[crisp]

XHTML verstuurd als text/html is en blijft HTML voor de browser
SGML kent nog wel meer leuke features waarvan er een aantal ook voor HTML gedefinieerd zijn maar waar geen enkele browser support voor biedt:

HTML:

<title/dit is een titel/
<p<b/funny isn't it?/</>

(in feite kan je dus stellen dat geen enkele browser HTML-conformant is )

/afdwaalmodus

[ Voor 3% gewijzigd door crisp op 08-05-2006 14:54 ]

[Gonadan]

crisp schreef op maandag 08 mei 2006 @ 14:53:
XHTML verstuurd als text/html is en blijft HTML voor de browser

Ja maar niet voor de validator.
En ik wil nette 'code'

SGML kent nog wel meer leuke features waarvan er een aantal ook voor HTML gedefinieerd zijn maar waar geen enkele browser support voor biedt:

HTML:

<title/dit is een titel/
<p<b/funny isn't it?/</>

(in feite kan je dus stellen dat geen enkele browser HTML-conformant is )

/afdwaalmodus

Dat was toch al bekend?
Browsers zijn praktisch niets-conformant

[ Voor 8% gewijzigd door Gonadan op 08-05-2006 14:56 ]

[crisp]

Gonadan schreef op maandag 08 mei 2006 @ 14:55:
[...]

Ja maar niet voor de validator.
En ik wil nette 'code'

Browsers zijn non-validating dus een DTD zegt helemaal niets. Enkel XHTML daadwerkelijk verstuurd als XHTML (mime-type) wordt geparsed met een XML-parser dus als het niet-wellformed is krijg je een mooie error in plaats van een pagina - daarom is XHTML ook niet echt praktisch in de meeste gevallen

En waarvoor schrijf je pagina's? voor de validator of voor browsers?

[ Voor 9% gewijzigd door crisp op 08-05-2006 15:12 ]

[Gonadan]

crisp schreef op maandag 08 mei 2006 @ 15:10:
[...]

Browsers zijn non-validating dus een DTD zegt helemaal niets. Enkel XHTML daadwerkelijk verstuurd als XHTML (mime-type) wordt geparsed met een XML-parser dus als het niet-wellformed is krijg je een mooie error in plaats van een pagina (daarom is XHTML ook niet echt praktisch in de meeste gevallen)

offtopic:
Ik mail je hierover even, ander vervuilen wel dit topic teveel

@TS
is het al gelukt onderhand?

[SteZZz]

http://www.rr-solutions.n...dex2.php?page=ontbijtmenu

het is nog niet gelukt
ik heb nu iig een andere layout geprobeert. alles overnieuw herschreven, had eerst een vage IE bug, die is nu weg.
heb nu gewoon een 100% pagina
alleen bij de ontbijtmenu pagina wordt de site te groot en ik kan dit niet goed krijgen, wil namelijk niet met vaste waardes werken. maar als ik de div op 100% zet dan wordt die zoals je nu kunt zien op de site, de site wordt dus te groot.
en ik kan het niet voor elkaar krijgen ook om de table zelf een scrollbar te geven.