Image en background

24 octobre 2006 à 22:14:16

Bonjour, je souhjaiterai ajouter une image en fond sur ma page d'index, j'ai donc mis ce code en css:

.nouveau {
position: absolute;
background-position: top left ;
background-image: url('images/nouveau.png') ;
background-repeat: no-repeat ;
width: 150px ;
height: 150px ;
margin:0;
padding:0;
}

Puis integer le div dans mon index mais voila l'image ne touche pas les bords et je ne comprends pas pourquoi

http://studio.trackmania.free.fr

Anonyme

24 octobre 2006 à 22:23:32

Salut !

oui par défaut les navigateurs laissent une marge dans le body

Ajoute ceci dans ton css :

body
{
border:0px;
margin:0px;
}

sl33

25 octobre 2006 à 0:19:13

Dans firefox, mon background de la partie centrale ne s'affiche pas tandis que sur IE je n'ai pas de problème. j'ai fait des recherches mais je ne parviens pas à corriger cette erreur (je suis débutante).
voici la visu (à gauche FF et à droite IE)
<lien url="http://bxbx.free.fr/test/testvisu.html"></lien>

mon code

/*GENERALITES*/

body{
background:#e4d8c1;
font-size:10px;
color:#333333;
font-family:verdana;
margin:0;
padding:0;
text-align:center;
}

/*titre orange pour le classement, photos, ...*/
h1{
margin:0;
padding:0;
font-size:12px;
font-variant:small-caps;
text-decoration:none;
color:#ffcc00;
}

/*en bleu pour les scores, but, avertissement, ...*/
strong{
margin:0;
padding:0;
text-decoration:none;
color:#6285bd;
}

/*titre marron ...*/
h3{
margin:0;
padding:0;
text-decoration:none;
color:#b19966;
}

/*titre vert pour les titres des news ...*/
h4{
text-indent:60px;
margin:0;
padding:0;
text-decoration:none;
color:#82b01c;
}

p{
margin:0;
}

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

a:hover, a:focus{
color:#b19966;
text-decoration:underline;
}

a img{
border:none;
}

#news li{
margin:0;
list-style-image:url(design/pucev.gif);
line-height:13px;
}

/*HEADER*/

#header{
position:relative;
width:901px;
height:146px;
background:url(design/fondhaut.gif) left bottom no-repeat;
text-align:left;
margin:0 auto;
}

#menu{
position:absolute;
width:901px;
height:146px;
top:117px;
left:138px;
}

/*GLOBAL*/

#global{
position:relative;
width:901px;
background:url(design/global.gif) left top repeat-y;
text-align:left;
margin:0 auto;
}

#global #news{
float:left;
padding-top:4px;
padding-left:40px;
width:560px;
}

#global #sidebar{
float:right;
width:290px;
padding-top:2px;
}

#global #sidebar h1{
text-align:center;
}

#global #sidebar p{
padding-right:40px;
}

/*FOOTER*/
#footer{
clear:both;
width:901px;
height:38px;
background:url(design/footer.gif) left bottom no-repeat;
color:#ffffff;
text-align:left;
text-indent:40px ;
margin:0 auto;
}

#footer p{
padding-top:4px;
}

merci pour votre aide

Rasta

25 octobre 2006 à 6:45:06

alors, si j'ai bien compris tu as juste à rajouter la couleur ici :

#global #news{
float:left;
padding-top:4px;
padding-left:40px;
width:560px;
background-color: #ffffff
}

tout simplement parce que sur IE tu dois avoir une couleur de fond blanche par défaut, et sur firefox pas de couleur par défaut

et sinon, tu n'es pas obligée d'ajouter #global devant les <div> enfant (comme #news)

sl33

25 octobre 2006 à 8:39:35

<lien url="http://bxbx.free.fr/test/actualites.html"></lien>
Ce qui ne marche pas dans FF c'est le div global. Je n'arrive pas à faire appliquer l'image de fond. En effet, le background sert pour les div enfant news et sidebar. Si j'enlève le float:left au div news l'image de fond apparait mais le div sidebar se place en-dessous du div news.
Quand je demande la taille du div global, ça m'indique 901px * 0px, hors il devrait faire la taille du div news ou sidebar.

Satis8

25 octobre 2006 à 8:43:35

ça serait bien d'éviter de polluer les topics, parce que si tout le monde poste dans le même topic on va pas s'en sortir

Sinon pour moi le probleme est réglé

Rasta

25 octobre 2006 à 9:04:01

Citation : sl33

<lien url="http://bxbx.free.fr/test/actualites.html"></lien>
Ce qui ne marche pas dans FF c'est le div global. Je n'arrive pas à faire appliquer l'image de fond. En effet, le background sert pour les div enfant news et sidebar. Si j'enlève le float:left au div news l'image de fond apparait mais le div sidebar se place en-dessous du div news.
Quand je demande la taille du div global, ça m'indique 901px * 0px, hors il devrait faire la taille du div news ou sidebar.

erf oui fait un nouveau topic ça ira mieux

et puis la je commence à fatiguer lol, peut etre qu'après quelques heures de sommeil j'aurais le courage de regarde ton code source une nouvelle fois

Candygirl

25 octobre 2006 à 10:38:14

Citation : sl33

Dans firefox, mon background de la partie centrale ne s'affiche pas

C'est normal; ton #global ne contient que des flottant, il n'a donc pas de hauteur. Pour le forcer à descendre jusqu'en bas tu peux, par exemple, remonter ton footer à la fin de ton #global qu'il en fasse partie.