[Resolu][CSS] Centrage de bloc VERTICAL
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:
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:
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:
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> |
