28173 sujets

CSS et mise en forme, CSS3

[Résolu] 2 blocs l'un à coté de l'autre

Bonsoir,

Je viens d'essayer de mettre en oeuvre un tuto de openweb:
=> http://openweb.eu.org/articles/initiation_flux/

Voici ce que j'en ai fait (http://www.subran.be/topcanon/index.php?page=membres)

<p>

<span class="jaune">

<a href="index.php?id=106">caro</a><br /><a href="index.php?id=88">chris</a><br /><a href="index.php?id=62">kiki</a><br /><a href="index.php?id=118">kimchou</a><br /><a href="index.php?id=128">louloutt</a><br /><a href="index.php?id=119">marie</a><br /><a href="index.php?id=93">najat</a><br /><a href="index.php?id=63">poupette</a><br /><a href="index.php?id=122">princessxyou</a><br /><a href="index.php?id=111">shona</a><br /><a href="index.php?id=90">steffy</a><br /><a href="index.php?id=114">stephanie</a><br /><a href="index.php?id=35">veronique</a><br /><a href="index.php?id=37">vivirginie</a><br />

</span>


<span class="verte">

<a href="index.php?id=87">babsss</a><br /><a href="index.php?id=44">chill</a><br /><a href="index.php?id=86">desko</a><br /><a href="index.php?id=48">fastpat</a><br /><a href="index.php?id=67">guitou01</a><br /><a href="index.php?id=68">kalange18</a><br /><a href="index.php?id=23">laurent</a><br /><a href="index.php?id=81">lemich8</a><br /><a href="index.php?id=66">lim888</a><br /><a href="index.php?id=47">marc</a><br /><a href="index.php?id=46">michou</a><br /><a href="index.php?id=55">murat</a><br /><a href="index.php?id=42">rachou</a><br /><a href="index.php?id=21">sebajja</a><br /><a href="index.php?id=85">sylva</a><br /><a href="index.php?id=56">tchino</a><br />

</span>

</p>


Et le css (http://www.subran.be/topcanon/design/new.css)

.jaune {
  background-color: #ffff00;
}
.verte {
  background-color: #00ff00;
}


Mais les blocs ne sont pas l'un à coté de l'autre Smiley decu

Qu'est ce qui cloche selon vous?

Merci d'avance pour votre aide,

Subran
Modifié par subran (07 Jun 2006 - 00:59)
Oups je suis allé un peu vite Smiley cligne
Il y a un problème de structuration. Dans ton cas il faut raisonner en bloques manipulable et non en span.
Les span vert et jaune devraient être des block pour pouvoir les manipuler indépendamment. Le span n'est en principe pas fait pour encadrer plusieurs éléments mais doit être appliqué à un seul élément
qui doit se distinuguer des autres par son aspect. C'est la principale utilisation du span.
Même si tu enlève le <br> qui suit la dernière boîte en-ligne, le span vert
ne se placera pas à droite du jaune car ce dernier n'est pas compris dans un block.
Tu dois donc remplacer tes span par une bôite de type bock (dans ton cas un <ul> puisque c'est une liste), dotter ton premier <ul> d'un float:left et bin sûr mettre tes membres dans des <li>.
Modifié par Hermann (07 Jun 2006 - 10:56)
Ok jviens de faire ceci mais ca ne fonctionne pas encore:

Le css

.femmes ul {
		float:left;
}
.hommes ul {

}


Le html

<ul class="femmes">
<li><a href="index.php?id=88">chris</a><br /></li>
<li><a href="index.php?id=62">kiki</a><br /></li>
<li><a href="index.php?id=118">kimchou</a><br /></li>
<li><a href="index.php?id=132">lili</a><br /></li>
<li><a href="index.php?id=128">louloutt</a><br /></li>
<li><a href="index.php?id=119">marie</a><br /></li>
<li><a href="index.php?id=93">najat</a><br /></li>
<li><a href="index.php?id=63">poupette</a><br /></li>
<li><a href="index.php?id=122">princessxyou</a><br /></li>
<li><a href="index.php?id=111">shona</a><br /></li>
<li><a href="index.php?id=90">steffy</a><br /></li>
<li><a href="index.php?id=114">stephanie</a><br /></li>
<li><a href="index.php?id=35">veronique</a><br /></li>
<li><a href="index.php?id=37">vivirginie</a><br /></li>		
</ul>

<ul class="hommes">
<li><a href="index.php?id=87">babsss</a><br /></li>
<li><a href="index.php?id=44">chill</a><br /></li>
<li><a href="index.php?id=86">desko</a><br /></li>
<li><a href="index.php?id=48">fastpat</a><br /></li>
<li><a href="index.php?id=67">guitou01</a><br /></li>
<li><a href="index.php?id=68">kalange18</a><br /></li>
<li><a href="index.php?id=23">laurent</a><br /></li>
<li><a href="index.php?id=81">lemich8</a><br /></li>
<li><a href="index.php?id=66">lim888</a><br /></li>
<li><a href="index.php?id=47">marc</a><br /></li>
<li><a href="index.php?id=46">michou</a><br /></li>
<li><a href="index.php?id=55">murat</a><br /></li>
<li><a href="index.php?id=42">rachou</a><br /></li>
<li><a href="index.php?id=21">sebajja</a><br /></li>
<li><a href="index.php?id=85">sylva</a><br /></li>
<li><a href="index.php?id=56">tchino</a><br /></li>		
</ul>


Merci d'avance pour votre aide,

Subran
Modifié par subran (07 Jun 2006 - 11:42)
Normal tu as tout inversé:
Tu dois écrire 

 ul.femmes


et non

.femmes ul


PS: le float:right n'est pas nécéssaire
Modifié par Hermann (07 Jun 2006 - 11:41)
Lol maintenant dans ton code tu as des listes flottantes et un tableau ! Si tu veux utiliser un tableau, autant virer le float sur les listes, ça ne sert plus à rien.

Par contre : certains viendront sans doute te dire que les tableaux ne sont pas faits pour faire de la mise en page graphique (et ils auront raison), et que ce que tu veux faire ne devrait pas nécessiter un tableau (et ils auront plutôt raison)… mais si tu veux garder un tableau, vire au moins cette colonne du milieu qui est totalement vide ! Bonjour l'accessibilité du contenu…

Si tu veux créer un espace entre tes deux colonnes, il te suffira de jouer sur les padding, par exemple.
Tout à fait, vous avez raison.

J'ai enlevé le tableau mais... un problème persisste le texte dépasse mon bloc mauve ;

Mais en rajoutant ceci tout le bloc c'est adapté au texte:


HTML

<div class="spacer">&nbsp;</div>

CSS

.spacer {
  clear: both;	
}



Merci pour votre aide en tout cas,

Subran
Modifié par subran (07 Jun 2006 - 15:43)
Sujet clos
Aller à