Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

boite css

cortes

Par cortes
dans Programmation

 Partager

Messages recommandés

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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

 

<!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 !) :P

Lien vers le commentaire
Partager sur d’autres sites

alex.hitman Extrem Member

alex.hitman

Posté(e)
Posté(e) (modifié)

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é par alex.hitman
Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)
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.

Lien vers le commentaire
Partager sur d’autres sites
cortes Member

cortes

Posté(e)
  • Auteur
Posté(e)

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 :P

 

Merci

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...