[DIV][CSS] Alignement vertical

Version imprimable

Soit le code
Code:

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 39 40 41 42 43 44 45 46 <html> <body> <div style="border: 4px solid black"> <div style="float: left"> <div> 1 - </div> <div> 2 - </div> <div> 3 - </div> <div> 4 - </div> </div> <div style="float: left"> <div> 5 - </div> <div> 6 - </div> <div> 7 - </div> <div> 8 - </div> </div> <div>9</div> <div style="clear:both"> </div> </div> </body> </html>
2 Questions: 1- Si on retire la div "<div style="clear:both"></div>" l'encadré de ma DIV générale se comporte de facon bizarre... pkoi?

2- Comment je pourrais faire pour alligner le 9 avec le 8 (alignement vertiical)

Je veux absolument utiliser des DIV alors pas de TABLE. (vertical-align ne fonctione pas avec des DIV non plus...)

Merci

01/11/2005, 00h25
francis m

pour aligner le 9 sur le 8 met les balises <div>9</div> en dessous de celle du 8, à l'intérieur de ton second div float left
01/11/2005, 14h10
pmartin8

Non en fait je veux que le 9 soit sur la 3e colonne mias qu'il soit alligné verticalement avec le 8!

voici ce que le code donne en ce moment....

1 5 9
2 6
3 7
4 8

Je cherche depuis longtemp pour cette connerie! :(
01/11/2005, 14h12
francis m

eh bien fais comme les colonnes précédentes : inclus ton div 9 dans un div float...
01/11/2005, 14h25
pmartin8

Malheureusement ca fonctionne pas... mon 9 reste toujours en haut!
01/11/2005, 14h54
francis m
ah oui pardon j'avais mal compris
fais comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div style="float: left"> <div>   </div> <div>   </div> <div>   </div> <div> 9 - </div> </div>
Bon la je pense avoir répondu à ta question
Mais à mon avis tu as beaucoup trop de div, n'oublie pas <p> sert également de div...
Et s'il est vrai qu'on déconseille d'utiliser des tables pour faire une mise en page, il est conseillé d'utiliser des tables pour faire des tableaux...
01/11/2005, 15h08
pmartin8

ouais ... j'avais trouvé cette solution aussi !

Mais c'est pas trop propre!

l'exemple que j'ai donné est simplifié pour que ca soit plus facile.. mais en fait cest un layout dun page web qui sera comme ca!

Est-ce que cest vraiment mal d'utiliser de Table?
01/11/2005, 15h30
francis m

eh bien cela dépend de quoi
moi aussi j'ai essayé de supprimer toutes mes tables
mais il y a des fois on ne peut pas
si tu veux afficher un tableau, utilises table...

c'est vrai que pour le design général de ton site, ce n'est pas recommandé.
et pour moi la solution que je t'ai proposée et que tu as trouvée n'est pas "pas propre".
01/11/2005, 15h35
pmartin8

ouais en fait je ne veux pas vriament représenter un tableuax alors je veux absolument utiliser des div (et mon patron aussi !)

Quelles solution propre je pourrais utiliser alors?
01/11/2005, 15h59
francis m

eh bien celle que je t'ai proposée et que tu as trouvée...
01/11/2005, 18h37
pmartin8

Je sais bien mais si jamais la taille d'un chiffre augmentait dans la colonne de gauche (Par exemple je veux mettre un gros "7") alors je perds mon allignement en bas... Mon 9 ne sera pas allignée en bas

cest vraiment embetant!
01/11/2005, 20h32
francis m

oui tu perds ton alignement dans ce cas

et pour l'éviter, à part un tableau, je n'ai pas d'idée géniale

tu peux éventuellement faire une structure inverse :

les divs contenant (en premier niveau) horizontaux (et non verticaux), ainsi tu seras toujours aligné ( 4,8,9)
et les divs de second niveau en colonnes avec une largeur définie par width en % par exemple. et cette largeur de colonne définie fera que tu seras aligné verticalement.
PS - je n'ai pas essayé
01/11/2005, 22h16
pmartin8

Ok Merci!

Mais meme en faisant de cette facon... Quand j'augmente la taille d'un chiffre alors ca décalle tous les autres ...

j'ai essayé ce que je t'ai proposé (le div de premier niveau en horizontal) et cela fonctionne très bien chez moi

Ci-dessous le code, essaie chez toi svp

Code:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html> 
<head>
	<style type="text/css">
		.cellule { width:20%; float:left; }
	</style>
</head>
<body> 
<div style="border: 4px solid black"> 
	<div> 
		<div class="cellule">   
			<p>1     - </p>
		</div> 
		<div class="cellule">    
			<p>2     - </p>
		</div> 
		<div class="cellule">    
			<h3>3     - </h3>
		</div> 
		<div class="cellule">    
			<p>4     - </p>
		</div>    
		<div style="clear:both"></div> 
	</div> 
	<div> 
		<div class="cellule">   
			<p>5     - </p>
		</div> 
		<div class="cellule">    
			<h2>6     - </h2>
		</div> 
		<div class="cellule">    
			<p>7     - </p>
		</div> 
		<div class="cellule">    
			<p>8     - </p>
		</div>    
		<div style="clear:both"></div> 
	</div> 
	<div> 
		<div class="cellule">   
			<p>&nbsp;</p>
		</div> 
		<div class="cellule">    
			<p>&nbsp;</p>
		</div> 
		<div class="cellule">    
			<p>&nbsp;</p>
		</div> 
		<div class="cellule">    
			<h1>9     - </h1>
		</div>    
		<div style="clear:both"></div> 
	</div> 
</div> 
 
</body> 
</html>

01/11/2005, 23h13
pmartin8

ok merci beaucoup j'essaies ca demain !
02/11/2005, 14h50
pmartin8

Ok ca semble marcher pas mal ton truc!!

Merci