Pour transformer mon image en design

Ou comment "traduire" ma création toshop en CSS

Sujet résolu

2 novembre 2006 à 8:50:17

Bonjour à tous,

Je voudrais faire un style CSS avec mon image Toshop, je connais le CSS et je sais m'en servir (j'ai déjà fait des sites) mais là, je suis bloqué !
Voilà mon image de base

Et puis voilà mon code CSS

body
{

width: 800px;
margin: auto;
}
#Menu
{
height: 205px;

background-image: url(images/Haut_Bannière.gif);
background-position: center;
margin-top: 5px;
background-repeat: no-repeat;

}

#Corps
{
background-image: url(images/Corps.gif);
background-repeat: repeat-y;
background-position: center;

text-align: center;
}

#Bas
{
height: 38px;

background-image: url(images/Bas.gif);
background-position: center;
background-repeat: no-repeat;
margin-bottom: 0px;
}

Et puis, mon code (x)HTML

<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Style, Béné" href="stule.css" />

</head>

<body>
<div id="Menu"></div>

<div id="Corps">
Bonjour,
Bienvenue sur le site de Bénédicte Dossin!
</div>

<div id="Bas">
</div>

</body>
</html>

Avec Dreamweaver, ça s'affiche correctement mais sur Firefox pas.
Voici un exemple de ce qui s'affiche sous Firefox:

Est-ce que vous avez déjà été confronté à ce genre de problèmes?
Si oui, merci de me faire part de vos corrections pour le code.

Merci

Bonne journée à tous,
Emora

strucky

2 novembre 2006 à 12:26:56

Ton design doit-être extensible ?

Steeve

2 novembre 2006 à 12:37:26

Est ce que href="stule.css" est le bon fichier ?
stule -> style

Pour : background-image: url(images/Haut_Bannière.gif);
moi je mets entre guillemets : background-image: url("images/Haut_Bannière.gif");
Je sais pas si ça change grand chose.

Maintenant tu peux toujours te renseigner sur position : ;

Et ça : background-position: center;
Je ne pense pas que ce soit utile centre tout ton site avec ton body tu as déjà bien commencé avec le:
margin: auto;
... te manque un text-align:center;

EDIT : j oubliais --> images/Haut_Bannière.gif éviter les accents !

Emora

2 novembre 2006 à 14:15:09

Ouaah ,
Merci beaucoup! Stule.css c'est bien le nom de mon fichier CSS, j'aime faire dans l'original

(je me suis gourer en fait :euh:

)

Tout ce que vous m'avez dit est correct, ça marche à merveille, merci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcpmerci bcp

je dirais meme mercimercimercimercimercimercimercimercimercimercimercimercimercimercimercimercimerci