CSS: background-image vanuit extern bestand - Softwareontwikkeling

zondag 2 april 2006 15:42

Acties:

De brakste schakel

Topicstarter

Ik heb een mouseover op mijn webpagina, en die werkt met css.
Alles werkt zoals het zou moeten.

Maar zodra ik de code van de css in een extern bestand opsla, en niet meer in de html pagina zelf, wordt de background-image niet meer ingeladen (via een @import "bla.css"; ). Contact_1.jpg verdwijnt wel als ik er met mijn muis over ga, maar staat er niks meer onder.
Ik kan er maar niet achter komen wat er vekeerd gaat. Dit zou toch moeten kunnen?

Cascading Stylesheet:

.cssnavplay {
float:left;
font-family:arial, verdana, helvetica, sans-serif;
background-image:url(images/Contact_2.jpg);
background-repeat:no-repeat;
display:block;
width:129px;
height:85px;
margin:0; 
margin-bottom:0px;
padding:0; 
}
.cssnavplay a {
display:block;
font-size:11px;
width:129px;
height:85px;
display:block;
float:left;
margin:0;
padding:0;
color:black; text-decoration:none; 
}
.cssnavplay img {width:100%; height:100%; border:0; }

.cssnavplay a:hover img{visibility:hidden}

HTML:

1
2
3

<div class="cssnavplay">
<a href="contact.php">[img]"images/Contact_1.jpg"></a>
</div[/img]

Edit: Dit gaat trouwens alleen mis met Firefox. In IExplorer 6 gaat het wel goed.

[ Voor 20% gewijzigd door MaDDoG op 02-04-2006 15:47 ]

"Computer games don't affect kids. I mean if Pacman affected us as kids,
we'd all run around in a darkened room munching pills and listening
to repetitive music."

zondag 2 april 2006 15:44

Acties:

Verwijderd

De paden in een CSS bestand zijn relatief aan de locatie van het CSS bestand, niet relatief aan het pad in de URI.

zondag 2 april 2006 15:47

Acties:

Borizz

Verwijderd schreef op zondag 02 april 2006 @ 15:44:
De paden in een CSS bestand zijn relatief aan de locatie van het CSS bestand, niet relatief aan het pad in de URI.

Dat is inderdaad de oorzaak.
Verder vraag ik me af waarom je niet compleet met background images werkt om een plaatje te swappen bij een :hover

?

If I can't fix it, it ain't broken.

zondag 2 april 2006 15:52

Acties:

JHS

Splitting the thaum.

Cheetah: Als dat het zou zijn zou het lijkt me ook niet in IE functioneren

.

DM!

zondag 2 april 2006 15:52

Acties:

MaDDoG

De brakste schakel

Topicstarter

Het html bestand en het css bestans staan beide in de root. Daarin staat een map 'images' met alle plaatjes. Dus dan hij toch juist moeten verwijzen? Of mis ik nog iets?

"Computer games don't affect kids. I mean if Pacman affected us as kids,
we'd all run around in a darkened room munching pills and listening
to repetitive music."

maandag 3 april 2006 19:13

Acties:

MaDDoG

De brakste schakel

Topicstarter

Aaaaai, is er niemand die een oplossing heeft / het probleem kent? Ik heb er weinig zin in om de bovenstaande code 6 maal (voor 6 knoppen) in elke pagina te moeten zetten.

Voordat ik er achter was dat het aan het in een extern bestand plaatsen lag was ik al bijna een uur verder (wie verzint dat nou weer).

"Computer games don't affect kids. I mean if Pacman affected us as kids,
we'd all run around in a darkened room munching pills and listening
to repetitive music."

maandag 3 april 2006 19:18

Acties:

sebastius

Laten we lekker link gaan doen

[...]via een @import "bla.css"; [...]

Uh? CSS include je toch door

code:

1	<link type="text/css" href="bla.css" rel="stylesheet" media="screen" />

oid in je <head></head> te gooien?

[ Voor 22% gewijzigd door sebastius op 03-04-2006 19:19 ]

maandag 3 april 2006 19:31

Acties:

MaDDoG

De brakste schakel

Topicstarter

Kan natuurlijk ook, maar ik doe het op deze manier. Die moet toch ook prima werken bij mijn weten.

Ik heb het voor de zekerheid ook op de door jou beschreven manier geprobeerd. Helaas met hetzelfde resultaat.

Hieronder even de complete relevante html code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
    @import "navigation.css";
</style>
</head><body>
<div class="cssnavplay"><a href="contact.php">[img]"images/Contact_1.jpg"></a></div>
</body></html[/img]

De code in de eerste post staat dus in navigation.css

[ Voor 24% gewijzigd door MaDDoG op 03-04-2006 19:32 ]

"Computer games don't affect kids. I mean if Pacman affected us as kids,
we'd all run around in a darkened room munching pills and listening
to repetitive music."

maandag 3 april 2006 19:38

Acties:

frickY

Op sommige (slecht geconfigureerde servers) worden alle bestanden door de PHP-parser getrokken, en zo ook *.css.
Hierdoor krijgen zij de content-type text/html mee, in plaats van de gewenste text/css. Firefox weigerd daarmee de CSS toe te passen.

Indien dit bij jou ook het geval is kun je als tijdelijke oplossing
header("Content-type: text/css");
bovenin je CSS-bestand(en) plaatsen. Netter is, desnoodsmet htaccess, om CSSjes neit te laten parsen.

maandag 3 april 2006 19:45

Acties:

Borizz

Wat fricky zegt klopt, je kan in de javascript console van firefox kijken (vanaf FF 1.5) of daar een melding van wordt gemaakt dat de content-type van het css bestand geen text/css is.

If I can't fix it, it ain't broken.

maandag 3 april 2006 20:04

Acties:

MaDDoG

De brakste schakel

Topicstarter

Aààài, ik heb zelf de fout gemaakt. Die java-console in Firefox heeft me het licht laten zien, goede tip om die te gebruiken.
Ik had comment geplaats in de css file, en wel op de volgende manier:

Dat werkt niet echt lekker.

Excuses voor het onnodig gebruik van hersencapaciteit. Ik ga me nu in een hoekje zitten schamen

"Computer games don't affect kids. I mean if Pacman affected us as kids,
we'd all run around in a darkened room munching pills and listening
to repetitive music."