28172 sujets

CSS et mise en forme, CSS3

Div carré - Comment centrer ?

Bonjour

j'essaye de faire une page "dynamique" dont la taille s'adapte a l'ecran avec une zone de texte au centre carrée.

Je reussi a faire ce que je veux a condition que ce carré soit sur la gauche de l'ecran, grace une image de 1 pixel que j'agrandi:

<body>
<div id="wrapper">
<div class="box1" style="height: 100%;">
    <img alt="" src="gris.jpg" border="0" height="100%"></div>
    <p> bla bla bla</P>
</div>
</body>


CSS:

html,body,wrapper{height:100%}


j'obtient bien un carré de la taille de la fenêtre de mon navigateur.

La question est la suivante:
J'essaye de centrer le div #wrapper?
la propriété margin: 0 auto; ne fonctionne que si je definis une taille...

or je veux une largeur qui soit égale a la hauteur. Comment faire ?
y a-t-il une solution en CSS?

Merci
Administrateur
Bonjour,

Je ne suis pas sûr d'avoir bien compris ce que tu veux vraiment obtenir au final :
Est-ce un bloc #wrapper
- qui occupe toute la hauteur ?
- qui est carré ?
- et qui est centré horizontalement ?

Si oui, alors quelques remarques :
- quel est le rôle de l'image dans ton exemple ?
- pour l'instant, ton contenu occupe plus que la hauteur de l'écran puisqu'il fait une hauteur de 100% + le texte blablabla
- pour l'instant #wrapper n'est pas "carré", il occupe toute la largeur de son parent body (tu peux le vérifier en lui donnant une couleur de fond)
- puisqu'il occupe toute la largeur de son parent, il est logique qu'il n'est pas possible de le centrer
- pour le centrer, il faut soif le redimensionner, soit lui supprimer sa caractéristique "block"
- ton code CSS est faux (il faut écrire #wrapper et non wrapper)
- ton code HTML est risqué : il n'a pas de Doctype
Modifié par Raphael (17 Feb 2011 - 11:15)
En effet, il y a une difference entre les valeurs de height et width et de ce que l'on voit a l'ecran...

Je souhaite definir une zone carrée dans laquelle je vais ecrire.

J'utilise l'image pour forcer l’extension de la du div box1
en effet j'ai fais des erreurs en recopiant les extraits html et CSS, ma page étant complète, avec le Doctype.

Le wrapper n'est en effet pas carré. j'ai modifié mon code pour ne travailler que dans des div enfants de box1

je constate que mon image de fond (gris) s'étire bien et donne un aspect visuel carré mais la taille du div box1 reste de 1px de largeur sur 100% de hauteur !
comment puis-je faire pour que la largeur du div prenne la même valeur que la hauteur?


Comment redimensionner wrapper pour qu'il prenne les valeurs de box1?
Si je supprime la caractéristique block, que puis je faire ensuite ou vers quoi aller?

Merci
Administrateur
a écrit :
En effet, il y a une difference entre les valeurs de height et width et de ce que l'on voit a l'ecran...

Le résultat à l'écran est correct et correspond bien aux éléments et aux données que tu indiques au navigateur.

a écrit :
Je souhaite definir une zone carrée dans laquelle je vais ecrire.

Dans ce cas, il faut bien définir une valeur explicite de hauteur et de largeur (en pixel, ou pourcentages par exemple, mais il faut les indiquer).
Quelles valeurs comptes-tu donner à cette zone ?

a écrit :
je constate que mon image de fond (gris) s'étire bien et donne un aspect visuel carré

Non. Ou alors que dans certains navigateurs et en tout cas pas chez moi. Ce n'est pas le rendu visuel attendu.

a écrit :
comment puis-je faire pour que la largeur du div prenne la même valeur que la hauteur?

Deux possibilités :
1- indiquer clairement une largeur et une hauteur au div en question
2- passer le div en inline ou inline-block (il n'occupera alors que la place de son contenu), et disposer d'un contenu "carré".

a écrit :
Comment redimensionner wrapper pour qu'il prenne les valeurs de box1?

#wrapper contient #box1 + un paragraphe, il n'est logiquement pas possible qu'il n'occupe que la taille de #box1... sauf si tu sors le paragraphe du flux (en position absolute par exemple).

a écrit :
Si je supprime la caractéristique block, que puis je faire ensuite ou vers quoi aller?

Display inline ou inline-block, mais cela aura d'autres incidences.
Modifié par Raphael (17 Feb 2011 - 11:50)
Sujet clos
Aller à