28172 sujets

CSS et mise en forme, CSS3

Bonjour,
sur mon site je gère les news avec le script Cutenews, et j'aimerais le personalisé davantage en créant 2 colonnes, l'une contenant l'image et l'autre contenant le texte, je ne veux pas que le texte continue sous l'image, ça j'ai réussi mais par contre le problème c'est que les différentes news se suivent et ne vont pas en dessous de l'autre comme vous pouvez le voir ici http://www.jessicabiel.for-fan.net/home.php?start_from=10&ucat=&archive=&subaction=&id=&
(tout en bas de la page)
j'ai essayé différentes choses avec float et clear mais j'arrive pas à faire que les news soit les unes en dessous des autres.

voici mon code CSS

body { 
background-image: url(images/bg21.png) repeat center center;
font-family: Tahoma;
font-size: 9pt;
color: #000000;
}


a:link, a:visited {
color: #D38623;
text-decoration: none;
font-weight: none;
}
a:hover, a:active {
color: #000000;
text-decoration: underlign;
font-weight: none;
}



h1 {
color : #FFD700;
font-size : 14px;
font-family : Georgia, Arial, Tahoma, Verdana;
font-weight : BOLD;
text-align : CENTER;
background-image: url(images/01.png);
padding: 2px;
margin-bottom: 0px; 
line-height: 20px; 
text-shadow: 1 1 1 rgb(255,255,255) ;
}


h2 {
font-size: 6pt;
text-transform: uppercase;
background-color: #edb82c;
padding: 0px;
padding-left: 2px;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 15px;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
text-align: left;
}

h3 {
font-size: 7pt;
text-transform: none;
font-weight: normal;
background-color:#FFFFFF;
line-height: 15px;
padding: 0px;
padding-left: 2px;
padding-bottom: 5px;
color: #16098d;
letter-spacing: 1px;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
text-align: left;
}

h4 {
font-size: 7pt;
text-transform: none;
font-weight: normal;
background-color: #dce6eb;
padding-top: 2px;
padding-left: 2px;
padding-bottom: 3px;
color: #13649b;
letter-spacing: 1px;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
text-align: left;
}

h5 {
font-size: 5pt;
text-transform: none;
font-weight: normal;
background-color: #dce6eb;
padding-left: 2px;
padding-bottom: 0px;
padding-top: 2px;
color: #FFD700;
letter-spacing: 1px;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
text-align: left;
}

h6 {
font-size: 6pt;
text-transform: uppercase;
background-color: #baced9;
padding: 0px;
padding-left: 2px;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 15px;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
text-align: left;
}

em{
color: #0000ff;
font-style: normal;
text-transform: none;
font-weight: normal;
font-size: 7pt;
}
.pics{
background-color: black;
padding: 0px; 
color: #13649b;
letter-spacing: 1px;
margin-top: 0px;
padding-top: 15px;
width: 50px;
text-align: center;
float: left;
clear: left;
}

.news{
font-size: 7pt;
text-transform: none;
font-weight: normal;
background-color: red;
padding-top: 2px;
padding-bottom: 3px;
color: #13649b;
width: 490px;
letter-spacing: 1px;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 10px;
text-align: justify;
float: left;
clear: right;
}


Le code dans cutenews
<div class="pics>images</div></div class="news">News....</div>


au final je voudrais que ça donne comme sur ce site
http://dh-central.net/

Pouvez vous m'aider?
Merci d'avance
Modifié par Hailey (08 Feb 2009 - 23:20)