Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

css positionering van achtergrond

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 [url]http://www.artistsonline.nl/test/[/url]. 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 [url=http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=142382]dit[/url] 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

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

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