28173 sujets

CSS et mise en forme, CSS3

Bonjourà tous,

Je fais un site en css en 3 colonnes + header + pied de page.

Ma troisième colonne est en float, mais le texte refuse de se centrer en haut sur cette colonne. AU contraire, elle reste sur la colonne 2, celle du centre.

Voici le code css:
div#column2 {
width:65%; 
float:left;
}

div#column2 p {
margin-top: 5%;
margin-left: 3%;
color:#ffffff;
font:.9em bold; 
text-align:justify;
}

div#column3 {
float:left;
margin-left:38%;
}

div#column3 p {
color:#333333;
font:.75em lighter;
margin-top: 5%;
text-align:justify;
}

div#column3 h5 {
color:#1c86d0;
font:.7em bold;
margin-top: 0;
text-align:left;
}


le code html:
<div id="column2"><p>Le texte</p></div>
<div id="column3">
<p>Derni&egrave;res actualit&eacute;s:<br /><br /></p>
<h5>UN OUTIL AU SERVICE DE LA COMPETITIVITE</h5><br /><p>La fa&ccedil;on de travailler &eacute;volue. De plus en plus de salari&eacute;(e)s font appel &aacute; de nombreuses formes de travail innovantes et inconnues il y a 20 ans.<a href="http://www.alseportage.com/actualites/actu3.html" title="Lire la suite de l'article"><br />Lire la suite...</a><br /><br /></p>
<h5>URGENCE INFO JURIDIQUE</h5><br /><p>Enfin un texte de loi qui l&egrave;ve l&acute;ambigu&igrave;t&eacute; d&eacute;lit de pr&ecirc;t de main d&acute;oeuvre sur l&acute;activit&eacute; du portage salarial.<a href="http://www.alseportage.com/actualites/actu2.html" title="Lire la suite de l'article"><br />Lire la suite...</a><br /><br /></p>
<h5>DROITS ASSEDICS ET PORTAGE SALARIAL</h5><br /><p>Le salari&eacute; priv&eacute; d&acute;emploi (allocataire) qui excerce une activit&eacute; occasionnelle ou r&eacute;duite dont l&acute;intensit&eacute; mensuelle n&acute;exc&egrave;de pas 136 heures per&ccedil;oit l&acute;allocation d&acute;aide au retour à l&acute;emploi.<br /><a href="http://www.alseportage.com/actualites/actu1.html" title="Lire la suite de l'article">Lire la suite...</a></p>
</div><!--fin column3 -->


Quelqu'un a une idée Smiley smile ça fait deux jours que je suis dessus Smiley langue et j'avoue que je suis limite au bord de la crise de nerfs Smiley biggol Smiley lol

En fait, j'aimerai que le texte apparaisse au même niveau que le texte de la colonne 2, c'est à dire margin-top:5%.

Merci à tous de votre réponse.... Smiley cligne
OH fait, pour faire le site, je me serts du livre de Charles Wyke-Smith: CSS2, guide du designer, édition campuspress.

Selon ses recommandations au chapitre 5 et 6 - pour ceux qui l'ont lu - j'ai ajouté quelques codes:

En css:
 // Pour centrer la mise en page sur la plupart des navigateurs
div#mainwrap {
width:774px;
margin-left:auto;
margin-right:auto;
text-align:left;
} 


J'ai également ajouté la méthode "clear" d'Alsett pour obliger le div à englober les éléments flottants.

Code css:
.clearfix:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*backslash hack hides from IE mac \*/

* html .clearfix {height:1%;}
.clearfix {display:block;}
/* end backslash hack*/ 


Euh....j'espère avoir été assez claire, sinon, je vous envoie tout le code Smiley confused

Merci à tous Smiley smile
Modifié par koss70 (07 Jul 2006 - 16:04)