[HTML/CSS] Alignement vertical ? sur le forum Création de sites web - 12-03-2012 12:03:21

Liste des sujets

[HTML/CSS] Alignement vertical ?

le-chocolat

Niveau 9

12 mars 2012 à 12:03:21

Salut je bloque sur le plus simple dans mon site web..
le placement de mes <div>

alors j'ai 3 div comme ceci :

<body>

</body>

le but est de les centrer en hauteur tout le temps,
de mettre le div1 a gauche et les div2 et 3 a droite..

comme une image est toujours plus parlant que du texte
http://s4.noelshack.com/uploads/images/6399710294967_div.jpg

j'ai tenté plusieurs chose sans réel succès, donc je me tourne vers vous

vava740

Niveau 10

12 mars 2012 à 12:48:37

Salut

J'espères déjà que tu as pas mis de <div 1> dans ton code et que c'étai tque pour l'explication, hein ?

Sinon y'a pas moyen d'aligner verticalement un élément en CSS... du moins pas sur des blocs.

Tu peux par contre faire un système en JavaScript, qui modifie le top de ton élément en position: absolute ou fixed, en fonction de la hauteur de la fenêtre, et redéfinir cet attribut au chargement de la page et au redimentionement de la fenêtre.

Petit exemple : http://wall.deblan.fr/x213f/javascript/

Dans ce cas là tu passes en paramètre à la fonction l'élément que tu veux centrer, en récupérant ton div avec son id par exemple.

le-chocolat

Niveau 9

12 mars 2012 à 17:02:34

Oui je me suis finalement tourné vers une solution javascript,
et évidement les div 1 2 3 c’était pour rester clair dans mon exemple

Onigawara

Niveau 3

12 mars 2012 à 19:11:05

Non ! Pas de javascript pour si peu. Certain le désactive dans leur navigateur.

Il faut donner un aspect de tableau grâce au CSS et c'est rangé.

html :

<div id="bloc">
<div id="table">
<div id="contenu">
Ton blabla.
</div>
</div>
</div>

le CSS :

{margin: 0; padding: 0;}

html,body{height: 100%; width: 100%;}
body {text-align: center; min-height: 468px; min-width: 552px;}

bloc {height: 100%; width: 100%; display: table; vertical-align: middle;}

table {position: relative; vertical-align: middle; display: table-cell; height: 468px;}

contenu {width: 552px; height: 468px; text-align: center;

margin-left: auto; margin-right: auto;}

Normalement ça fonctionne

vava740

Niveau 10

12 mars 2012 à 19:28:33

@Onigawara : si je copie direct ton code, sans rien toucher, enfin juste en mettant le css dans une balise <style>, ça marche pas, enfin c'est décalé mais pas complètement centré...

Parce que une solution sans JavaScript ça m'intéresse aussi, mais j'ai pas tout compris là

Onigawara

Niveau 3

12 mars 2012 à 19:44:21

Pourtant ça fonctionne chez moi : http://img15.hostingpics.net/pics/118708centrverticalement.jpg

Essaye de mettre

contenu {width: 552px; height: 468px; text-align: center;

margin-left: auto; margin-right: auto; border: 1px solid #03C;}

(le border pour voir la div centrée verticalement) et tu auras le même résultat que sur le screen.

vava740

Niveau 10

12 mars 2012 à 21:37:33

Ah oui, en effet !

Magnifique !

Onigawara

Niveau 3

12 mars 2012 à 21:49:48

Quelques trucs à savoir ;) J'évite le JS au maximum.

le-chocolat

Niveau 9

13 mars 2012 à 14:07:14

pas mal comme solution aussi et sans JS,
je garde sous le coude merci

Aide à l'achat Mac
Création de Jeux
Linux
Création de sites web
Programmation
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News JVTech

27 886 spectateurs

Un "congélateur géant" sur la Lune : cette découverte scientifique majeure prouve que la l'astre est capable de préserver la vie

Longtemps perçue comme un désert stérile battu par les radiations, la Lune dissimule en fait des oasis. Alors que la NASA prépare le retour de l'humain sur le sol lunaire, des chercheurs viennent de mettre en lumière un mécanisme stupéfiant : grâce au relief chaotique des pôles, la vie terrestre pourrait non seulement résister à l'environnement spatial, mais aussi s'y figer pour l'éternité.

Toutes les news jvtech