[DIV][CSS] Alignement vertical

**pmartin8** · 31/10/2005, 22h29

Soit le 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
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

**francis m** · 01/11/2005, 00h25

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

**pmartin8** · 01/11/2005, 14h10

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!

**francis m** · 01/11/2005, 14h12

eh bien fais comme les colonnes précédentes : inclus ton div 9 dans un div float...

**pmartin8** · 01/11/2005, 14h25

Malheureusement ca fonctionne pas... mon 9 reste toujours en haut!

**francis m** · 01/11/2005, 14h54

ah oui pardon j'avais mal compris
fais comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="float: left"> 
   <div> 
   &nbsp; 
   </div> 
   <div> 
   &nbsp; 
   </div> 
   <div> 
   &nbsp; 
   </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...

**pmartin8** · 01/11/2005, 15h08

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?

**francis m** · 01/11/2005, 15h30

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".

**pmartin8** · 01/11/2005, 15h35

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?

**francis m** · 01/11/2005, 15h59

eh bien celle que je t'ai proposée et que tu as trouvée...

**pmartin8** · 01/11/2005, 18h37

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!

**francis m** · 01/11/2005, 20h32

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é

**pmartin8** · 01/11/2005, 22h16

Ok Merci!

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

**francis m** · 01/11/2005, 23h10

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 :

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

**pmartin8** · 01/11/2005, 23h13

ok merci beaucoup j'essaies ca demain !

**pmartin8** · 02/11/2005, 14h50

Ok ca semble marcher pas mal ton truc!!

Merci

[DIV][CSS] Alignement vertical

Positionnement en CSS

Discussions similaires

Partager

Partager