boite css

Dylav · le 10 juillet 2006

Pour la boîte centrée, je te propose cette solution extrêmement simple (elle n'est pas de moi, mais les commentaires, si ! )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Exemple boîte centrée par simple CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
/*
Boîte centrée dans la page <div id="conteneur">
L'astuce est de placer dans un premier temps ce bloc
à top 50% et left 50%, ce qui placera son coin supérieur gauche
au milieu de la page. Ensuite, nous définirons des marges négatives
de valeurs exactement moitiés des largeur et hauteur du bloc,
ce qui le positionnera au milieu de page.
*/
#conteneur {position:absolute;
		left:50%;top:50%;
		width:720px;height:540px;
		margin-left:-360px;margin-top:-270px;
		border:1px solid #000000}
</style>
</head><body>
<div id="conteneur">Boîte centrée</div>
</body></html>

Tu noteras que c'est une solution pur CSS, ce qui est élégant (je peux le dire, ce n'est pas de moi). Il doit y avoir un article sur les marges négatives sur http://www.pompage.net

L'exemple propose une boîte de dimensions fixes. Je me demande s'il ne serait pas intéressant de tenter, en plus, des dimensions variables, exprimées en pourcentage des largeur et hauteur de l'écran... à tester !

Tu noteras qu'il s'agit d'une page certifiée en XHTML Strict (ça, c'est propre !)

alex.hitman · le 14 juillet 2006

Salut à tous.

Je confirme ce qu'a dit Kewlcat, il est impossible de faire défiler du texte sans utiliser le Javascript (d'après mes connaissances en tout cas, mais je pense en être certain).

Ensuite, pour la boite centrée, tu peux essayer ceci :

Dans ta page (x)HTML :

<div id="boite">Le contenu de ma jolie boîte.</div>

Et, dans ta partie CSS :

#boite {
 position:absolute;
 width:30%;
 margin-left:35%;
 height:10%;
 margin-top:45%;
}

Explications :

La taille du bloc est de 30% de la largeur de la page. Il reste donc 100-30 = 70% à répartir équitablement de chaque côté. Il faut donc appliquer une marge à gauche de 70/2=35% afin d'avoir la même marge à droite. De même pour la hauteur.

Et là, notre petite boîte est centrée.

Par contre, si l'on veut centrer la boîte en largeur et hauteur avec des tailles en pixel, je ne suis pas sur qu'il soit possible de le faire rien qu'en CSS. Pour cela, un peu de javascript :

largeur = 250; //largeur en px de la boîte
hauteur = 150; //hauteur en px de la boîte
gauche = (screen.width-largeur)/2; //marge à gauche
haut = (screen.height-hauteur)/2; //marge en haut
//on applique les marges
document.getElementById('boite').style.left=gauche;
document.getElementById('boite').style.top=haut;

Et donc, le code complet de la solution fonctionnelle en javascript :

<div id="boite" style="position:absolute;background-color:#ff0000;">Ma boiboite.</div>
<script type="text/javascript">
largeur = 250; //largeur en px de la boîte
hauteur = 150; //hauteur en px de la boîte
gauche = (screen.width-largeur)/2; //marge à gauche
haut = (screen.height-hauteur)/2; //marge en haut
//on applique les valeurs
document.getElementById('boite').style.width=largeur;
document.getElementById('boite').style.height=hauteur;
document.getElementById('boite').style.left=gauche;
document.getElementById('boite').style.top=haut;
</script>

Ne pas oublier la position absolue.

Modifié le 14 juillet 2006 par alex.hitman

KewlCat · le 15 juillet 2006

alex.hitman, je crois que pour centrer (dans la fenêtre du navigateur) en JavaScript il faut se baser sur les propriétés innerWidth et innerHeight de window plutôt que sur les width et height de window.screen.

alex.hitman · le 15 juillet 2006

En fait il y a même mieux : window.screen.availHeight

qui ne compte pas la barre des tâches pour la hauteur;

Après, il me semble que c'est équivalent pour le reste.

Modifié le 15 juillet 2006 par alex.hitman

KewlCat · le 16 juillet 2006

il me semble que c'est équivalent pour le reste.

Euh....

Quand tu spécifies des coordonnées absolues à un élément d'une page Web, cet élément va prendre la page Web (le document) comme référentiel. Connaître l'espace disponible sur la totalité de l'écran ne va servir à rien puisque c'est par rapport à la fenêtre du navigateur que l'élément va se centrer.

alex.hitman · le 16 juillet 2006

C'est vrai, je n'avais pas réfléchi à ça !

cortes · le 20 juillet 2006

Re bonjour

je voudrai m'escuser tout d'abord pour ce long silence, mais mon père est décédé .. ce qui explique cela..

Sinon je tenais à remercier pour leur collaboration , dylav, KewlCat, alex.hitman..

je me suis acheté CSS2 Pratique du design web ...afin d'essayer de comprendre ce que je peux faire.

Merci à vous tous

PS : le script que tu m'as donné me fait une boite, en rouge, mal centrée... pas tout saisi pour bien configurer la page

Merci

alex.hitman · le 20 juillet 2006

ouch, je suis vraiment désolé pour ce qui t'arrive. Remet-toi bien de cette douloureuse épreuve.

De rien en tous cas.

Connexion

Pas encore inscrit ?

boite css

Messages recommandés

Dylav

alex.hitman

KewlCat

alex.hitman

KewlCat

alex.hitman

cortes

alex.hitman

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer