[Résolu] Centrer un élément de largeur variable

Bonjour,

Je suis débutante en CSS et j'ai quelques questions à poser concernant une feuille de style que j'essaye de réaliser pour un site.

Tout d'abord, je souhaiterais placer un conteneur div de largeur variable au centre d'un conteneur div parent (la largeur du div "fils" varie car il contient du texte "dynamique")
J'ai parcouru un certain nombre de forums et de tutoriels et tous disent que pour centrer un élément, sa largeur doit être fixe. Des alternatives existent-elles ?

Autre problème : je voudrais mettre une barre de couleur orange sur le côté de mon site. Pour cette barre, j'utilise un conteneur div dont la propriété background-color est définie avec une couleur orange. J'aimerais que la hauteur de cette barre s'adapte automatiquement à la hauteur du site (selon la quantité de texte du site).
Mais je n'y arrive pas. En attendant j'ai mis une hauteur fixe ..

Merci de votre aide !

Niniz
Modifié par Niniz (04 Jul 2007 - 16:43)

Pour la barre orange à gauche, est-ce qu'il ne serait pas plutôt possible de la mettre en image de fond d'un bloc conteneur ?


Pour le centrage horizontal, plusieurs solutions :
1 - dans l'idéal, on utiliserait display: inline-block sur le div enfant et text-align:center sur le div parent... mais le manque de support par certains navigateurs fait que ça n'est pas vraiment utilisable ;
2 - à défaut, si on a une seule ligne de texte, il suffira de centrer un span via un text-align:center sur le div parent... il faut voir si ça peut convenir ;$
3 - sinon, avec un tableau ça marche plutôt bien (les éléments en affichage de type tableau, que ce soit l'élément table ou un bloc en display: table, peuvent être centrés horizontalement avec des marges automatiques, même s'ils n'ont pas de largeur fixe).

Ok je vais tester ça

Merci pour ta réponse rapide

Pour la barre orange, j'ai testé avec une image en background et même avec la propriété repeat-y, je n'arrive pas à faire en sorte que l'image se répète à la verticale sans donner une hauteur fixe ..

Concernant le centrage horizontal, j'ai éprouvé les diverses solutions et je pense que celle du tableau reste la meilleure comme tu l'as précisé. J'ai remarqué que la propriété display: table n'était malheureusement pas supportée par IE6 (saloperie de navigateur ) alors que ça fonctionne bien sous Firefox.

Niniz

Ton problème semble simple en ce qui concerne ton div conteneur de texte et ton bord droit :

1/ pour le conteneur div, ne spéficie pas de hauteur fixe, avec l'instruction height : auto;

2/ Pour le bord tu peux spécifier sur le div parent : border-right: 10px solid #FF6600; par exemple, ça t'évite de charger une image.

Pour apprendre css, ce site est épatant : http://www.w3schools.com/css/

Bonne chance !

J'ai opté pour la solution avec la bordure border-right sur le div parent.
Et ça marche impec' !

Merci beaucoup

PS : je vais de ce pas zieuter le tuto w3schools. Celui-ci est pas mal non plus http://www.pompage.net/pompe/cssdezero-1/ pour les débutants comme moi

[Edit]Je ne voulais pas poster ici, mais là, désolé, petite erreur de ma part. Ceci dit le problème est le même: centrer un élément dont on ne connaît pas à l'avance la largeur…
Modifié par Mateo (26 Sep 2007 - 07:13)