28234 sujets

CSS et mise en forme, CSS3

[résolu] float left sans width definie sous firefox ne marche pas

Hello a tous,
Voilà je suis confronté à un chtit probleme…moi et les float, ca fait deux et je me perds tout le temps dans ces notions enfin voilà mon problème.
http://test.lightbox.ie/ips/index.html

Le fait est que le contenu principal de ce site (contenant le texte et l’image de droite) est en float left a la suite du menu. Sous IE tout va bien (pour une fois que c’est l’inverse), mais sous Firefox, tout le contenu principal passe en dessous du menu, comme s’il ne prenait pas en compte la propriété float. Je me doute que ce n’est pas ca et que je fais une erreur quelque part!! Enfin le fait est que si je veux que mon contenu passe a droite du menu, je dois lui specifier une width : est-ce normal ?
Je n’ai pas envie de spécifier une width pour ce div car je veux que lorsque l’on modifie la taille de la fenetre le contenu modifie sa largeur…

Voici le code :

<div id="left_content">
  <div id="left_menu">
    <ul>
      <li><a href="#" title="Home" class="home">Home</a></li>
      <li><a href="#" title="Home">Products</a></li>
      ...
    </ul>
  </div>
  <img src="images/top_green_box.gif" width="116" height="5" alt="" />
  <div class="green_box">Read what's new CLICK HERE</div>
  <img src="images/bottom_box.jpg" width="116" height="5" alt="" class="bottom_box" /> <img src="images/top_green_box.gif" width="116" height="5" alt="" />
  <div class="blue_box">Introducing SIPP &amp; SSAS READ MORE</div>
  <img src="images/bottom_box.jpg" width="116" height="5" alt="" class="bottom_box" /> </div>
<div id="content">
  <h2>Welcome.</h2>
  <div class="text_content">
    <div id="right_content"> <img src="images/pen_spreadsheet.jpg" width="205" height="154" alt="" />
      <div id="right_content_text">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet"</div>
      <img src="images/bottom_right_box.gif" width="205" height="6" alt="" class="bottom_box" /></div>
    <p>Lorem of ipsum Lorem ipsum dolor sit amet, consectetuer ...</p>
    <p>Lorem of ipsum Lorem ipsum dolor sit amet, consectetuer ...</p>
  </div>
</div>


Et la css associee

div#left_content{
  float:left;
  width:150px;
  margin:0px 0px 0px 20px;
}

div#content{
   float:left;
   margin:20px;
   width:auto;
}


Quelqu’un pourrait-il me dire où je fais une grosse erreur!!
Merci d'avance Smiley biggrin
Modifié par lehic7791 (16 May 2005 - 12:52)
J'ai teste ta idee mais ca n'arrange pas mes affaires Smiley smile . En fait ce ne fait pas passer mon contenu a droite du menu...mais ou se cache mon erreur... Smiley ohwell
Merci pour ta reponse
Bon je sais pas trop ce que tu veux faire alors j'ai fait un truc. Je considére que ton bluerectangle n'est la que pour la deco donc je l'ai enlevé et je l'ai remplacé par un border-bottom du header (même caractéristique) de toute facon en float left et 100 % ca ne sert a rien. Je mets une hauteur au header.
cela donne pour header :
div#header{
        height :35px;<-------------------------- hauteur 
	margin:20px;
	border-bottom : 13px solid #013567; <------------- remplacant du rectangle blue

}


apres pour le content, pas besoin de le mettre en float left puisqu'il n'y aura pas d'autres éléments à sa droite donc je le met en position relative et je ne lui definit pas de largeur cela donne :
div#content{

        position: relative;<------------------ pour dire que je choisi ou je le met
        margin-left:140px;<---------- le menu fait 136px donc je le mets par exemple a 140px (plus de float left !
}


Chez moi sous FF et IE cela semble donner l'effet que tu recherches. Dans le XHTML ne pas oublier de virer la div vide Smiley fache "rectangleblue".

Essaye et dis moi Smiley cligne
Modifié par gilles6975 (16 May 2005 - 11:55)
Ah j'aime de telles reponses Smiley langue . Merci beaucoup d'avoir passe un peu de temps sur mon erreur!! Ca marche maintenant, je comprends comment tu as procede. Le fait est que je me melange toujours les pates entre les float et les positions relatives, j'ai tendances a coller des float partout ce qui finalement n'est pas du tout la bonne solution.
Pour le div vide c'est evident que je meritte des claques...je me decois moi meme sur cet erreur, car je me souviens m'etre empecher de la faire sur un autre projet!! Smiley lol
Juste une precision, tu dis:
a écrit :

pas besoin de le mettre en float left puisqu'il n'y aura pas d'autres éléments à sa droite donc je le met en position relative et je ne lui definit pas de largeur

Personnellement, je pensais qu'on mettait un element en float left, par exemple quand un element precedent etait juste avant lui et qu'on voulait le placer a la suite, sur sa droite...c'est surement la ou je me trompe??
En tout cas merci beaucoup pour ton aide gilles Smiley biggrin
Normalement après chaque élément CSS on a un retour à la ligne, c'est le cas par exemple des <li> des balises <p>, etc..
Mettre un float c'est en fait dire mon élément en float je ne veux pas qu'il soit dans le flux et je veux qu'il crée un flux particulier (dont on sort avec la propriété clear). De même par defaut les <li> se superposent verticalement sauf si on leur spécifie de se mettre in line.

Un flottant sert donc si on veut que les éléments se colent les uns aux autres par la doite si on a un float left (cad que l'élément viendra se coller à droite du précédent !). C'est pour cela que mettre un flottant sur un élément dont le width est définit à 100% ne sert à rien puisqu'il n'y a pas de place ni a droite ni a gauche pour que l'élément suivant s'affiche. De même mettre un flottant de width (500px par exemple) dans une div qui fait 500px n'a pas grand sens.

Enfin par defaut les éléments prennent 100% de la place disponible tant qu'on ne leur indique pas le contraire. Concrétement dans ton exemple ton bloc content va prendre la place qui lui reste apres que tu lui est définit sa position et ses marges.
Sujet clos
Aller à