28173 sujets

CSS et mise en forme, CSS3

j'ai une div txt qui est censé positionné entre deux div mais je n'y arrive pas
c'est la div bleue sui est censé s'afficher a la droite de l'img

visible sur : http://hafid.chraibi.free.fr/css/

mon css:

[#green]

<style type="text/css">
 <!--
a:link{color:#fe7d19; text-decoration:none;}
a:visited{color:#999999; text-decoration:none;}
a:hover{color:#fe7d19; text-decoration:underline;}
a:active{color:#ffffff; text-decoration:none;}
a:focus{color:#fe7d19; text-decoration:underline;}
 
 body {
 	   margin-top: 0px ; 
       margin-right: 0px ; 
       margin-bottom: 0px ; 
       margin-left: 0px ;
	   margin: 0px; 
	   background-color:#000000;
	   }
 
 .banniere{
 	   align:center;
	   height:70px;
	   background-color:yellow;
 
 }
 
 .rightnav {
       width:120px;
       height:600px;
       background-color:#CCCCCC;
       float:right;
 }
 .leftnav {
       margin-top:38px;
       width:150px;
       height:600px;
       background-color:red;
       float:left;
	   
}
.news {
 	
 	   font-family:Arial, sans-serif;
       font-weight:bold;
       color:#FFFFFF;
	   background-color:#ff9900;
 }
 .titre {
 	
 	   font-family:Arial, sans-serif;
       font-weight:bold;
       color:#FF0000;
	   
 }
 .body {
       
       background-color:#000000;
       border-right:1px solid #000000;
	  
 }

#area1 { 

  float: left;
  margin : 10px;
  margin-left : 20px;
  width:400px;
  max-width:400px;
}
.img {
	   float:left;
	   padding:10;
	   width:300px;
       height:225px;
	   /*margin-top: 15px ;*/
	   background-color:#FF0000;
 }
.newsplus {
	   margin-top:30px;
	   width:300px;
       height:100px; 
	   background-color:yellow;
	   
	    
 }
 .prog {
 	   
 	   margin-top:30px;
	   width:300px;
       height:100px;
	   background-color:plum;	    
 }
 
#area2 {
  float: right;
  width:310px;
  max-width:310px;
  height:500px;
  padding:0px;
  margin:0px;
  

}

 .txt {    
    overflow:auto;
	float:right;
	width:310px;
	max-width:310px;
	font-family:Arial, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	background-color:blue;	
 }


 
mon html:




		<div class="banniere"></div>
		<div class="leftnav">&nbsp;</div>
 		<div class="rightnav"></div>

 <div class="body"> &nbsp;
		
		 <div class="news">&nbsp;&nbsp;news</div>
		 <div class="titre">Titre1</div>
		
		 <div id="area1">
		 	<div class="img"><img src="1.jpg"></div>
			<div class="prog">http://www.lipsum.com</div>
 			  <p class="newsplus">C'est la prévision de l'institut GFK, qui rappelle qu'en 2005 les ventes de terminaux mobiles avaient été de 18 millions d'unités en France. «En 2006, les mobiles 3G passent à la vitesse supérieure», estime GFK. Selon ses analystes, les mobiles pouvant se connecter à l'internet en haut débit (Edge/3G) devraient représenter cette année au moins 60% des ventes de téléphones.
		    </p>
		 </div>
		
		 <div id="area2">			  
		 <p class="txt">"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.""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.""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."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>



thanks d'avance
Modifié par ewans17 (26 May 2006 - 14:42)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif