Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» Problème d'alignement surpenant
Auteur
daedale
# 03 Jul 2009 - 11:55:17
Citer
1 Posts
 Bonjour,

Je souhaite mettre du texte sur deux colonnes, l'une alignée sur la gauche (texte justifié), l'autre à droite (texte aligné à droite), les deux débutant en haut de page. Le code ci-dessous fonctionne :



div.row span.left{

	float: left;

	background-color: #99CCCC;

	width: 70%;

}

div.row span.right{

	float: right;

	background-color: #99CCCC;

	width: 30%;

}

div.row span.left p{

	text-align: justify;

	margin-left:5px;

}

div.row span.right p{

	text-align: right;

	margin-right:5px;

}


Par contre j'ai tenté de réduire le nombre de déclarations en introduisant le formatage des paragraphes dans les div :



div.row span.left{

	float: left;

	background-color: #99CCCC;

	width: 70%;

	text-align: justify;

	margin-left: 5px;

}



div.row span.right{

	float: right;

	background-color: #99CCCC;

	width: 30%;

	text-align: right;

	margin-right: 5px;

}


et là je me retrouve avec la colonne de droite bien alignée à droite mais débutant après la fin de la colonne de gauche ! Le code de ma page php est le suivant :



<div style="width:100%; background-color:#99CCCC; text-align:left">

    <div class="spacer"></div>

    <div class="row"> 

        <span class="left">

        <p class="gris">Blabla</p>

        </span>

        <span class="right">

        <p>Bliblibli</p>

        </span>

    </div>

</div>


Merci pour vos éclaircissements !
^
Laurie-Anne
# 03 Jul 2009 - 12:07:26
Citer
Modérateur
2716 Posts
 Bonjour,

Première remarque, ton code n'est pas valide.

En effet, tu ne peux pas mettre un <p>aragraphe (de type bloc) dans un <span> (de type en-ligne). Tu DOIS mettre tes paragraphes dans des divs.

Concernant ton problème, je pense qu'en raplaçant les span par des div, il devrait être résolu (mais bon, c'est à tester).

Petit ajout, si tu n'as qu'un seul paragraphes de chaque côté, tu peux supprimer les span et appliquer les floats au paragraphes directement.
Faut pas dire du mal d'IE6... Nan, faut pas.
http://laurie-anne.bourdain.name 
^
Prévenir un modérateur
Répondre au sujet
Aller à
Powered by Phedio v3.8.6 beta in 4.8 ms © dew