Les floats, j'ai vraiment du mal....

Les floats, j'ai vraiment du mal.... - HTML/CSS - Programmation

Marsh Posté le 04-07-2005 à 17:14:09    

Bonjour
 
J'ai une page avec une mise en forme un peu comme suit :
 

Code :
  1. <html>
  2. <head>
  3.  <style type="text/css">
  4.   * {
  5.    text-align: left;
  6.   }
  7.   body {
  8.    margin: 0;
  9.    padding: 0;
  10.    text-align: center;
  11.   }
  12.   #conteneur {
  13.    width: 760px;
  14.    margin-left: auto;
  15.    margin-right: auto;
  16.   }
  17.   #navigation {
  18.    width: 200px;
  19.    float: left;
  20.   }
  21.   #contenus {
  22.    margin-left: 220px;
  23.    width: 560px;
  24.   }
  25.   .composant .imgLeft {
  26.    float: left;
  27.   }
  28.   .composant .imgRight {
  29.    float: right;
  30.   }
  31.  </style>
  32. </head>
  33. <body>
  34.  <div id="conteneur">
  35.   <div id="header">menu etc</div>
  36.   <div id="navigation">sous-menus etc</div>
  37.   <div id="contenus">
  38.    <div class="composant">
  39.     <h2>titre</h2>
  40.     <div class="accroche">accroche</div>
  41.     <div class="texte"><img class="imgLeft" height="50" />bla bla</div>
  42.     <div class="navigcontenu">liens retour en haut, avis...</div>
  43.     <hr />
  44.    </div>
  45.    <div class="composant">
  46.     <h2>titre 2</h2>
  47.     <div class="accroche">accroche 2</div>
  48.     <div class="texte"><img class="imgLeft" height="50" />bla bla 2</div>
  49.     <div class="navigcontenu">liens retour en haut, avis...</div>
  50.     <hr />
  51.    </div>
  52.   </div>
  53.  </div>
  54. </body>
  55. </html>


 
 
Voilà, le problème, c'est que comme vous pouvez le voir si vous testez ce code, mes "navigcontenu", ils sont toujours collés aux images, alors qu'ils devraient être en-dessous. Sur mon fichier, les images peuvent être assez longues, et dans ce cas il y a même les composants suivants qui sont collés à l'image précédente.
 
J'ai essayé de mettre un clear:both à .texte, mais ça me clear tout, et ça met le texte en-dessous de #navigation, alors qu'il devrait être à droite.
 
est-ce que vous pouvez m'aider ?
 
j'ai essayé de nettoyer pour que ce soit plus compréhensible, en virant tout ce qui ne servait pas (genre les menus etc), mais si vous pensez que je devrais mettre tout le code, je peux aussi :o


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 04-07-2005 à 17:14:09   

Reply

Marsh Posté le 04-07-2005 à 17:17:15    

cosmoschtroumpf a écrit :

Voilà, le problème, c'est que comme vous pouvez le voir si vous testez ce code, mes "navigcontenu", ils sont toujours collés aux images, alors qu'ils devraient être en-dessous.


Non [:pingouino]
 
Ils s'affichent exactement comme tu leur as dit de s'afficher, il faut que tu revoies tes notions sur le positionnement et les flottants [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-07-2005 à 17:45:00    

Non, en fait, quand je dis ils devraient, c'est ce que je voudrais qu'ils fassent, mais je sais bien que ce qu'il se passe est normal.
J'avais vu sur openweb la technique des spacers avec clear:both pour éviter le chevauchement, mais là, ça me clear un peu trop, et pour tout dire, sur openweb, leur clear il clearait un peu moins, il clearait juste par rapport au div autour, pas par rapport au div encore au-dessus (si jamais j'arrive à me faire comprendre).


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 04-07-2005 à 17:46:29    

t'as qu'à mettre tes clears sur navigcontenu [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-07-2005 à 18:12:35    

habaoui, mais ça fait pareil, sauf que ça se clear ailleurs :/
 
Bon, je vais mettre tout mon code, ça sera ptet mieux pour comprendre en fait.
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <title>Titre du site</title>
  5.  <link rel="stylesheet" type="text/css" href="visu/style/defaut.css" />
  6. </head>
  7. <body>
  8.  <div id="conteneur">
  9.  <!-- Conteneur : div qui contient tout -->
  11.   <div id="header">
  12.   <!-- Header : logo, langues, menu principal, activites et membres, recherche -->
  13.    <div id="menuprincipal">
  14.    <!-- Menu principal -->
  15.     <h2>Navigation principale</h2>
  16.     <ul>
  17.      <li><a href="#">Sommaire</a></li>
  18.      <li><a href="#">Premier theme</a>
  19.       <ul>
  20.        <li><a href="#">Premier sous-theme</a></li>
  21.        <li><a href="#">Second sous-theme</a></li>
  22.       </ul>
  23.      </li>
  24.      <li><a href="#">Second theme</a>
  25.       <ul>
  26.        <li><a href="#">Troisieme sous-theme</a></li>
  27.       </ul>
  28.      </li>
  29.      <li><a href="#">Activites</a></li>
  30.      <li><a href="#">Membres</a></li>
  31.     </ul>
  32.    </div>
  33.   <!-- Fin Header -->
  34.   </div>
  36.   <div id="navigation">
  37.   <!-- Navigation : sous-menu, actualites, identification, newsletter -->
  38.    <div id="sousmenu">
  39.    <!-- Sous-menu -->
  40.     <h2>Navigation secondaire</h2>
  41.     <ul>
  42.      <li><a href="#">Premier &eacute;l&eacute;ment</a></li>
  43.      <li><a href="#">Second &eacute;l&eacute;ment</a></li>
  44.     </ul>
  45.    </div>
  46.    <div id="actualites">
  47.    <!-- Actualites -->
  48.     <h2>Actualites</h2>
  49.     <ul>
  50.      <li><a href="#">Titre actu 1</a></li>
  51.      <li><a href="#">Titre actu 2</a></li>
  52.     </ul>
  53.    </div>
  54.   <!-- Fin Navigation -->
  55.   </div>
  57.   <div id="contenus">
  58.   <!-- Contenus -->
  59.    <div class="composant">
  60.     <h2>Bienvenue sur notre nouveau site internet !</h2>
  61.     <div class="accroche">Notre site en ligne !</div>
  62.     <div class="texte"><img src="images/sites/illustrations/1_1_bienvenue.jpg" class="imgLeft" />Depuis le 17/06/05 nous b&eacute;n&eacute;ficions d'un nouveau site internet cr&eacute;&eacute; gr&acirc;ce а Koama. Pour toute information rendez-vous sur le site de Koama.</div>
  63.     <div class="navigcontenu">
  64.      <a href="#" title="Retour en haut" class="lienhaut"><img src="images/commun/haut.png" alt="Haut" />Haut</a>
  65.     </div>
  66.     <hr />
  67.    </div>
  69.    <div class="composant">
  70.     <h2>Participation</h2>
  71.     <div class="accroche">Merci de nous donner votre avis</div>
  72.     <div class="texte">
  73.      <p>Ce site internet &eacute;tant encore en phase de lancement nous aimerions conna&icirc;tre votre avis sur son contenu, sa lisibilit&eacute; etc...</p>
  74.      <p>Merci d'avance et laissez-nous un petit message pour nous dire ce que vous en pensez !</p>
  75.     </div>
  76.     <div class="navigcontenu">
  77.      <a href="#" title="Voir les avis, et donner le v&ocirc;tre" class="lienavis"><img src="images/commun/avis.png" alt="Avis" />Avis</a>
  78.      <a href="#" title="Retour en haut" class="lienhaut"><img src="images/commun/haut.png" alt="Haut" />Haut</a>
  79.     </div>
  80.     <hr />
  81.    </div>
  83.    <div id="imprimer">
  84.    <!-- Imprimer -->
  85.     <a href="#"><img src="images/commun/imprimer.png" alt="Imprimer" /><br>
  86.     Imprimer</a>
  87.    </div>
  89.    <div id="pieddepage">
  90.    <!-- Pied de page -->
  91.     Site Internet cr&eacute;&eacute; gr&acirc;ce а Koama.
  92.    </div>
  93.   <!-- Fin Contenus -->
  94.   </div>
  96.  <!-- Fin Conteneur -->
  97.  </div>
  98. </body>
  99. </html>


wala
j'ai viré pas mal de trucs inutiles
 
et le css :

Code :
  1. /************************************************
  2. * Redefinition des balises
  3. ************************************************/
  5. * {
  6. text-align: left;
  7. }
  10. body {
  11. margin: 0;
  12. padding: 0;
  13. text-align: center;
  14. }
  16. /************************************************
  17. * Identifiants
  18. ************************************************/
  20. /*
  21. * Conteneur
  22. */
  23. #conteneur {
  24. width: 760px;
  25. margin-left: auto;
  26. margin-right: auto;
  27. }
  29. /*
  30.  * Navigation
  31.  */
  32. #navigation {
  33.  width: 200px;
  34.  float: left;
  35. }
  37.  /*
  38.   * Elements communs aux sous-menus, actualites, identification, newsletter
  39.   */
  40.  #sousmenu p, #actualites p, #identification p, #newsletter p {
  41.   clear: both;
  42.  }
  43.  #sousmenu label, #actualites label, #identification label, #newsletter label {
  44.   float: left;
  45.   width: 25%;
  46.  }
  47.  #sousmenu .centre, #actualites .centre, #identification .centre, #newsletter .centre {
  48.   float: none;
  49.   text-align: center;
  50.   margin-left: auto;
  51.   margin-right: auto;
  52.  }
  54. /*
  55.  * Contenus
  56.  */
  57. #contenus {
  58.  margin-left: 220px;
  59.  width: 560px;
  60. }
  62.  /*
  63.   * Composant
  64.   */
  65.  .composant .imgLeft {
  66.   float: left;
  67.  }
  68.  .composant .imgRight {
  69.   float: right;
  70.  }
  71.  .composant .navigcontenu {
  72.   clear: both;
  73.  }
  75.  /*
  76.   * Imprimer
  77.   */
  78.  #imprimer {
  79.   float: right;
  80.   width: 70px;
  81.   text-align: center;
  82.  }


 
ouala
j'espere que c'est assez clair :o
 
vous pouvez copier-coller le code, ça fait exactement ce que ça devrait pas : y'a un contenu à droite, et le lien "haut", ben il est super plus bas.


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 04-07-2005 à 18:14:38    

fouya, quel bordel [:pingouino]
 
Je regarde ça.
quand j'ai le temps.
peut être.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-07-2005 à 18:17:28    

spa le bordel, çay très bien indenté [:aloy]
bon, y'a ptet beaucoup de trucs [:cupra]
passkeu çay un site qui rosque [:franck75]
 
enfin bref, voilà quoi :o
 
 
[:pingouino] (y'a pas de raison)


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 06-07-2005 à 09:16:37    

euppe [:dawao]

Reply

Marsh Posté le 06-07-2005 à 20:43:19    

Reply

Marsh Posté le 07-07-2005 à 21:51:34    

allay siouplé [:zytrasnif]


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 07-07-2005 à 21:51:34   

Reply

Marsh Posté le 07-07-2005 à 22:32:27    

Mais...pour faire clair, tu veux quoi ? (J'ai pas vraiment compris ton problème, désolé.)

Reply

Marsh Posté le 08-07-2005 à 09:09:10    

essaye le code que j'ai proposé à la fin et tu devrais voir le problème par toi-même je pense :o
 
en gros, je veux faire un retour à la ligne, mais ca me fait un retour à la colonne, si je puis dire.


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 10:01:59    

Comme apparament c'est pas tres clair pour tout le monde :
 
ce que je veux :
http://multani.info/cosmo/jeveux-koama2.png
 
ce que j'obtiens :
http://multani.info/cosmo/prob-koama2.png
 
ouala :o


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 10:03:14    

cosmoschtroumpf a écrit :

Comme apparament c'est pas tres clair pour tout le monde :
 
ce que je veux :
http://multani.info/cosmo/jeveux-koama2.png
 
ce que j'obtiens :
http://multani.info/cosmo/prob-koama2.png
 
ouala :o


Ben ouais, si ton menu a été flotté à gauche (et mon petit doigt me dit qu'il l'a été) ben c'est un peu normal, tu vois [:dawa]
 
clear: both, ça veut dire ce que ça veut dire [:dawa]


Message édité par masklinn le 08-07-2005 à 10:03:37

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-07-2005 à 10:12:33    

oui je sais :o
je me doutais que ça venait de là [:itm]
maintenant, est-ce qu'il y a une solution, en-dehors des tableaux ? [:itm]
 
merci [:moule_bite]


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 10:13:44    

j'ai mis en ligne les fichiers :
http://multani.info/cosmo/koama2/
là y'a un problème :o


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 10:37:36    

C'est ton  
 

.composant .navigcontenu {
  clear: both;
}


 
Qui ne sert à rien


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-07-2005 à 10:40:26    

tu veux dire qui fout le bordel ?
j'avais bien vu :o
mais j'aimerais une solution pour que si je le vire, ça ne me mette pas le lien "haut" collé sur l'image du contenu :o


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 10:49:23    

Ben donne lui une petite marge en haut...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-07-2005 à 11:07:14    

j'ai essayé, ça change rien. Il passe au milieu de l'image.
(j'ai donc viré le clear et mis un margin-top, qu'on se comprenne bien).


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 11:12:35    

Ah oui faut modifier aussi les valeurs dans #contenus parce que pour moi 420 + 560 ça explose largement 760px ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-07-2005 à 12:33:35    

D'un coup, ça marche vachement mieux [:petrus75]
 
[:romf]
 
(j'avais pas bien nettoyé quand j'ai transféré le positionnement sur une seconde feuille de style [:dawao])
 
bon, j'ai toujours un problème, au niveau du formulaire de recherche. Je veux l'aligner à droite.
J'ai mis un float:right sur le form, mais ça fait un tit bug rigolo que vous pouvez voir sur le lien plus haut (les champs se mettent n'importe où).
J'ai essayé avec text-align:right, mais évidemment, sous FF ça marche pas.
Je voudrais que ça fasse comme quand c'est aligné à gauche, mais à droite [:dawao] c'est-à-dire avec le formulaire entre le menu principal et l'arborescence ascendante, avec une couleur de fond différente du header.
 
merci [:romf]


Message édité par cosmoschtroumpf le 08-07-2005 à 12:36:11

---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 13:16:14    

cosmoschtroumpf a écrit :

J'ai essayé avec text-align:right, mais évidemment, sous FF ça marche pas.


Si si c'est censé marcher, mais vire ton  
 
* {
  text-align: left;
}
 
qui est beaucoup trop fort (ne l'applique que sur #conteneur)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-07-2005 à 13:33:20    

ah oui [:dawa]
 
[:romf]
 
[:uriel]
 
mais je croyais que les éléments type input, n'étant pas du texte, ne devaient pas s'aligner sur les text-align ? Ou je confond avec les div ?


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 08-07-2005 à 13:41:27    

Oui tu confonds, les éléments d'un formulaire sont comme des images, ils se comportent comme du texte (éléments en-ligne remplacés)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-07-2005 à 14:56:14    

okay
merci pour tout [:romf]


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed