Centrer un contenu avec hauteur minimum

**steph6499** · 05/04/2007, 16h40

Bonjour a tous,
j'ai regardé un peu les discussions precedentes mais ca ne correspond jamais vraiment a mon probleme.

En fait je voudrais que mon site soit sur un fond noir donc (avec bgcolor) et que tout le contenu soit dans un rectangle bleu centré (meme espace entre bord du rectangle et bord de lecran a gauche et a droite)

Je pourrais tout betement faire un rectangle bleu sur fond noir et mettre le tout en image d'arriere plan mais j'aimerais pouvoir changer la taille de mon rectangle en fonction de la taille du contenu.
Autrement dit, tant que le contenu de ma page d'accueil, par exemple, rentre dans mon rectangle, je voudrais laisser la taille initiale du rectangle, mais je voudrais pouvoir "tirer " mon rectangle vers le bas afin de rajouter de la place si le contenu est trop important.

En gros, je voudrais que mon rectangle est toujours la meme largeur et soit centré, et pouvoir ensuite facilement changer sa hauteur en fonction de l'importance du contenu.

J'espère avoir été claire et vous remercie d'avance pour vos reponses.

Steph

**cedsun** · 05/04/2007, 16h55

Ce rectangle doit être centré dans le hauteur ?

**titfab** · 05/04/2007, 16h58

Utilise une div pour faire ton rectangle bleu :

<div style="background-color:blue;width:80%;height:70%;margin-left:10%;margin-top:15%;">
</div>

=> rectangle bleu de largeur 80% de la page, de hauteur 70% de la page,
le rectangle est centré selon un pourcentage de largeur et hauteur de page pour les marges.

**blueice** · 05/04/2007, 18h05

A toi de coller l'image en background :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css" title="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
body { background-color:black; color:white;}
.conteneur {
text-align: center;
margin-top:5%;
}
.centre {
margin-left: auto;
margin-right: auto;
width: 400px;
text-align: left;
border:1px solid white;
}
/* ]]> */
</style>
</head>
<body>
<div class="conteneur">
<div class="centre">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ut risus eget neque porttitor venenatis. Aenean tincidunt viverra tellus. Vestibulum purus. Pellentesque at dui consequat ipsum tempus congue. Mauris faucibus est nec ante. Pellentesque non quam. Donec hendrerit, tellus nec rutrum sollicitudin, elit mi tempus diam, ornare rutrum nulla massa eu massa. Praesent et turpis. Quisque quis enim. Quisque aliquam pretium ligula. Maecenas metus pede, bibendum sit amet, interdum et, bibendum vitae, leo. Praesent arcu ante, sollicitudin ac, malesuada sit amet, adipiscing vel, tortor. Vestibulum dui neque, tincidunt et, ullamcorper consectetuer, venenatis id, lorem. Morbi sapien quam, tristique non, tincidunt ut, sodales non, libero. Sed dolor elit, accumsan vitae, posuere vel, luctus id, urna. Etiam nec lacus non nibh lacinia malesuada. Integer eget sem quis turpis fringilla aliquet. Integer nec turpis at dui convallis scelerisque. Praesent quis neque quis diam rutrum pellentesque.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet, dui vel aliquet ultricies, dolor nisi mollis lorem, vitae faucibus tellus purus quis augue. Fusce nibh. Duis accumsan. Donec fringilla arcu quis sem scelerisque vulputate. Ut vel sem. Morbi imperdiet laoreet tellus. Nam nulla. Nam bibendum convallis eros. Sed ut neque nec tortor iaculis fermentum. Morbi lacinia tortor et nibh. Duis sapien. Maecenas eu arcu.
Ut nonummy arcu et odio. Cras non purus. In hac habitasse platea dictumst. Ut et magna. Quisque dui ligula, sagittis id, blandit eget, imperdiet non, nisl. Cras ac dui. Pellentesque tempor, velit ac cursus molestie, dui ante pellentesque purus, eu dictum dolor dui ac libero. Nam porta facilisis felis. Aliquam scelerisque felis eu elit. Cras rhoncus magna quis magna. Morbi ut ipsum a diam porttitor placerat. Fusce risus nulla, porttitor id, congue ut, suscipit ut, nisl.
Etiam dictum interdum erat. Donec eleifend, leo nec interdum imperdiet, metus metus sollicitudin turpis, vitae iaculis arcu metus at ante. Sed enim nunc, accumsan auctor, eleifend eget, adipiscing a, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nulla augue, facilisis a, porta in, aliquam ut, enim. Cras leo elit, dapibus vel, vehicula a, auctor eu, sem. Donec purus. Ut ut dui. Proin varius, libero sit amet vulputate pellentesque, neque felis tempor nulla, lobortis egestas mi justo nec sapien. Mauris posuere massa eu urna. Curabitur molestie augue ac eros. Aenean placerat massa in sapien. Quisque adipiscing arcu eu pede. Sed aliquet urna ut pede. Vestibulum sapien magna, lacinia bibendum, dapibus in, facilisis at, dolor. Donec facilisis sollicitudin ante. Quisque eget risus sit amet turpis accumsan rutrum. Proin id lectus.
Sed vehicula, orci vitae commodo aliquet, lacus turpis ultrices magna, vitae tincidunt ante nisl sit amet nunc. Mauris eget libero. Pellentesque a dolor. Cras ut sapien eleifend orci porttitor accumsan. Proin mauris libero, interdum vel, tristique vel, condimentum et, nisl. Phasellus consequat vehicula ipsum. Etiam viverra, nisl ut nonummy fermentum, neque justo consectetuer eros, vitae varius dui mi sed eros. In gravida, ante nec bibendum venenatis, justo pede eleifend urna, eu semper dui eros sit amet purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed rhoncus.
Aliquam erat turpis, varius nec, tincidunt eu, rutrum quis, magna. Morbi non arcu. Nunc nunc sapien, posuere et, fringilla ut, vulputate sit amet, mi. Sed at ligula id ligula euismod ullamcorper. Aenean sit amet lacus in elit aliquet porta. Fusce diam turpis, tempus a, luctus ut, malesuada quis, urna. Maecenas commodo. Mauris orci augue, adipiscing eget, ultricies ac, pellentesque nec, augue. Nullam tempor orci eu mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In vulputate leo quis nulla. Pellentesque mauris nulla, commodo in, lobortis nec, euismod non, leo. Vivamus pharetra libero eu magna. Aliquam metus leo, mollis vel, facilisis nec, semper et, magna. Morbi in leo. Nam tempus lorem ac pede. Donec massa leo, facilisis et, mollis sed, vulputate in, justo. Mauris orci urna, vehicula eu, placerat in, feugiat eget, lectus. Mauris fermentum ipsum eget arcu.
Duis porttitor. Nunc egestas lectus. In id nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque urna mi, hendrerit vitae, feugiat id, eleifend vitae, diam. Quisque mi enim, pharetra a, eleifend vel, lacinia sit amet, velit. Integer tincidunt, velit tincidunt dapibus fringilla, libero lacus malesuada libero, aliquam consectetuer nibh lectus commodo augue. Nullam tincidunt, pede vel venenatis nonummy, erat turpis pulvinar pede, non ultrices est ligula vel erat. Donec fringilla magna ac urna. Morbi dui enim, blandit sit amet, vehicula vel, porta at, arcu. Suspendisse egestas nibh a nibh. Cras sem velit, aliquam id, hendrerit at, congue sit amet, mi. Duis vel urna id tellus convallis tempor. Nulla in lorem. Pellentesque magna. Duis nisi. Nunc tristique ligula et nulla. Duis commodo neque non arcu.
</div>
</div>
</body>
</html>

**steph6499** · 05/04/2007, 18h34

Je viens d'essayer vos deux suggestions (titfab et blueice). Avant de les adapter a ce que je veux faire, j'ai copié-collé vos codes pour voir ce a quoi ca amene.

titfab : ton code est bien adapté a ce que je veux faire, ce que je ne comprend pas c'est que lorsque je change le parametre "blue" par la couleur que je veux "#64A79D" cela ne m'affiche plus rien.

blueice : je me suis mal exprimée, je ne veux pas un rectangle qui s'adapte au texte lui meme comme un cadre, je veux juste que mon rectangle de base, où s'affichera tout mon contenu (boutons, menu, textes, images...) soit centré dans la largeur de la page mais puisse s'agrandir facilement vers le bas lorsque le contenu change ( je precisais cela tout a l'heure juste pour dire que sinon j'aurais mis un rectangle fixe en image d'arriere plan). Mais peut etre qu'il suffit de changer quelques parametres pour que ca correspond a ce que je veux donc je vais tester de suite.

Pour repondre à cedsun, le haut de mon rectangle est fixe, les cotés aussi (placés de telle maniere que mon rectangle soit centré dans sa largeur).
Je veux juste pouvoir garder toujours la meme largeur et n'agrandir le rectangle que vers le bas si besoin.

Merci a tous en tous cas, si vous avez d'autres idées elles sont les bienvenues!!
Je m'y remets...

Steph

Je vous envoie deux images avec des "contenus" pour mieux visualiser:
la premiere est celle du rectangle avec sa taille initiale :

la deuxieme le meme rectangle, meme contenu, mais avec du contenu en plus donc un rectangle plus grand (enfin étiré vers le bas) :

blueice : je veux que mon rectangle serve de fond mais aussi de délimitation du site. C'est ce que tu as fait, mais ce n'était qu'un cadre, qui s'élargit avec le texte, peut etre qu'il faut que je l'adapte à ce que je veux faire, par contre le rectangle n'était pas centré dans sa largeur.
Mais c'était l'idée et je continue à essayer avec ton code comme base.

Je ne veux pas forcement que ca se fasse automatiquement, je veux juste que si je rajoute du contenu et qu'il me faut plus de place, je puisse changer la taille de mon rectangle facilement.

Mon probleme est surtout de pouvoir centrer (dans la largeur) mon rectangle qui changera de hauteur selon mes besoins mais aussi tout le fond de mon site qui ne bougera pas. Soit avec la balise "img" on ne peut pas la centrer en largeur, on ne peut que parametrer l'emplacement d'une image en fonction du texte ou d'autres éléments. Soit en mettant le rectangle bleu sur fond noir en image de fond, on peut bien placer l'image mais dans ce cas je ne peux toujours au rectangle qu'en allant changer l'image créée sur photoshop par exemple.

Ce qui est dommage c'est que ce qu'à fait titfab est exactement ce que je veux : la base de mon site en forme de rectangle simple, centré et qui peut s'étirer vers le bas facilement selon le contenu que j'ai sur une page ou une autre. Mais la couleur que je veux mettre est précise et cela ne marche pas va savoir pourquoi.

Mais je continue a chercher mes erreurs...

**blueice** · 05/04/2007, 18h41

Je veux juste pouvoir garder toujours la meme largeur et n'agrandir le rectangle que vers le bas si besoin.

C'est ce que j'ai fais !

**steph6499** · 05/04/2007, 20h07

je pense quece que je demande n'est pas possible:
dans le cas où mon rectangle bleu sur fond noir est l'image de fond alors je ne peux qu'agrandir l'ensemble de l'image mais pas seulement le rectangle seul.

dans le cas où mon rectangle bleu est une image rectangulaire placée avec la balise img, sur un fond de couleur noir, je ne peux pas centrer le rectangle par rapport a la largeur de ma page, et apres avoir trouvé une solution, je m'apercois qu'à ce moment- là bien evidemment, je ne peux pas rajouter de contenu dans le rectangle puisque c'est une image!!

Peut etre que je cherche à faire une chose que je ne peux faire qu'avec un tableau ou des frames mais je n'ai pas assez de connaissances pour le savoir.

Alors je continue à chercher des solutions....

Encore une fois, merci pour vos suggestions.

Steph

**blueice** · 05/04/2007, 22h16

Bon écoute, le code que j'ai donné fait exactement ce que tu cherches à faire !
J'ai mis un cadre pour délimiter mais tu mets un background-color et c'est pareil !!

RHAAAAAAAAAA !

**steph6499** · 05/04/2007, 22h50

calme toi le truc c'est que je veux qu'au départ il y ait un rectangle d'une taille minimum meme s'il n'est pas rempli entierement. Je veux juste pouvoir l'agrandir facilement mais à la taille que je veux pas pile sous le texte ou sous l'image.
Avec ce code, le rectangle se fait automatiquement je n'ai pas le choix de la taille. C'est juste ce que je voulais dire. Et le code de titfab aussi dailleurs. Je veux juste pouvoir descendre la bordure du bas du rectangle facilement sans devoir repartir dans le logiciel où je l'ai fait pour changer sa taille. Je ne veux pas qu'il s'adapte au contenu, je veux pouvoir choisir moi meme.

Je me trompe peut etre dans ce cas dis le moi.

La j'ai testé avec des frames, beaucoup plus de codes je sais mais pour l'instant ca a l'air de donner ce que je veux.

**blueice** · 06/04/2007, 07h45

Arrête de suite avec les frames et utilise le propriété "min-height" mais il faut ruser avec cette tâche d'IE.
Il suffit de commencer par donner une hauteur fixe au bloc #tonbloc. Cette hauteur sera considée comme un min-height pour IE : elle s'allongera en fonction du contenu.
Par contre, les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu dépassera du bloc.
Il suffit alors de rajouter une instruction non comprise par IE (html>body #tonbloc) et qui rétablira les choses pour ces navigateurs.

**steph6499** · 06/04/2007, 18h42

Ne connaissant que les bases de html je ne comprend pas trop ce que tu viens de me dire mais je vais essayer de voir. Je n'ai pas encore utilisé les propriétés et les blocs donc je vais faire mes recherches et voir ca de suite!

**steph6499** · 09/04/2007, 15h05

bon je viens de tester le code de blueice. par contre je le place où exactement le code pour que l'image soit en arriere plan et une seul fois? dans l'une des balises div? a la place du texte...? Je suis un peu perdue la...

Centrer un contenu avec hauteur minimum

HTML

Discussions similaires

Partager

Partager