28173 sujets

CSS et mise en forme, CSS3

Bonjour

sur mon site web, honteusement pompé sur le tuto de M@ateo, j'ai un petit bug. En effet, dans le corps de la page, je mets une image accompagnée d'un texte à côté. Puis j'utilise un div pour stopper le flottant. Ce qui donnait ça jusqu'à présent voir ici
Pas de souci. Mais avec la prochaine MAJ, le menu est bien plus grand. Et lorsque je stoppe le flottant du corps du texte, il stoppe également celui du menu ce qui donne cette image
Le passage sur Giroro est rabaissé en dessous du menu... J'aimerais juste stopper le flottant de la classe CSS "dessus" sans stopper celui du "menu"
et je ne vois pas comment..

Donc si quelqu'un aurait une solution, ou à défaut une piste.... Sans changer l'apparence du design (je suppose qu'en mettant les images à droite et en faisant un clear:right mais je ne veux pas ^^').

Merci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
 
 
 
<title>La chambre de Keroro : À propos des personnages</title>       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                                                <link rel="stylesheet" media="screen" type="text/css" title="Basique" href="design.css" />
                   
   </head>
 
   <body>
 
<div>
       <div id="en_tete">
           
       </div>
&#65279;<div id="menu">
                   
                   <div class ="menu2">
           <div class="element_menu">
                   <br/>
                   <br/>
                   <div class ="titre_menu">Vie du site</div>
 
                 <ul >
                                   <li><a href="index.html" title="index du site">Index</a></li>
                                   <li><a href="news.html" title="News">News</a></li>
                                   <li><a href="contact.html" title="Contact">Contact</a></li>
                                 </ul>
                                 <div class ="titre_menu">Présentation du manga</div>
                                 <ul>
 
                                   
                                   <li><a href="auteur.html" title="À propos de l'auteur">À propos de l'auteur</a></li>
                                   <li><a href="manga.html" title="À propos du manga">À propos du manga</a></li>
                   <li><a href="volumes.html" title="Les couvertures des volumes reliés">À propos des volumes</a></li>
                   <li><a href="persos.html" title="À propos des personnages">À propos des personnages</a></li>
                                 </ul>
                                 <div class ="titre_menu">Dossiers</div>
 
                                 <ul>
                                   
                                   <li><a href="manganime.html" title="Différences entre le manga et l'anime">Différences manga/anime</a></li>
                   <li><a href="ref.html" title="Keroro dans d'autres oeuvres">Keroro dans d'autres œuvres</a></li>
                   <li><a href="references.html" title="D'autres œuvres dans Keroro">D'autres œuvres dans Keroro</a></li>
                   <li><a href="inventions.html" title="Les inventions de Kululu">Les inventions de Kululu</a></li>
                                 </ul>
                                 <div class ="titre_menu">Divers</div>
 
                                 <ul>
                   <li><a href="images.html" title="Images glanées sur le net">Images glanées sur le net</a></li>
                   <li><a href="generiques.html" title="Génériques">Vidéos de génériques</a></li>
                                   <li><a href="http://keroro.super-forum.net/" title="Le forum">Le forum</a></li>
               </ul>
                           <div class ="titre_menu">La vie du Web</div>
                           <ul>
 
                                        <li><a href="smileys.html" title="Smileys MSN">Smileys MSN</a></li>
                                        <li><a href="liens.html" title="liens">Liens et affiliés</a></li>
                           </ul>
                           
           </div>
                   </div>
                   
        
       </div>
           <div class ="menu4">
           <div class ="menu3">
 
       <div id="corps">
           <div><br/></div>
              <h1>À propos du manga</h1>
<h2>Les kerons</h2>
        <div>
                                <a href="plus-01-kero.html" title ="plus d'info sur ce perso"><img src="images/portraitkero.jpg" alt="Keroro" class="imgflottantel" /></a><br/>
<strong>Keroro :</strong> Chef de l'unité Keroro. Il se fera stupidement capturer par la famille Hinata qui l'adoptera comme nouveau membre de la famille.
Quand l'armée Keron partiront, il acceptera sa nouvelle vie sans pour autant renoncer à conquérir le monde.<br/>
Le soucis, c'est qu'il s'est adapté à la vie terrestre. Outre son site web, il se passionne pour les maquettes Gundam dont il fait collection. Il est souvent obligé
de faire le ménage pour les Hinata (surtout par Natsumi), en revanche, il est très ami avec Fuyuki.<br/><a href="plus-01-kero.html" title ="plus d'info sur ce perso">Plus d'information sur ce personnage</a><div class="dessous"></div><a href="plus-02-giro.html" title ="plus d'info sur ce perso"><img src="images/portraitgiro.jpg" alt="Giroro" class="imgflottantel" /></a><br/>
<strong>Giroro :</strong> Le Caporal Giroro est le spécialiste des armes. Il vit dans le jardins des Hinata dans une tente. Ce qui lui permet de rester près de son chef
mais également près de Natsumi dont il est amoureux. C'est le seul des 5 à ne pas avoir de symbole visible sur son torse. Il arrive en voulant vaincre la famille Hinata mais il est stoppé dans son élan quand Natsumi le bat.<br/><a href="plus-02-giro.html" title ="plus d'info sur ce perso">Plus d'information sur ce personnage</a><div class="dessous"></div>
 
</div>
      </div>
 
           </div>
&#65279;        <div class="footer">
                <div id="pied_de_page">
         
                         <br/>
           <p>Copyright Pallas4 2007, tous droits réservés <br />
 
                   Les propos écrits par les visiteurs sur ce site n'engagent que leurs auteurs.<br/>
                                   </p>
 
       
                </div> 
                </div>     </div>
           </div>
           
   </body>
</html>


la classe dessous :

.dessous{
   clear: both;
}

Modifié par Pallas4 (02 Nov 2007 - 16:10)
Heyoan a écrit :

PS : c'est qui M@ateo Smiley rolleyes ?

Le type du Site du Zero je crois.
Sinon, un peu hors-sujet, mais tu pourras "bientôt" sélectionner un élément sur deux grâce à… CSS3! Smiley biggol

[b][#black]xhtml[/#][/b]

<ul>
<li>Élément de liste</li>
<li>Élément de liste</li>
<li>Élément de liste</li>
<li>Élément de liste</li>
</ul>


[b][#black]css[/#][/b]

li:nth-child(even) {background:fuchsia}

Extrêmement pratique, et implémenté par… Konqueror et Opera! Smiley lol
Heyoan >
MERCI °O°

C'est exactement la solution à mon problème
et pardon pour m@ateo... j'ai parfois (d'aucuns diront souvent) tendance à oublier d'expliquer certains détails u_u

Benjamin >
oui j'imagine, très utile... Sauf que d'ici à ce que le CSS3 soit exploitable sur suffisamment de site é_è