positionnement a 3 colonnes.
Posté : 10 févr. 2009, 19:25
Bonjour à tous et merci pour vos reponses d'avance.
Je fais un site de news et j aimerais pouvoir diviser mon contenu en 3 colonnes. J'ai une image que j ai mis en background qui montre bien les 3 colonnes, j'arrive à bien définir les colonnes mais mon text deborde sur la colonne à sa droite.
http://liveplayaz.com/testcss/
je post le css ici
et le html
J'aimerais que les texts restent dans leur colonne respective et que les colonnes puissent s'étirer en hauteur si necessaire.
Merci encore pour vos reponses.
Je fais un site de news et j aimerais pouvoir diviser mon contenu en 3 colonnes. J'ai une image que j ai mis en background qui montre bien les 3 colonnes, j'arrive à bien définir les colonnes mais mon text deborde sur la colonne à sa droite.
http://liveplayaz.com/testcss/
je post le css ici
Code : Tout sélectionner
body{
font: 12px tahoma, arial, sans-serif;
background: url(../images/images_01.jpg) repeat-x;
text-align: left;
margin:0;
padding: 0;
top: auto
}
img {
border:none;
}
#container{
height:700px;
width: 990px;
margin: auto;
}
#header{
clear: both;
height:170px;
width:981px;
background:url(../images/images_03.jpg);
}
#menu li{
display:inline;
list-style-type: none;
vertical-align: bottom
}
#infoBar{
height:48px;
width:981px;
overflow:hidden;
background:url(../images/images_09.jpg);
}
#marq{
padding:1em .9em .5em .9em;
color:#5e6c8a;
text-align:left;
font-weight: bold;
}
#textMarq{
padding:1em .9em .5em .9em;
color:#5e6c8a;
text-align:left;
font-weight: bold;
}
#contenu{
min-height:756px;
text-align:left;
background:url(../images/images_07.jpg) no-repeat;
}
#colonne1{
float: left;
padding:1em 1em .5em 1em;
min-height:400px;
width:455px;
}
#cln1titre1{
background:url(../images/images_10.jpg) no-repeat;
height:44px;
width:364px;
}
#cln1corps1{
min-height:356px;
}
#cln1titre2{
background:url(../images/images_13.jpg) no-repeat;
height:45px;
width:364px;
}
#colonne2{
float:right;
min-height:400px;
width:260px;
padding:1em 0em .5em 1em;
}
#cln2titre1{
background:url(../images/images_12.jpg) no-repeat;
height:37px;
width:226px;
}
#cln2corps1{
min-height:356px;
}
#cln2titre2{
background:url(../images/images_16.jpg) no-repeat;
height:45px;
width:364px;
}
#colonne3{
overflow: hidden;
margin-right: 35px;
margin-top:0;
padding:1em 0em .5em 1em;
}
#cln3titre1{
background:url(../images/images_12.jpg) no-repeat;
height:37px;
width:226px;
}
#cln3corps1{
min-height:356px;
}
#cln3titre2{
background:url(../images/images_16.jpg) no-repeat;
height:34px;
width:225px;
}
#footer{
clear: both;
}Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Culture Gabon</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<div id="menus">
<ul id="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div><!--end of menu-->
</div><!--end of header-->
<div id="infoBar">
<div id="marq"><marquee scrolldelay="160" onmouseover="this.stop();" onmouseout="this.start();"> Gabon : 165 milliards de francs CFA pour l’aménagement du réseau routier national
</marquee></div>
</div><!--end of infoBar-->
<div id="contenu">
<div id="colonne1">
<div id="cln1titre1">
</div>
<div id="cln1corps1">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p>lire plus</p>
</div>
<div id="cln1pub">
</div>
<div id="cln1titre2">
</div>
<div id="cln1corps2">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p>lire plus</p>
</div>
</div><!--end of colonne1-->
<div id="colonne2">
<div id="cln2titre1">
</div>
<div id="cln2corps1">
<p>titre fkdjskfsdf</p>
<span>text kjflksdjflkdsajflasjdflkjdaflaslfadffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</span>
<p>lire plus</p>
</div>
<div id="cln2titre2">
</div>
<div id="cln2corps2">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadfdgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
<p>lire plus</p>
</div>
</div><!--end of colonne2-->
<div id="colonne3">
<div id="cln3titre1">
</div>
<div id="cln3corps1">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
<p>lire plus</p>
</div>
<div id="cln3titre2">
</div>
<div id="cln3corps2">
<p>titre fkdjskfsdf</p>
<p>text kjflksdjflkdsajflasjdflkjdaflaslfadgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
<p>lire plus</p>
</div>
</div><!--end of colonne3-->
</div><!--end of contenu-->
<div id="footer">
</div><!--end of footer-->
</div><!--end of container -->
</body>
</html>
Merci encore pour vos reponses.
