28112 sujets

CSS et mise en forme, CSS3

Probleme d image de background

Pages :
Bonjour,

j ai un petit souci ...

mon but:
avoir le site centré mais de taille fixe.
le vide autour bande blanche a gauche et droite sur site se redimmensionne suivant taille du navigateur...

1/ est ce que mon code est bon et ma methode correcte ou faut il que je revoit cela
2/ je n arrive pas a mettre une image de fds au div de gauche et droite pour mettre autre chose que du blanc???

merci pour votre aide et tout plein de bonnes choses pour cette nouvelle année qui debute


CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#global {

}

#left {
float:left;
background-image:url(left.jpg);


}

#right {
float:right;
background-color:blue;
}

#header {
height: 100px;
background-color:blue;
}
#ariane {
height: 25px;
background-color:green;
}
#conteneur {
position: absolute;
width: 850px;
left: 50%;
margin-left: -425px;
background-color:blue;
}
#centre {
background-color:yellow;
margin-left: 200px;
margin-right: 180px;
}
#gauche {
position: absolute;
left:0;
width: 200px;
background-color:red;
}
#droite {
position: absolute;
right:0;
width: 180px;
background-color:red;
}
#pied {
height: 50px;
background-color:yellow;
}


HTML
<body>


<div id="global">

<div id="left"></div>

<div id="conteneur">

<div id="header"></div>

<div id="ariane"> </div>

<div id="gauche"></div>

<div id="droite"></div>
	  
<div id="centre"></div>

<div id="pied"></div>

</div>

<div id="right"></div>	
  
</div>	

</body>


upload/1007-screen.jpg


merci et bonne journée

sam/
Modifié par masprod (24 Jan 2006 - 10:54)
bonjour,

en ce qui concerne le background, verifie que ton chemin soit valide.

Cela vient peut etre de la ou alors l'image est trop grande pour rentrer dans le bloc.
Salut

Pour l'instant ce qui est en blanc, ce ne sont pas tes div "#left" et "#right" mais ton body. Essaie de leur ajouter du contenu et tu verras surement un bout d'image à gauche et du bleu à droite. Donc plutôt appliquer le background au "body"

Je n'aime pas tellement ta méthode de centrage quand l'élément est plus large que 800px. Dans ton cas si je dispose de moins de 850px, par exemple en 800x600, la partie de gauche devient inaccessible, même avec la barre de défilement. Dans ce cas je préfère utiliser l'autre méthode, la première décrite ici :
Centrer les éléments ou un site web en CSS

A+
Merci Alan pour tes conseils...
je pensais que plus personne etait encore en 800*600.je me trompe peut etre..
j applique tes conseils et reviens bientot Smiley cligne bonne soirée
sam/
a écrit :
Pour l'instant ce qui est en blanc, ce ne sont pas tes div "#left" et "#right" mais ton body. Essaie de leur ajouter du contenu et tu verras surement un bout d'image à gauche et du bleu à droite. Donc plutôt appliquer le background au "body"

ca veut dire que si il n y a pas de texte dan sun div on ne vera jamais le background image ou color ??
merci..
sam/
je commence a trouver des solutions et ca va mieux...
par contre une colle :
pour mes div #gauche et #droite, divs dans lesquels je met des menus de nav quelle est la technique pour que l image de fonds apparaissent sur tout le div meme si celui ci n est pas rempli de texte..
pour l instant limage est en arriere plan que lorsque il y a du texte dans le div...le but c est que l image de fonds couvre tous le div voir mieux continue s affiche temps que il y a du texte dans la partie centrale...
merci
sam/
pour te permettre d'afficher l'arriere plan dans ton div tu dois le mettre dans te css

#gauche{
background: transparent url(url de ton image de fond) repeat y ;
}


cela doit fonctionner
merci ...
cela ne fonctionne pas ....
ca vient peut etre du body qui lui a un background -image ??
c est pas une histoire de niveau ??
sam/
en fait pas les fichiers la tout de suite sur mon PC.
car suis au taf ;(
mais je met cela en ligne ce soir puis repost ici..
merci Philippe pour ton aide
sam/
masprod a écrit :
Merci Alan pour tes conseils...
je pensais que plus personne etait encore en 800*600.je me trompe peut etre..


Bonjour,
Ca doit représenter (encore) plus ou moins 15% des internautes, soit un pourcentage plus grand que celui des utilisateurs de Firefox(pour l'instant...). ça vaut donc le coup d'y faire attention Smiley cligne
Modifié par Alan (12 Jan 2006 - 09:18)
bien, maintenant on voit

alors,..... quel est ton soucis. A gauche, il y a deja une image et tu veux en plus rajouter quelque chose?

Je pige pas tout

Le rendement n'est pas le meme sous IE et sous Firefox

upload/1258-essai.JPG voila sous Firefox
Modifié par Philippe (12 Jan 2006 - 09:38)
sous la colonne de droite le div #droite normalement je dervais voir apparaitre un fds d image mais la il n est pas la ...
voir dans le code source :
}
#droite {
position: absolute;
right:0;
width: 164px;
background: transparent url(slow_05.png) repeat y ;
}


puis faut qu eje gere ce nouveau probleme avec Firefox...;(

merci phillipe//

sam/
le probleme c est qu eje narrive pas a mettre d image de fonds dnas le sdiv droite et gauche sans que je sois obligé d y mettre du texte pour faire apparaitre cette image...
par exemple dans le header pas de souci sans texte l image de fds apparait ce qui ne st pas le cas ds droite et gauche.
sam/
comme ça, l'image apparait dans FF

#droite {
position: absolute;
right:0;
width: 164px;
background:  transparent url(slow_05.png);
}


En ce qui concerne la hauteur de l'image qui depend du texte que tu mets dedans, pour eviter de la voir diparaitre q'il n'y a rien, tu peux te servir de la propriete "min-height"

#droite {
position: absolute;
right:0;
[b]min-height: 300px;[/b]   /* c'est un exemple */
width: 164px;
background:  transparent url(slow_05.png);
}


tu trouveras plus de renseignement sur cette propriete sur mediabox
Modifié par Philippe (12 Jan 2006 - 10:44)
je te remercie Phillipe pour ton sérieux coup de main...je fais cela ce soir en rentrant du boulot...merci encore...
...
a bientot pur j espere epinglé le suje avec un résolu Smiley cligne )
merci.
quelle st la solution pour moi que lorsuqe le contenu du #centre s allonge je puisse obtenir le fait que les bordur ombré du div droite et gauche continue a descendre elle aussi pour pourvoir finir par le footer ?
merci pour ton aide...
sam:
Pages :
Sujet clos
Aller à