Afbeelding Positie verschillende browsers

[anoniem]

Hallo allemaal, Ik ben net enkele dagen bezig met een website te bouwen en loop nu tegen het volgende probleem aan. Op de website gebruik ik een afbeelding waar de text op staat Zodat in iedergeval de text altijd op de goede plek blijft. Nu is mijn probleem dat met verschillende resoluties en verschillende browsers De afbeelding zich niet aanpast qua formaat. De site werkt goed met resoluties boven 1024x768, en alleen met Chrome, IE7+8, en safari 5.0.5 op osx 10.6 Op andere browsers en lagere resoluties valt het bord Half buiten de pagina. Link naar de actuele website: [url]http://good-meat.nl/nietvoordeep/[/url] Ik heb het bord zogenaamd aan kettingen hangen voor een mooi effect, Met sommige browsers zakt hij zo ver weg dat dat niet meer te zien is, en dat je ver naar beneden moet scrollen om de text te kunnen lezen. Dit is mijn css [code:1:8eca67fec1] @charset "utf-8"; /************************************************************************ * SITE EN CSS GEMAAKT DOOR JOEY SCHRAMA, * ALLE RECHTEN ZIJN VOORBEHOUDEN ***********************************************************************/ /************************************************************************ * OPTIES VOOR LOGO ***********************************************************************/ * { margin: 0; padding:0; } #wit { background-color:#FFF; } /************************************************************************ * OPTIES VOOR ACHTERGROND ***********************************************************************/ body { background-image:url(afbeeldingen/bg.jpg); background-repeat:no-repeat; background-size:100%; height:100%; background-attachment:fixed; a:link color:#FF0000; a:visited color:#FFFFFF; a:hover color:#FFFFFF; a:active color:#FFFFFF; } #body { padding:0px; padding-bottom:10px; /* Height of the footer */ } #contact { overflow: hidden; } /************************************************************************ * HUIDIGE PAGINA INDICATOR ***********************************************************************/ body.one a.one, body.two a.two, body.three a.three, body.four a.four, body.five a.five, body.six a.six {font-weight:bold;} /************************************************************************ * OPTIES VOOR NAVIGATIEBALK ***********************************************************************/ div#navbar2 { height: 30px; width: 100%; border-top: solid #000 0px; /*Border voor navbar*/ border-bottom: solid #000 1px; background-color: #FFF; } div#navbar2 ul { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; color: #FFF; line-height: 30px; white-space: nowrap; } div#navbar2 li { list-style-type: none; display: inline; } div#navbar2 li a { text-decoration: none; padding: 7px 10px; color: #000; } div#navbar2 li a:link { color: #FFF: } div#navbar2 lia:visited { color: #CCC; } div#navbar2 li a:hover { font-weight: small; color: #FFF; background-color: #333333; } /************************************************************************ * OPTIES VOOR INHOUD ***********************************************************************/ div#content { background-image:url(afbeeldingen/testbord.png); background-repeat:no-repeat; /*background-attachment:fixed;*/ height:700px; width:900px; */background-position:center;*/ font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #fff; font-size:14px; padding-left:90px; padding-top:300px; a:link color:#FF0000; } div#home { background-image:url(afbeeldingen/hometestbord.png); background-repeat:no-repeat; /*background-attachment:fixed;*/ height:900px; width:700px; z-index:1; */background-position:center;*/ font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #fff; font-size:14px; font-size-adjust:inherit; padding-left:90px; padding-top:200px; a:link color:#FF0000; } div#kalender { background-image:url(afbeeldingen/kalenderbord.png); background-repeat:no-repeat; /*background-attachment:fixed;*/ height:900px; width:700px; z-index:1; */background-position:center;*/ font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #fff; font-size:14px; font-size-adjust:inherit; padding-left:90px; padding-top:200px; a:link color:#FF0000; } /************************************************************************ * OPTIES VOOR GALERIJ-INHOUD ***********************************************************************/ div#photocontent { /*background-image:url(afbeeldingen/woodklein.png);*/ background-repeat:no-repeat; background-size:0%; background-position:center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #000000; font-size:14px; } /************************************************************************ * OPTIES VOOR GALERIJ ***********************************************************************/ .thumbnails img { height: 80px; border: 4px solid #555; padding: 1px; margin: 0 10px 10px 0; } .thumbnails img:hover, { border: 4px solid #00ccff; cursor:pointer; display:inline; } .preview img { border: 4px solid #444; padding: 1px; height: 500px; } /************************************************************************ * OPTIES VOOR FOOTER ***********************************************************************/ #container { min-height:100%; position:relative; } /* Everything but chrome1+, opera9+, ff 3.5+ */ div#footer { position:absolute; bottom:0; width:100%; height:20px; /* Height of the footer */ background-color:transparent; color:#FFF; } a:link { color: #FFFFFF; } a:visited { color: #FFFFFF; } a:hover { color: #FFFFFF; } a:active { color: #FFFFFF; } [/code:1:8eca67fec1] Dit is de html code van index.html: [code:1:8eca67fec1] <div id="container"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css"> <title>Good-Meat</title> </head> <body class="one"> <!--LOGO --> <div id="wit"> <center> <p><img src="afbeeldingen/logo.JPG" width="500" height="115" /></p> </center> </div> <!--NAVIGATIEBALK --> <div id="navbar2"> <div align="center"> <ul> <li><a href="index.html" class="one">Home</a></li> <li><a href="photos.html" class="two">Photos</a></li> <li><a href="videos.html" class="three">Videos</a></li> <li><a href="downloads.html" class="four">Downloads</a></li> <li><a href="contact.html" class="five">Contact</a></li> <li><a href="kalender.html" class="six">Kalender</a> </li> </ul> </div> </div> <div id="home"> </div> <div id="footer"> <center><h6>Copyright® Good-Meat 2011 &nbsp; &nbsp; &nbsp; Website by Joey Schrama</h6></center> </div> </body> </html> </div> [/code:1:8eca67fec1] Ik heb vandaag al de hele dag google afgezocht en verschillende methodes geprobeerd. helaas mocht dit niet baaten. Ik hoop dat iemand mij hiermee kan helpen! Mvg Joey

[anoniem]

Eén tip: gebruik geen afbeeldingen voor text op je site. Dit is slecht voor je plaats in de zoekresultaten. Je moet het ook voor alle browsers maken: [code:1:f3994859b8]-webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; [/code:1:f3994859b8]

[anoniem]

Tsja. Allereerst kan ik alleen maar benadrukken dat Mike hierboven gelijk heeft, tekst wil je doorgaans niet als een afbeelding hebben maar echt als tekst. Verder is het natuurlijk de vraag in hoeverre jouw doelgroep gebruik maakt van dergelijke lage resoluties. Alleen mobiele apparaten gebruiken die nog heel veel, is dat ook onderdeel van je doelgroep? Zo niet, dan lekker voor 1024x768 en hoger ontwerpen. Overigens zijn er wel manieren om voor lagere resoluties en mobiele apparaten eigen versies te maken, de meest toegankelijke methoden hiervoor zijn waarschijnlijk [url=http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/]meta viewport & @viewport[/url] en [url=http://css-tricks.com/6731-css-media-queries/]media queries[/url]. - Bas

[anoniem]

Inderdaad zou je niet moeten ontwerpen voor schermen van 800 x 600, omdat die bijna niet meer voorkomen. Dat bespaart je dus tijd en moeite. Verder gebruik je een zeer ouderwetse methode om te centreren, namelijk <center>. Hier een tutorial over hoe je dat op een meer browserbestendige en meer moderne manier doet: [url=http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-center-in-css.php]How to Center in CSS[/url].

[anoniem]

Volgens mij is het vrij normaal om te beginnen met designen voor de browsers die zich het beste aan de webstandaarden houden. En daar hoort Firefox zeker bij. Daarna ga je pas kijken naar andere browsers en eventueel aanpassen of extra custom stylesheets maken. Dus die alertbox voor FF op je voorpagina komt me een beetje vreemd over. Daar komt bij dat je die maar 1x zou moeten tonen en niet elke keer als je naar de voorpagina klikt. En ik zie eigenlijk ook helemaal geen probleem met de weergave van de site in FF8.0.

[anoniem]

Blijf in ieder geval binnen de W3C standaarden wat erg belangrijk is. Je kan online een validatie doen [mod actie: link verwijderd]