Afbeelding wordt niet gezien

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ruben Fonteijne

Ruben Fonteijne

24/08/2012 20:03:03
Quote Anchor link
Ik probeer nu al de hele tijd iets, maar ik kom er niet uit. Het probleem is dat de afbeelding niet wordt weergegeven, terwijl (volgens mij) alle codes goed zijn.

Zien jullie ergens een fout?

Bestandlocatie indeling:
index.html
favicon.jpg
style.css
images (map) > totale.png


index.html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet">
<link rel="shortcut icon" type="image/jpg" href="favicon.jpg">
<title>Naam tabblad</title>
</head>
<body>
<div class="container">
<div class="totale">

</div>
</div>

</body>
</html>

style.css:

* {margin:0px;padding:0px;border:0px;}
html, body {width:100%;height:100%; background-image: url(".");
background-repeat: no-repeat; background-color: white; background-position: center;}
.clear {clear:both;}
table {border-collapse:collapse;}
table td {vertical-align:top;}
A {text-decoration:none}

.body
{
font-family: Calibri;
font-size:12px;
margin: auto;
background-position: center;
}

.container
{
/*background-image: url("../images/repeater.png");
background-repeat: repeat-y;
height: 100%;*/
width: 1079px;
margin: 0px auto;
}

.totale
{
background-image:url(../images/totale.png);
background-repeat:no-repeat;
float: left;
width: 1079px;
height: 857px;
}
Gewijzigd op 24/08/2012 20:08:37 door Ruben Fonteijne
 
PHP hulp

PHP hulp

03/02/2023 10:40:58
 
Erwin Goossen

Erwin Goossen

24/08/2012 20:12:45
Quote Anchor link
Waarom heeft de body een lege background-image. Diengen die je niet gebruikt gewoon weglaten. Maakt het een stuk overzichtelijker.
Dat de afbeeldingen niet worden weergegeven ligt sowieso aan de url. Echter is de vraag waar de pagina staat.
Staat deze op een webserver dan zou ik de dubbele punt voor de slash weglaten.
Roep je de pagina gewoon vanaf je eigen schijf, dan ook de slash weglaten.
 
Ruben Fonteijne

Ruben Fonteijne

24/08/2012 20:18:29
Quote Anchor link
Erwin,

ik ben hem eerst nog aan het testen op de localhost. Heb background-image: url(../images/totale.png}; verandert in background-image: url(images/totale.png); maar ook dit maakt geen verschil.
 
Erwin Goossen

Erwin Goossen

24/08/2012 20:20:30
Quote Anchor link
En met url('/images/totale.png')?
 
Ruben Fonteijne

Ruben Fonteijne

24/08/2012 20:22:58
Quote Anchor link
.totale
{
background-image:url('/images/totale.png');
background-repeat:no-repeat;
float: left;
width: 1079px;
height: 857px;
}

Geeft nog steeds geen afbeeldingen..
 
Jurgen B

Jurgen B

24/08/2012 20:26:00
Quote Anchor link
url('images/totale.png') zou moeten werken. Heb je er quotes omheen staan? In je eerste voorbeeld staan ze er namelijk niet, 2 posts terug in wat je hebt geprobeerd staan ze ook niet.
 
Erwin Goossen

Erwin Goossen

24/08/2012 20:33:44
Quote Anchor link
Aan .totale position: relative toevoegen.
Daarna zou het moeten werken.
Je kan dit makkelijker controleren door ipv een image een kleur voor de background te gebruiken. Zie je direct wat je doet.
Als je dan een block ziet, kun je hem vullen met de image.
 
Ruben Fonteijne

Ruben Fonteijne

24/08/2012 20:48:19
Quote Anchor link
.totale
{
background-image:url('images/totale.png');
background-repeat:no-repeat;
position:relative;
float: left;
width: 1079px;
height: 857px;
}

Heb de afbeelding ook verandert naar background-color: black;
maar ook dan komt er geen zwart scherm. Het ligt dus niet aan de afbeelding.
Ook dit werkt niet.. Snap er niks meer van.

Toevoeging op 24/08/2012 21:07:31:

Het is gelukt! Geen idee wat ik precies heb gedaan. De '' hadden ook geholpen.

Muchos gracias, amigos!
Gewijzigd op 24/08/2012 20:50:44 door Ruben Fonteijne
 
Erwin Goossen

Erwin Goossen

24/08/2012 21:23:53
Quote Anchor link
Ruben heb even lokaal getest en op jsFiddle.
Kijk hier: http://jsfiddle.net/Navelpluisje/mUFVa/
moet gewoon werken, kan volgens mij alleen het pad naar de afbeelding zijn.

Had je edit niet gezien;-)
Gewijzigd op 24/08/2012 21:24:22 door Erwin Goossen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.