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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Réalisation d'un site trois colonnes flottantes dans Div

orang

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 :

<body>
<div class="chapi" id="milieu"> 
<div class="chapi" id="colonne"> 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>
<div class="chapi" id="colonne"> 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>
<div class="chapi" id="colonne"> 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>
</div>
</body>

CSS :

Code :

Body {
background-image: url(../Images/Fond/nappe.jpg);
}
.chapi#milieu {
background-color: #FFFFFF;
width: 780px;
margin: 0;
padding: 0;
}
.chapi#contcentral {
background-color:#00CC33
}
.chapi#colonne {
float: left;
width: 25%;
margin: 1em 0
}

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

Publicité

flo850

moi je

Code :

<body>
<div class="chapi" id="milieu">&nbsp;
   <div class="chapi" id="colonne"> </div>
   <div class="chapi" id="colonne"></div>
   <div class="chapi" id="colonne"> </div>
<div STYLE="clear:left"></div>
</div>
</body>

orang

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 ?

flo850

moi je

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 )

orang

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.

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[CSS] Problème avec .class et id	Comment créer un site web avec BdD et comptes utilisateurs ?
Soulignement de <li> avec <ul> imbriqué (CSS)	Aide vba : Comparer deux colonnes A et B et ajouter à B ce qu'il manqu
Création de site	Aide réalisation site web
Test de site sous SAFARI	Mon nouveau site [avis, suggestion]
Importer données d'un autre site sur son site web
Plus de sujets relatifs à : [CSS] Réalisation d'un site trois colonnes flottantes dans Div

Page générée en 0.056 secondes