Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
590 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1139586
cosmoschtr​oumpf
dawa powered
Posté le 04-07-2005 à 17:14:09  profilanswer
 

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
mood
Publicité
Posté le 04-07-2005 à 17:14:09  profilanswer
 

n°1139589
masklinn
í dag viðrar vel til loftárása
Posté le 04-07-2005 à 17:17:15  profilanswer
 

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
n°1139609
cosmoschtr​oumpf
dawa powered
Posté le 04-07-2005 à 17:45:00  profilanswer
 

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
n°1139613
masklinn
í dag viðrar vel til loftárása
Posté le 04-07-2005 à 17:46:29  profilanswer
 

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
n°1139636
cosmoschtr​oumpf
dawa powered
Posté le 04-07-2005 à 18:12:35  profilanswer
 

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
n°1139643
masklinn
í dag viðrar vel til loftárása
Posté le 04-07-2005 à 18:14:38  profilanswer
 

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
n°1139651
cosmoschtr​oumpf
dawa powered
Posté le 04-07-2005 à 18:17:28  profilanswer
 

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
n°1141642
cosmoschtr​oumpf
dawa powered
Posté le 06-07-2005 à 09:16:37  profilanswer
 

euppe [:dawao]

n°1142610
cosmoschtr​oumpf
dawa powered
Posté le 06-07-2005 à 20:43:19  profilanswer
 
n°1143695
cosmoschtr​oumpf
dawa powered
Posté le 07-07-2005 à 21:51:34  profilanswer
 

allay siouplé [:zytrasnif]


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
mood
Publicité
Posté le 07-07-2005 à 21:51:34  profilanswer
 

n°1143724
Lund
Posté le 07-07-2005 à 22:32:27  profilanswer
 

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

n°1143931
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 09:09:10  profilanswer
 

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
n°1144005
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 10:01:59  profilanswer
 

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
n°1144008
masklinn
í dag viðrar vel til loftárása
Posté le 08-07-2005 à 10:03:14  profilanswer
 

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
n°1144032
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 10:12:33  profilanswer
 

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
n°1144036
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 10:13:44  profilanswer
 

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
n°1144074
gm_superst​ar
Appelez-moi Super
Posté le 08-07-2005 à 10:37:36  profilanswer
 

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
n°1144078
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 10:40:26  profilanswer
 

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
n°1144094
gm_superst​ar
Appelez-moi Super
Posté le 08-07-2005 à 10:49:23  profilanswer
 

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
n°1144118
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 11:07:14  profilanswer
 

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
n°1144126
gm_superst​ar
Appelez-moi Super
Posté le 08-07-2005 à 11:12:35  profilanswer
 

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
n°1144264
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 12:33:35  profilanswer
 

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
n°1144292
gm_superst​ar
Appelez-moi Super
Posté le 08-07-2005 à 13:16:14  profilanswer
 

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
n°1144320
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 13:33:20  profilanswer
 

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
n°1144330
gm_superst​ar
Appelez-moi Super
Posté le 08-07-2005 à 13:41:27  profilanswer
 

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
n°1144422
cosmoschtr​oumpf
dawa powered
Posté le 08-07-2005 à 14:56:14  profilanswer
 

okay
merci pour tout [:romf]


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Vraiment besoin d'aide SVP :') !!!! Récupérer vidéo JTVraiment cacher un hidden !
Est ce vraiment nécéssaire...pour les pros de gdi+, j'ai vraiment besoin d'aide...
[PHP] Y'a des fois où je me dis que je suis vraiment barje LOLconst: Est-ce vraiment utile?
Vraiment Dsl Mais Mon combo box !!!!!VRAIMENT VRAIMENT besoin d'aide
Gestion de la mise en page avec des include...jarrive vraiment pas.BINARY() de MySQL vraiment lent...
Plus de sujets relatifs à : Les floats, j'ai vraiment du mal....

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.136 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR