28172 sujets

CSS et mise en forme, CSS3

CSS, background et <div>

Bonjour,

j'ai actuellement un petit problème, j'ai bien peur que la solution soit simplissime mais je ne l'ai point vue. Bref entrons dans le vif du sujet :

Je n'arrive pas à appliquer une image via un css dans ma page html.

tout d'abord l'arborescence :
dans un dossier site nous avons :

un dossier CSS avec styles.css
un dossier images avec logo.jpg
un dossier html avec index.html


dans 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/styles.css" rel="stylesheet" type="text/css" />
<title>Titre qui déchire</title>
</head>

<body>

<div id="logo"></div>

<div id="en_tete"><h1>Super en tête</h1>
</div>
</body>
</html>


dans styles.css

@charset "utf-8";
/* CSS Document */

body
{
 width:90%;
 margin-left:auto;
 margin-right: auto;
 background-color:#9CF;
 font-family:Georgia, "Times New Roman", Times, serif;
} 

a
{
 color:#060;
 text-decoration: none;
}

a:hover 
{
 text-decoration: underline;
} 

#logo
{
	width: 200;
	height: 170;
	position: absolute;
	margin-left: 700px;
	margin-top: -30px;
	background-image: url("../images/logo.jpg");
}

j'ai essayé avec divers différences au niveau du renseignement de l'image avec ou sans quotes, même en mettant l'image dans le même dossier que styles.css, rien n'y fait

je tiens tout de même à préciser que je suis débutant.
Salut,

Essaie avec des vraies dimensions (unités !!!) pour la largeur et la hauteur de #logo ? Smiley biggrin
Pour le reste, as-tu vraiment besoin d'un élément <div> vide (tu pourrais peut-être utiliser body, #en_tete, ...) ?

tm
Pour moi si t'a strucure des dossier ce fait comme ça :

Dossier SITE
fichier - index.html
Dossier - IMG
fichier - logo.jpg
Dossier - CSS
fichier - CSS

ton appel doit ce faire je pense (IMG/logo.jpg) et non (../IMG/logo.jpg)
tu dois partir de ton index ... peut etre que je me trompe aussi... ou sinon
dans ta div tu peux mettre une balise image avec un id et appliquer le css sur cette id 
<img src="IMG/logo.jpg" id="Image" />
Les URLs dans les feuilles de styles sont bien relatives au fichier CSS lui-même et non au fichier HTML qui appelle la feuille...
merci tm, et oui cela est beaucoup plus simple lorsque l'on utilise des unités...

si ça avait été marqué cela aurait été plus simple pour moi faut que je change de support d'apprentissage.

Merci pour la rapidité de réponse Smiley smile
Sujet clos
Aller à