Discussion :

[skawll]

Bonsoir,

Je souhaite faire flotter deux cadres à gauche l'un en dessous de l'autre. A droite dans un cadre séparé, un texte. Tout cela, sur un fond gris correspondant à l'id page.
Seulement, le display: block ne fonctionne pas, je vous mets le code pour voir.

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
<div id="page">
 
		  <div class="element_menu1">
		    <div class="titremenu">...</div>
			  <p>Date : ...</p>
			  <p>Thème : ...</p>
			</div>
 
			<div class="element_menu2">
			  <ul>
			    <div class="titremenu">Liens utiles</div>
				<li><a href="#" title="#" target="_blank">...</a></li>
				<li><a href="#" title="#">...</a></li>
				<li><a href="#" title="#">...</a></li>
				<li><a href="#" title="#">...</a></li>
				<li><a href="#" title="#">...</a></li>
			  </ul>
			</div>
 
 
 
		  <div class="corps">
			<h1>Lorem Ipsum is simply dummy text of the printing</h1>
			<p>
				"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
			</p>
		  </div>
 
</div>

Le CSS

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
.element_menu1{
background-color:#FFFFFF;
border:5px solid #0B75AF;
margin-bottom:20px;
margin-top:15px;
float: left;
width:150px;
}
 
.element_menu2{
background-color:#FFFFFF;
border:5px solid #0B75AF;
margin-bottom:20px;
margin-top:175px;
float: left;
width:150px;
display: block
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.corps
{
   margin-left: 160px; 
   margin-bottom: 20px; 
   padding: 5px; 
   background-color: #FFFFFF; 
   border: 2px solid #0B75AF; 
  margin-top:165px;
  -moz-border-radius:10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}

Code :

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

1
2
3
4
#page{
background : none repeat scroll 0 0 #8b856e;
width:850px;
}

[vermine]

Bonsoir,

Après un bref coup d'oeil, je remarque qu'il manque le point virgule. Serait-ce ça ?

Code :

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

display: block;

[skawll]

non j'ai réglé le problème en partie en englobant sous une div menu en float left.
Seulement le fond gris est absent, et la div corps est sous le cadre liens utiles légèrement sur la droite!

[Bisûnûrs]

Le display:block est inutile dans ton cas. Tu le confère à un élément div qui a par défaut ce mode de rendu. Qui plus est, avec un float:left, ça lui recréé un nouveau contexte de formatage block.

Tu dois, pour résoudre ton problème, englober tes deux div "elements_menu" dans un troisième, disons "menu". Et c'est ce div là qu'il faudra mettre en float:left.

je remarque qu'il manque le point virgule.

Le point-virgule sert de séparateur entre chaque couple propriété/valeur. Il est optionnel pour la dernière instruction.