Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

css positionering van achtergrond

EvilC
10 antwoorden
  • Oke, wil een image als achtergrond gebruiken van 500 x 446 px. Deze image wil ik links en centraal uitgelijnd hebben. Ik heb een image gemaakt van 2 x 446 px. om deze te laten repeaten langs de lijn naar rechts. Heb hier de code http://www.artistsonline.nl/test/. de images voor het repeaten langs de lijn wordt dmv de body een 50% regel in background weergegeven zoals het hoort. Nu heb ik de grote image in een div geplaatst. Alleen deze krijg ik niet links en gecentreerd weergegeven. Heb al veel geprobeerd. Iemand nog ideeën??

    PS. Ben hem aan het stylen voor Iexplorer 6.0 en Mozilla Firefox.
  • sloop je doctype er eens uit.. ;) ok dan is ie niet meer valid (x)html maar anders werkt [b:70de451e81]height:100%[/b:70de451e81]; niet. Dat bestaat niet voor <div> namelijk volgens de W3 regeltjes.
  • background-position: center left;
  • [quote:c275b8b52f="redmar"]sloop je doctype er eens uit.. ;) ok dan is ie niet meer valid (x)html maar anders werkt [b:c275b8b52f]height:100%[/b:c275b8b52f]; niet. Dat bestaat niet voor <div> namelijk volgens de W3 regeltjes.[/quote:c275b8b52f]

    Wat is dat nu voor oplossing?
    Lees vooral dit topic eens over standard en quirks mode.

    Dat moet toch met prima valid HTML en CSS te doen zijn, zoals _arno_ zegt?
  • [quote:db2faf102a="Japaveh"][quote:db2faf102a="redmar"]sloop je doctype er eens uit.. ;) ok dan is ie niet meer valid (x)html maar anders werkt [b:db2faf102a]height:100%[/b:db2faf102a]; niet. Dat bestaat niet voor <div> namelijk volgens de W3 regeltjes.[/quote:db2faf102a]
    Wat is dat nu voor oplossing?
    [/quote:db2faf102a]
    De oplossing is dat in de Standardsmode (met DOCTYPE) height:100% voor een div niet bestaat. In Quirksmode werkt het wel, en dat is te bereiken door de DOCTYPE tag weg te laten…
  • [quote:f76c082b6c="redmar"][quote:f76c082b6c="Japaveh"][quote:f76c082b6c="redmar"]sloop je doctype er eens uit.. ;) ok dan is ie niet meer valid (x)html maar anders werkt [b:f76c082b6c]height:100%[/b:f76c082b6c]; niet. Dat bestaat niet voor <div> namelijk volgens de W3 regeltjes.[/quote:f76c082b6c]
    Wat is dat nu voor oplossing?
    [/quote:f76c082b6c]
    De oplossing is dat in de Standardsmode (met DOCTYPE) height:100% voor een div niet bestaat. In Quirksmode werkt het wel, en dat is te bereiken door de DOCTYPE tag weg te laten…[/quote:f76c082b6c]
    Met alle gevolgen van dien, omdat IE in quirksmode ook niet echt voorspelbaar gedrag gaat vertonen :) (zie gelinkt topic). Alleen als je perse die height = 100% wilt gebruiken kan het dus blijkbaar, maar _arno_ gaf een andere suggestie :)
  • Ja, dat had ik ook wel gelezen, maar als je even de bron van de website van de TS bekijkt dan had je gezien dat de TS dat al geprobeerd had ;)… je mag t zelf ook wel even proberen hoor :D

    Anyway.. ik krijg 't alleen zoals 't (denk ik) bedoelt is door de DOCTYPE weg te laten, anders krijgt die div immers geen hoogte, en dus geen afbeelding zichtbaar….
    [code:1:d2401cb18d]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    body {
    margin:0;
    padding:0;
    background: #000 url(http://www.artistsonline.nl/test/images/backgroundrepeat.jpg) left repeat-x 50%;
    }

    div#container {

    background: url(http://www.artistsonline.nl/test/images/background.jpg) center left no-repeat;
    height:100%;
    width:100%;
    }
    </style>
    </head>

    <body>
    <div id="container"></div>

    </body>
    </html>[/code:1:d2401cb18d]
  • @redmar

    Ik had niet meer in de source gekeken maar nu zag ik inderdaad dat het niet werkte. Ik heb het zelf eventjes getest en inderdaad, zonder doctype heb je het gewenste resultaat.

    Ik vraag me echter af of het niet op een andere manier mogelijk is..maar daarvoor ben ik niet CSS guru genoeg :). Zeker omdat je nu IE in quirksmode dwingt kun je later problemen krijgen met het positioneren van andere dingen.
  • Toch een heel raar verschijnsel, heb het aleen als ik de site horizontaal probeer te positioneren. Vertikaal kan ik elke div centreren, met of zonder vaste breedte. Ben idd bang dat de andere positionering zonder de doctype problemen zal opleveren. Als er iemand is die deze positionering al eens heeft opgezet, graag wat hulp.
  • Ik zou het zo doen (als ik je tenminste goed begrijp):
    [code:1:583678192f]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    body {
    background: #000;
    padding:0;
    margin:0;
    }
    div#container {
    background-image: url(images/backgroundrepeat.jpg);
    background-repeat: repeat-x;
    margin:-223px 0;
    position:absolute;
    top:50%;
    left:0;
    height:446px;
    width:100%;
    }
    </style>
    </head>

    <body>
    <div id="container">
    <img src="images/background.jpg" width="500" height="446" alt="" />
    </div>

    </body>
    </html>[/code:1:583678192f]Dus met een negatieve marge van de container.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.