7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:

    Bijdrager
    One Less Thing

    meerdere achtergronden op een webpagina

    Hallo beste mensheid.

    Ik zit met een probleempje waar ik nooit echt goed uit ben gekomen. Ik kan me niet voorstellen hoe het moet maar ik kan me ook niet voorstellen dat het niet kan. Ter zake:

    Ik heb twee kleine *.jpg bestandjes. Plaatje 1 wil ik als achtergrond gebruiken tot aan 500 pixels (verticaal) en plaatje 2 wil ik als achtergrond daar aansluitend daaronder laten lopen.

    oplossing 1, zet het in een tabel.
    Dat wil ik niet. Ik wil het vastleggen in een extern style sheet.

    oplossing 2, maak van beide afbeeldingen een afbeelding.
    Dat wil ik ook niet. Je moet je voorstellen dat ze samen eenverloop van donker naar licht
    zijn. Als ik dat opsla als 1 *.jpg bestandje dan wordt het donkere deel bij een pagina die
    langer is dan het jpg bestandje herhaald en das niet de bedoeling.

    Kan het nou echt niet in een style sheet zo aangestuurd worden dat ik een plaatje van boven naar beneden tot een bepaalde pixel waarde laat lopen en dan de rest opvul met een andere afbeelding of kleur code ?

    Ik heb niet direct even een voorbeeld online staan want ik ben nu wat aan het experimenteren. Ik heb het probleem in het verleden opgelost in tabellen maar eigenlijk wil ik het in een extern stylesheetje opslaan.

    Iemand met een geniale oplossing ?


    Geblokkeerd
    Anoniem

    Kun je misschien de 2 plaatjes even laten zien? Voor hetzelfde geld weten
    we daardoor een andere oplossing:)

    Eerste mogelijke oplossing;
    Maar volgens mij moet het kunnen door in de #wrapper je bovenste plaatje te
    zetten, en dan in je #content het tweede plaatje, wat je dan begin-coƶrdinaten
    geeft. Ik weet het even niet uit m’n hoofd, maar volgens mij is dat zoiets als:
    [code:1:cf8c504c50]#wrapper {
    padding: 0;
    margin: 0;
    background: url(http://www.linknaar.nl/bovensteplaatje.jpg) top no-repeat;
    }

    #content {
    padding: 0;
    margin: 0;
    background: url(http://www.linknaar.nl/ondersteplaatje.jpg) no-repeat 0px 50px;
    }[/code:1:cf8c504c50]
    De pixels zijn dan je horizontale en verticale plaatsing. “0 0” is de linker bovenhoek, dus
    0px 50px is tegen de linkerzijde aan, 50px naar beneden.


    Bijdrager
    computer space

    Inderdaad kun je met meerdere divs en css van alles laten overlappen.
    Bij http://www.macminds.net/ doen ze zoiets in de irritante roze balk rechts


    Geblokkeerd
    Anoniem

    Bij Macminds doen ze volgens mij gewoon een DIV op 100% height, en plaatsen
    ze daar een plaatje met een achtergrondkleurtje in 1 DIV:) Ik zie daar geen
    (in ieder geval geen reden) 2 DIV’s voor de roze balk aan de zijkant.

    …maar ik moet toegeven dat hij ik ‘m inderdaad ook behoorlijk irritant vindt.
    Wel lekker fris, maar te fel om fijn te kunnen lezen. Alle aandacht wordt naar die
    balk getrokken, en krijg spontaan zin in zuurstokken:P


    Bijdrager
    One Less Thing

    Tnx… ik heb het probleem overigens dankzij een engelse site weten op te lossen….

    body{
    background-color:#F88101;
    background-image: url(tmp/images/bgtop_t1.gif);
    background-repeat:repeat-x;
    }

    eigenlijk heel eenvoudig maar ik kwam er nooit uit. Het mooiste zou zijn geweest als ik nog twee aparte plaatjes (gezamelijk een zwarte lijn) op bijv precies 200pixels horizontaal onder elkaar kon zetten. Maar dat kan wat mij betreft in een tabel.

    Hoewel het wel stukken makkelijker zou zijn als ik het style sheet kon instrueren om en m’n achtergrond neer te zetten en de twee zwarte lijnen waartussen mijn site komt te staan.

    ”joram”

    Kun je misschien de 2 plaatjes even laten zien? Voor hetzelfde geld weten
    we daardoor een andere oplossing:)

    Eerste mogelijke oplossing;
    Maar volgens mij moet het kunnen door in de #wrapper je bovenste plaatje te
    zetten, en dan in je #content het tweede plaatje, wat je dan begin-coƶrdinaten
    geeft. Ik weet het even niet uit m’n hoofd, maar volgens mij is dat zoiets als:
    [code:1:9d34d3d097]#wrapper {
    padding: 0;
    margin: 0;
    background: url(http://www.linknaar.nl/bovensteplaatje.jpg) top no-repeat;
    }

    #content {
    padding: 0;
    margin: 0;
    background: url(http://www.linknaar.nl/ondersteplaatje.jpg) no-repeat 0px 50px;
    }[/code:1:9d34d3d097]
    De pixels zijn dan je horizontale en verticale plaatsing. “0 0” is de linker bovenhoek, dus
    0px 50px is tegen de linkerzijde aan, 50px naar beneden.


    Geblokkeerd
    Anoniem

    Als je een #wrapper gebruikt (een DIV die je hele site “omvat”), dan kun je
    om die lijnen te krijgen het volgende doen:
    [code:1:d7d4677e7a]#wrapper {
    margin: 0;
    padding: 0;
    width: 800px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    }[/code:1:d7d4677e7a]
    Da’s alles wat je nodig hebt… probeer maar eens uit:)

    In je html ziet dat er dan bijvoorbeeld zo uit:
    [code:1:d7d4677e7a]
    <body>
    <div id="wrapper">
    <div id="content">
    <p>je site met je menu in div’s enzo.</p>
    </div>
    </div>
    </body>[/code:1:d7d4677e7a]

    Kijk anders even in het kleine voorbeeldje wat ik online heb gezet:
    http://home.wanadoo.nl/joramoudenaarde/
    Als je naar de broncode kijkt, zie je een heel simpel stukje code staan.
    Daarin zie je de “wrapper”-css tag.. als je daar nu die 2 stukjes code over
    de border inzet, dan heb je aan beide zijden een randje:)


    Bijdrager
    Jean-Jacques

    Lees dit even.

7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.