[CSS] Réalisation d'un site trois colonnes flottantes dans Div

Réalisation d'un site trois colonnes flottantes dans Div [CSS] - HTML/CSS - Programmation

Marsh Posté le 27-11-2010 à 14:20:56    

Bonjour,
 
Je cherche à réaliser une page dont la structure serait identique à celle là : http://openweb.eu.org/IMG/article52/annexe3.html
 
Pour ce faire, j'ai repris le code :
 
HTML

Code :
  1. <body>
  2. <div class="chapi" id="milieu">&nbsp;
  3.    <div class="chapi" id="colonne">&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eleifend dui eu sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent   dictum tortor quis nulla. Donec magna orci, porttitor sed, eleifend vitae, vestibulum facilisis, mauris. Morbi eu augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi quis erat. Integer pretium augue id diam. Donec euismod lobortis diam. Nam eros quam, vehicula id, luctus a, tempor quis, dolor. Nam purus eros, congue id, vehicula quis, gravida at, ligula. Suspendisse potenti. Etiam velit. Cras condimentum mi ac magna. Nunc dui quam, dignissim aliquam, vehicula nec, ultricies non, tortor. Sed vitae justo. Suspendisse dignissim euismod est. Aliquam </div>
  4.    <div class="chapi" id="colonne">&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eleifend dui eu sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent dictum tortor quis nulla. Donec magna orci, porttitor sed, eleifend vitae, vestibulum facilisis, mauris. Morbi eu augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi quis erat. Integer pretium augue id diam. Donec euismod lobortis diam. Nam eros quam, vehicula id, luctus a, tempor quis, dolor. Nam purus eros, congue id, vehicula quis, gravida at, ligula. Suspendisse potenti. Etiam velit. Cras condimentum mi ac magna. Nunc dui quam, dignissim aliquam, vehicula nec, ultricies non, tortor. Sed vitae justo. Suspendisse dignissim euismod est. Aliquam </div>
  5. <div class="chapi" id="colonne">&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eleifend dui eu sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent      dictum tortor quis nulla. Donec magna orci, porttitor sed, eleifend vitae, vestibulum facilisis, mauris. Morbi eu augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi quis erat. Integer pretium augue id diam. Donec euismod lobortis diam. Nam eros quam, vehicula id, luctus a, tempor quis, dolor. Nam purus eros, congue id, vehicula quis, gravida at, ligula. Suspendisse potenti. Etiam velit. Cras condimentum mi ac magna. Nunc dui quam, dignissim aliquam, vehicula nec, ultricies non, tortor. Sed vitae justo. Suspendisse dignissim euismod est. Aliquam </div>
  6. </div>
  7. </body>


 
CSS :

Code :
  1. Body {
  2. background-image: url(../Images/Fond/nappe.jpg);
  3. }
  4. .chapi#milieu {
  5. background-color: #FFFFFF;
  6. width: 780px;
  7. margin: 0;
  8. padding: 0;
  9. }
  10. .chapi#contcentral {
  11. background-color:#00CC33
  12. }
  13. .chapi#colonne {
  14. float: left;
  15. width: 25%;
  16. margin: 1em 0
  17. }


 
Mais cela ne fonctionne pas : les 3 colonnes n'entrent pas dans la div class="chapi" id="milieu"> et semblent les unes sur les autres
Il existerait un moyen de corriger cela proprement ?
Par ailleurs, est-il possible de centrer ces div au sein de la Div ?
 
par avance, merci :)


Message édité par orang le 27-11-2010 à 14:35:54
Reply

Marsh Posté le 27-11-2010 à 14:20:56   

Reply

Marsh Posté le 27-11-2010 à 14:34:35    

Code :
  1. <body> 
  2. <div class="chapi" id="milieu">&nbsp; 
  3.    <div class="chapi" id="colonne"> </div> 
  4.    <div class="chapi" id="colonne"></div> 
  5.    <div class="chapi" id="colonne"> </div> 
  6. <div STYLE="clear:left"></div> 
  7. </div> 
  8. </body>

Reply

Marsh Posté le 27-11-2010 à 14:42:26    

Excellent merci pour cette réponse instantanée !
Du coup, je me permets une deuxième question : est-il possible de centrer ces div au sein de la/du div ?

Reply

Marsh Posté le 27-11-2010 à 14:50:18    

profites en pour regarder ce qui s'appelle les contexte de formattage
 
ça te sera utile par la suite  
 
pour centrer, tu peux mettre une marge a celui de gauche ( vu que tu connais les largeurs ). J'ia un  doute sur le comportement des float si tu mets un text-align:center sur #milieu ( mais bon tu peux testser, ça ne te coute rien )

Reply

Marsh Posté le 27-11-2010 à 14:59:15    

Merci pour le conseil, je crois qu'effectivement je ne m'y prends pas par le bon bout.
Autrement, pour le centrage, j'ai un peu joué sur les marges des colonnes, ce n'est pas top, mais ce n'est pas non plus trop flagrant.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed