18073 sujets

Questions générales et questions de débutants

Fond dans une div

Bonjour,

j'ai utilisé le modèle http://css.alsacreations.com/modeles/modele5.htm
J'ai remplacé les styles gauche et droite :

AVANT :

#gauche {position: absolute; left:0; width: 150px;}
#droite {position: absolute; right:0; width: 150px;}


APRES

#gauche {position: absolute; left:0; width: 20px; 
background: white url(images/lthd2_accueil_06.jpg) repeat-y;}
#droite {position: absolute; right:0; width: 20px; 
background: white url(images/lthd2_accueil_12.jpg) repeat-y;}


Les images utilisées ne se répète pas, à mon grand regret. Qui peux me dire pourquoi ?

Merci
Manu
Modifié par Manu59112 (24 Jun 2005 - 09:57)
#gauche
{
position: absolute;
left:0;
width: 20px; 
background: white url(images/lthd2_accueil_06.jpg)[#red][b];
background-repeat: repeat-y;[/b][#black]
}

Essaye ça pour voir
Remarque : j'ai fait des retours à la ligne pour la clareté mais c'est ce qui est en gras qui, me semble-t-il, te manquait ou ne collait pas
A noter que "repeat" sans "-y" ou "-x" répète verticalement ET horizontalement selon la place disponible en x ou en y
Modifié par charlynancy (25 Jun 2005 - 13:44)
Bonjour,
Aurais-tu le contexte générale de la page (html) et éventuellement d'autres parties de la feuille de style, car tout semble correct et devrais fonctionner.
Note bien que je demeure sceptique sur la largeur de 20px qui me semble un peu étroite pour contenir un vrai contenu. J'espère que ce deux "colonnes" ne servent pas uniquement de support à une image décorative Smiley cligne .

@charlynancy
La propriété raccourcie 'background' intègre parfaitement la propriété individuelle 'background-repeat' comme dans cet exemple, le plus souvent des conflits arrivent lorsque l'on définie des propriètés individuelles alors que l'on a déjà déclaré dans les propriétés raccourcies.
ps: merci d'utiliser [ code] et [ /code] pour le code Smiley biggrin
Merci pour vos réponses.
ALors le code de la page html est le suivant :


<div id="conteneur">
	<div id="header">
	<img src="images/lthd2_accueil_01.jpg" class="img_g" alt="" />
	<img src="images/lthd2_accueil_02.jpg" class="img_thd" alt="" />
	<img src="images/lthd2_accueil_03.jpg" class="img_d" alt="" />
	<img src="images/accueil_01.jpg" class="img_large" alt="" />
	<img src="images/white.jpg" class="img_commune" alt="" />
	</div>

	<div id="gauche"></div>
	<div id="droite"></div>
	  
  	<div id="centre">
  	  partie centrale qui "pousse" les colones vers le bas.<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	</div>
	  
	  <div id="pied">Plan du site - Crédits - Mentions légales</div>
</div>
Igor,
merci pour les précisions concernant :
* la propriété individuelle et la propriété racourcie (sources possibles de problèmes que je ne prenais pas en compte)
* l'édition des message de code avec la balise qui va bien (je vais rééditer mon post)

A noter qu'il me semble bien que le point virgule";" a été oublié entre 
white url...
et 
background...

Modifié par charlynancy (25 Jun 2005 - 13:43)
Je ne vois pas pourquoi ça ne fonctionne pas, regarde sur ce lien, j'ai fait ce que tu sembles vouloir faire.
Si c'est ce que tu voulais faire, regarde le code source de la page.
Sinon, explique moi à partir de cette page ce que tu veux obtenir.

A noter que pour droite, sans rien préciser pour le repeat, la répètition se fait par défaut.
Modifié par charlynancy (25 Jun 2005 - 21:24)
Oui, dans le principe c'est bien ça.
MAIS (ben oui, y'a un mais...) les images que je répète à gauche et à droite sont utilisées pour faire une illusion d'ombre.
Il n'y a donc pas de textes dans les div et le fond ne se répète pas. Par contre, j'ai remarqué au cours de mes différents essais que si j'ajoute du texte, le fond se répète sur la hauteur occupé par le texte.
J'ai refait sans le texte ICI
Si tu veux que ça se répète sans le texte, il suffit de paramètrer la hauteur de tes parties gauche et droite 
height: 150px;
par exemple


Oufff, je crois enfin comprendre ce que tu veux Smiley sweatdrop
Tu veux que "gauche" et "droite" se dimensionnent automatiquement en fonction de "centre". Reformule ton problème si c'est ce que tu veux... ça devient dur de t'aider sans savoir ce que tu veux exactement.
Modifié par charlynancy (26 Jun 2005 - 10:20)
On se rapproche de la cible sauf que je souhaite que la hauteur de "gauche" et "droite" soit imposée par "centre".
Et à l'avance, je ne connais pas la hauteur de "centre".
pour arriver à solutionner ton problème, il faut imbriquer les div les unes dans les autres (centre "pousse" droite qui "pousse" gauche) puis il faut tripatouiller le positionnement des div à gauche et à droite.
Ceci dit, ça va poser des problèmes quant au respect des block et inline.
Il doit y avoir plus simple mais je n'ai plus le temps de cogiter la dessus.
Comme ton problème est mieux reformulé tu devrais avoir une réponse d'un membre chevronné bientôt.
En reprenant les tutoriels sur les notions de "Block" et de "position relative", je pense que tu dois pouvoir trouver quelquechose
PS : pense à utiliser d'autres balise que div
Bon courrage
Modifié par charlynancy (26 Jun 2005 - 11:05)
Sujet clos
Aller à