Discussion :

[elraton]

Salut,
Tit probleme CSS (je regrette les tableaux defois qd meme)
Alors c'est bien simple ....

Mon site est composé comme ca :

<div class="top"> ... </div>
<div class="main"> ... </div>
<div class="bottom"> ... </div>

Juska la tout est bon
et donc dans le middle: j'ai fait 2 div, 1 left et 1 middle (a droite donc)

Et J'aimerais que le <div class="screen"></div>,
Se place au milieu (en verticale) du <div class="middle"></div>.
Sachant que ce dernier doit avoir comme taille minimum celle de <div class="left"></div>....qui contient une liste <ul></ul> de taille tres variables !!!

Et ca je sais pas comment faire ????

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
 
<div class="main">
              <div class="left">
			<ul class="menu">
                             <li>...</li>
                             <li>...</li>
                             <li>...</li>
                             <li>...</li>
                             <li>...</li>
			</ul>
		</div>
		<!-- Fin Div Left -->
 
		<!-- Debut div middle -->
		<div class="middle">
			<div class="screen">
			<h2>News</h2>
				<div class="news">
					<h5>19.08.05</h5>
					 <p>Soon, you will find on this page our lastest news. Please, stay in touch by subscribing to our newsletter!</p>
					<h5>04.08.05</h5>
					<p>blabla</p>
.............
 
				</div>
				<!-- Fin de Newz -->
			</div>
			<!--fin de screen -->
		</div>
		<!--fin de middle -->
</div>
<!--fin de main -->

et mon CSS donne :

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
58
59
60
61
 
.main {
clear:both;
_text-align:center;
width:100%;
}
 
 
 
/** Debut Menu Gauche **/
.main .left {
width:33%;
position:relative; 
float:left;
margin-bottom:30px;
border-right:1px solid #FFFFFF;
margin:30px 0px 30px 0px;
_margin-left:-30px;
}
 
.main .left ul {
_text-align:left;
padding:0px 0px 0px 0px;
width:250px; 
list-style-type:none;
display:block;
}
 
.main .left ..... etc {
 Pas important pour le probleme
 
}
 
 
/** Fin Menu Gauche **/
/*-----------------**/
 
 
/** Debut Milieu **/
.main .middle {
padding-top:30px;
padding-bottom:50px;
width:66%;
height:100%;
opacity:0.9;
_filter:alpha(opacity=90);
position:relative;
float:left;
}
 
 
.main .middle .screen {
_text-align:left;
width:80%; 
 
elevation:below;
margin:auto;
border-width:2px;
border-style:solid; 
padding:10px 10px 60px 10px;
}

Si jamais vous avez pas tout compris aller sur http://www.profildesign-system.com/v2.a/

et en gros il y a les 2 div avec background vert et rouge, donc je veux que le rouge ait comme taille minimum celle du vert (c.a.d quelle peut etre plus grande mais pas plus petite) et que le <div class="screen"></div> (Background blanc) soit au centre du vert.


PS: Pour ceux qui se souvienne des tableaux ca se traduit par

Code :

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

1
2
3
4
5
6
7
 
<table class="main" width="100%">
   <tr>
      <td valign="top" width="33%" class="left"> ... </td>
      <td valign="center" width="66%" class"middle"> ....</td>
   </tr>
</table>

[Sub0]

Qu'est-ce qui t'empêche d'utiliser un tableau ?

Sinon, la solution est d'utiliser les propriétés de display (table, cell, row) pour reproduire la mise en page d'un tableau.

à+


Lien tout en bas à gauche de cette fenêtre

[elraton]

Ouais je me suis mis a faire un tableaux et ca marche nikel ... C'est juste que a force de lire des articles sur le fait d'utiliser le moins de tableau possible .... Je me met en tetes de pas en utiliser du tout ...

Merci de m'avoir remis dans le droit chemin !!!!

[Sub0]

Oué, pas facile de remplacer les tableaux dans les cas comme celui-ci...
Et puis l'intérêt de cesser d'utiliser les tableaux n'est pas évident je trouve. Justement, il est dit qu'il faut arrêter d'utiliser les tableaux pour faire la mise en page... L'utilisation des tableaux doit se limiter à afficher des données... Mais les solutions de remplacement ne sont pas vraiment efficaces, surtout si on mise tout sur CSS (le visiteur peut avoir désactiver CSS sur son navigateur). Pour ma part, je continuerai à utiliser les tableaux mais uniquement lorsqu'une véritable alternative n'est pas envisageable, à+


Lien tout en bas à gauche de cette fenêtre