positionnement a 3 colonnes.

par **Invité** » 11 févr. 2009, 04:03

un prototype en flash....la vrai version est pas encore publier p-e dans un mois...
Merci encore

par **Stef** » 10 févr. 2009, 23:37

cool!

sinon sympa l'idée pour le design de ton testcss, ça devrait rendre pas mal... et au fait c'est quoi liveplayaz, je vois pas trop le fonctionnement ni le but?

par **damaskinos** » 10 févr. 2009, 22:50

merci stef j y ai effectivement trouve mon bonheur.

par **Stef** » 10 févr. 2009, 20:28

Bonsoir,

jette donc un oeil là-dessus, tu devrais trouver ce que tu cherches:

http://www.visual-blast.com/fr/css/web_ ... templates/

par **damaskinos** » 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

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;
}

et le html

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>

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.

positionnement a 3 colonnes.

Répondre

Étendre la vue Revue du sujet : positionnement a 3 colonnes.

positionnement a 3 colonnes.