28172 sujets

CSS et mise en forme, CSS3

Problème de flottants

Bonjour à tous,

Voici mon problème : Dans ma page d'accueil j'ai une vidéo de présentation du site, je lui ai attribué un float: left;.
Le texte à sa droite n'étant pas assez long, j'ai dû ajouter en dessous <br style='clear: both' /> pour l'annuler et éviter que le paragraphe en dessous ce retrouve à sa droite.

Le problème c'est que mon menu à droite est lui aussi un flottant... du coup le paragraphe en dessous de la vidéo se mets en dessous le menu...



Voici les codes sources :

<div id="menu_droit">
<h3>Nous soutenir</h3>
<img class="float_left" src="theme/argent.png" alt"dons">
<p>Faites un don à GeekLander pour qu’il puisse continuer à exister.</p>
<br style='clear: both' />
<br />
<a class="dons" href="#">Faire un don</a>

<h3><img src="theme/stylo.png" alt="stylo" />Les catégories de tutoriels</h3>
<ul>
   <li>Photoshop</li>
   <li>Illustrator</li>
   <li>After effect</li>
   <li>Flash</li>
   <li>PHP</li>
   <li>HTML</li>
   <li>JavaScript</li>
</ul>

<h3>Bonnes adresses</h3>
<ul>
   <a href="http://siteduzero.com"><li>Le site du zéro</li></a>
   <a href="http://grafikart.fr"><li>Grafikart</li></a>
   <a href="http://mattrunks.com"><li>Mattrunks</li></a>
   <a href="http://www.sxc.hu"<li>Stock xchang</li></a>
   <a href="http://www.sxc.hu"><li>Icon finder</li></a>
   <a href="http://lokan.fr"><li>Lokan</li></a>
</ul>


</div>

<div id="contenu">

<span class="presentation">
<h3>Présentation</h3>
<iframe class="float" src="http://player.vimeo.com/video/18551657" width="400" height="225" frameborder="0"></iframe>
<p>Tout d’abord bienvenue sur notre site !<br />
Le concept de notre projet est simple :<br />
Des tutoriels de qualité gratuit !</p>

<p>En effet les tutoriels disponibles sur notre seraient sur d’autre site payant, mais nous nous vous les proposons gratuitement.
Je ne vous en dis pas plus !</p> <p>Bonne visite sur notre site !</p>
</span>

<h3 class="stop">Les derniers tutoriels</h3>

<div id="colone1">
<img src="images/livre.png" alt="chromie" />
<p><strong>Des livres sur votre tablette</strong><br /><br />
Avoir 500 Livres dans une bibliothèque de 16’ c’est maintenant possible je vous invite d’ailleurs à venir le faire..<br /><br />
<a class="savoir" href="#">En savoir plus</a>
</p>
</div>



#menu_droit
{
    float: right;
    width: 300px;
    margin-right: 10px;
}
.float_left
{
    float: left;
}
#menu_droit .dons
{
    background: url(../theme/dons.png);
    background-repeat: no-repeat;
    width: 236px;
    height: 32px;
    margin: 0;
    padding: 0;
    color: white;
    display: block;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: arial;
}
#menu_droit ul
{
    list-style-image: url(../theme/puce.png);
}
#menu_droit a
{
    color: black;
}



/*Corps*/
#corps
{
    width: 1320px;
    padding:0;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: auto;
    margin-top: 0;
    background: url(../theme/contenu.png) repeat-y;
}
.stop
{
     clear: both;
}
#contenu
{
    width: 820px;
    padding-left: 10px;
}
#contenu .float
{
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
#colone1
{
    display: inline;
    float: left;
    padding-bottom: 10px;
    padding-right: 70px;
    position: relative;
    width: 146px;
}
#colone1 img
{
    border: 5px solid #e4e4e4;
}
#colone1 .savoir
{
    margin: 0;
    padding: 0;
    color: white;
    background: url(../theme/savoir_plus.png);
    background-repeat: no-repeat;
    width: 187px;
    height: 28px;
    border: none;
    font-size: 18px;
    display: block;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    color: white;
    font-family: arial;
}


Savez vous comment résoudre ce problème ?

Merci d'avance ! Smiley smile
Modifié par ilimitred (27 Feb 2011 - 15:30)
Pourrais nous donner une idée visuelle de ce que tu veux obtenir ? Par une image ou encore mieux, une page en ligne.
Sujet clos
Aller à