DIV Affichage vertical

**Zineb08** · 23/10/2008, 20h52

Bonjour,

j'ai un petit probleme, c'est que je veux developper un formulaire diviser en deux partie verticalement en utilisant toujours des DIV: a droite une image et a gauche des champs de saisies ...

est ce que vous avez une idee kess mon div doit avoir comme caracteristique(s) pour avoir ce genre d affichage ...?

Merci bien!

**12monkeys** · 23/10/2008, 20h57

Bonsoir

Quand tu parles de "vertical" je pense plutôt à avoir les deux divs l'une sous l'autre, mais je crois comprendre plutôt que tu veux deux divs horizontales ?

Tu peut utiliser la propriété :

Code :

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

float:left;

Un peu de lecture : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**CCyrillus** · 28/10/2008, 01h53

bonsoir ,

La solution : float , ne permettra pas de centrer verticalement ces 2 div cote a cote , il faut se tourner vers la prpriété : display:inline-block; avec alternative ou correctifs pour FF2 et inf et IE 7 et inf (IE8 ?)
test a faire en local en recopiant ce code :

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML 4.01 strict</title>
<style type='text/css'>form {width:350px;margin:auto;border:3px double;display:table;}
form div {
display:table-cell;/* FF2 */
display:inline-block;/* technique naturelle */
width:49.5%;
vertical-align:middle;
text-align:center}
input {
display:block;
margin:.5em auto;
}
</style>
<!--[if IE]>
<style>
/* inline-block et layout activé pour IE , mode standard */
form div {display:inline;zoom:1;}
</style>
<![endif]-->
</head>
<body>
<form action ="" method="">
	<div id="gauche">
		<img src="http://decoupe-fr.net/forums/img/avatars/98.jpg" alt="un avatar" >
	</div>
	<div>
		<input type="text" value=""	/>
		<input type="text" value=""	/>
		<input type="text" value=""	/>
		<input type="text" value=""	/>
		<input type="text" value=""	/>
		<input type="text" value=""	/>
		<input type="text" value=""	/>
		<input type="text" value=""	/>
	</div>
</form>
</body>
</html>

Pour l'alignement vertical , quelques autres pistes ou exemples :
notamment une explication pour aligner 2 elements de type block : http://yidille.free.fr/plux/valign/i...vertical-align
et puis pour visualiser les differentes valeurs de vertical-align en css:
http://yidille.free.fr/plux/valign/i...et-ses-valeurs

L'alignement vertical en dehors d'une cellule de tableau ou de deux element de type inline adjacent devient confus : quelques régles permettent de reproduire ce comportement : display:table , inline-block , -moz-inline-stack , le positionnement en absolue avec marges automatiques ou négatives ... chaque techniques ne passe pas forcement partout et demande de mettre en place une serie de regles css et d'avoir l'architecture html adéquates .

Enfin , si l'approche de ces régles a defaut d'etre interessantes , vous barbes , le tableau utilisé avec parcimonie et la ou vos competences ou limites CSS sont atteintes , lui est tout a fait adapté a ce style de comportement et passe a coups sur .

Cordialement

<edit> Sinon , si aucunes de ces deux propositions te conviennent , un croquis ou ton code html peut-etre ?
</>

DIV Affichage vertical

CSS

Discussions similaires

Partager

Partager