28172 sujets

CSS et mise en forme, CSS3

Border perso 100% height

Bonjour!

Comme ça fait maintenant 2 jours que je travaille sur le sujet, je me suis décidé à demander de l'aide. Dans le design du site que je construis, j'ai un div à droite et un à gauche qui servent de border à un autre div, celui qui contient le contenu principal.

Ils tiennent en place avec un float:left, float:right et ont pour background la même image de 1px de haut par 5px de large, avec un repeat-y. Je peux donc ainsi choisir la hauteur de la bordure.

Mon problème, c'est que j'aimerais bien qu'elles s'étirent jusqu'en bas de la page au minimum et plus si le contenu l'oblige. Et ça, ça semble poser problème. Enfin, je vous laisse le lien pour aller voir ça:

http://mickaeldeveloppement.megabyet.net/premiers_quartier_cap/index.html

Les déclarations des div borderLeft et borderRight sont dans le fichiers global.css, qui inclut toutes les déclarations relatives à toutes les pages du site. J'ai pour l'instant mis une hauteur de 1000px à ces div.

En espérant avoir été le plus clair possible,
Merci beaucoup!
Bonjour,

Le problème, je pense... est que tes divs soient en float.
L'attribut CSS float sort les div en question du flux de la page.
Ce qui fait qu'elle ne s'agrandissent pas en fonction de ton contenu textuel.

En solution, tu peux utiliser une image de fond de la largeur de ta div de contenu pour faire tes bordures. (avec un repeat-y bien entendu)
De cette manière tu pourras supprimer tes divs borderLeft et borderRight.

A toi de voir si la solution te convient !
Bonjour et bienvenue sur le forum, Smiley smile

Il me semble que la solution la plus simple est d'appliquer une bordure à droite et à gauche de l'élément concerné. Il existe un style qui correspond exactement à l'effet recherché :

#content {
border-left: 3px double grey;
border-right: 3px double grey;
}

Il suffit juste de remplacer grey par la bonne couleur. Smiley cligne
Merci beaucoup de vos réponses express!

"L'attribut CSS float sort les div en question du flux de la page."
"border-left: 3px double grey;
border-right: 3px double grey;"

Magique. J'avais une sérieuse lacune dans la maîtrise du float, que j'utilisais sans vraiment le comprendre. Mon div #content contenait deux div en float:left float:right en plus des bordures, ce qui était un peu n'importe quoi. Maintenant c'est réglé.
De plus, je n'avais pas suffisamment exploré les styles de border disponibles avant d'importer ça de Photoshop.

Vous m'avez tous deux bien aidé! Et pas seulement pour ce problème spécifique mais aussi pour mes prochaines réalisations web.
Sujet clos
Aller à