28173 sujets

CSS et mise en forme, CSS3

J'ai une petite différence entre firefox et safari que je ne comprends pas.
Quand on a un div sans mise en forme spéciale, il fait la largeur du conteneur parent, quelque soit la largeur du contenu, ok ? Ca, c'est pareil sous SF et FF. Maintenant, si on affect à ce div le style float (right ou left), le div ne fait plus que la largeur de son contenu. Là encore, c'est pareil sous SF et FF.
Mais maintenant, si j'imbrique ce div en float dans un autre div en float, ben sous Safari, ils sont tous les deux réduit à la largeur du contenu, alors que sous FF, le div parent fait la largeur de la fenêtre. Et seulement quand le div imbriqué est float à droite.
Je suppose que c'est FF qui a raison, mais j'aurais voulu comprendre pourquoi, et éventuellement, comment faire pour avoir sous FF des div adapté à la largeur du contenu, y compris dans le cas des div imbriqués.
Le code incriminé :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>text bloc</title>
<style type="text/css" title="text/css">
<!--
div {
	border: 1px solid black;
	margin: 5px;
}
.test1 {
	float: left;
}
.test2 {
	float: right;
}
-->
</style>
</head>
<body>
<div class="test1"><div class="test1">un div imbriqué float à gauche</div></div>
<div class="test1"><div class="test2">un div imbriqué float à droite</div></div>
</body>
</html>

testable là
Modifié par mouloud (08 Sep 2006 - 10:55)
Je ne vois pas de bug sur Firefox.
Ou en tout cas dans le sens normal des choses.

Tu demandes à Firefox de sortir une boîte du flux normal et de la faire flotter le plus à droite.. hors la div parente elle ne flotte pas à droite, il l'étire donc pour permettre au flottant d'être sur la droite.

Normal que pour la fenêtre gauche ça ne change rien, par défaut la position s'établit sur la gauche Smiley smile

Nb : pour le cas de la largeur du contenu, je ne vois pas de possibilité là. A part fixer une largeur pour la div parente.
Modifié par Paul-Hewson (08 Sep 2006 - 11:10)
Benjamin D.C. a écrit :
Juste par curiosité: quel est l'intérêt d'imbriquer comme ça des divs? Smiley confuse

Ben heu... il y en a plein, non ? tu n'imbrique jamais les divs ?
Paul-Hewson a écrit :
Je ne vois pas de bug sur Firefox.

je n'ai jamais dis que c'était un bug. Je dis juste que c'est pas pareil sous safari
a écrit :

Ou en tout cas dans le sens normal des choses.

Tu demandes à Firefox de sortir une boîte du flux normal et de la faire flotter le plus à droite.. hors la div parente elle ne flotte pas à droite, il l'étire donc pour permettre au flottant d'être sur la droite.

Oui non, c'est sûr. En simplifiant mon modèle, j'ai trop simplifié. En fait, le problème se pose aussi en flottant les deux boites à droite :

.test1 {
	float: left;
}
.test2 {
	float: right;
}


<div class="test1"><div class="test1">un div imbriqué float à gauche</div></div>
<div class="test2"><div class="test2">un div imbriqué float à droite</div></div>

en test là
voilà ce que ça donne chez moi sous Firefox et IE:
upload/8443-Image1.png
et ce que ça donne sous Safari et Opera 8.5 :
upload/8443-Image2.png
Modifié par mouloud (08 Sep 2006 - 11:46)
Et pour répondre à la question de Benjamin, voici une version un peu moins simplifiée de mon code qui montre pourquoi j'ai besoin de div imbriqués.
la page
Si quelqu'un à une idée pour obtenir ça sous Firefox :
upload/8443-Image3.png
Et bien sûr sans spécifier de width.
- Pourquoi le div imbriqué ? pour pouvoir spécifier au div parent un clear:both, pour éviter qu'en cas de fenêtre trop grande, le menu s'intercale entre le logo et le bandeau.
- Pourquoi des div et pas des span pour les menu_item ? pour pouvoir spécifier une marge entre les éléments.

Mais bon, je débute en mise en page css, il y a donc peut-être une autre solution...
Salut,


Tu as en effet un niveau de div en trop , qui ne sert à rien.

La chose qui fait passer un cran en dessous l'element auquel tu attribut float : right, c'est qu'il doit etre placé dans le code html avant.

Ton lien du précedent post ne mène nulle part...


.test1 { float: left; }
.test2 {  float: right;}


  <div>
<p class="test2">du texte imbriqué qui float à droite</div>
<p class="test1">du texte imbriqué qui float à gauche</div>
        <hr />     <!--lui donner clear: both en css-->
          </div>


Des explications précises sur les float et les clear ici
Modifié par Hum (08 Sep 2006 - 12:38)
Hum a écrit :
Salut,
Ton lien du précedent post ne mène nulle part...

Ah oui, tiens, j'avais oublié d'uploader... Smiley ravi C'est corrigé.

Mais je comprends pas bien ta réponse...
ah oui, non si, je comprends ta réponse.
Bien sûr que dans mon exemple ultra-simplifié, l'imbrication ne sert à rien. Là n'est pas la question. Je peux mettre le code complet de ma page, mais ça risque de compliquer les choses. C'est pour ça, qu'en général, je poste une version simplifiée de mon code, où il ne reste plus que le problème qui nous intéresse.
Bon, mais en l'occurence, mon deuxième exemple moins simplifié devrait te montrer pourquoi j'ai besoin d'imbriquer les div (je ne penses pas pouvoir faire ça avec des <P>, et de toute façon, le problème se poserait quand même, je crois.)
Mouloud,
s'il te plaît essaye d'éviter les :
a écrit :
ah oui, non si, je comprends ta réponse.

Car là c'est à mon tour d'avoir du mal à piger si tu as pigé ! Smiley biggol

<p> est une balise block comme <div> sauf que <div> est neutre, généralement on utilise <p> pour inserer du texte...

Bref, je t'ai bricolé rapidos un petit fichier qui je pense reproduit ce que tu voulais, j'ai allongé la taille du conteneur bandeau, sinon MSIE faisait des siennes, vois, et essayes d'adapter à tes besoins...

Ah, au lieu de faire ça :


.menu_item {
	float : right;
	margin-left: 20px;
}



  <div id="menu">
          <div class="menu_item">menu1</div>
          <div class="menu_item">menu2</div>
          <div class="menu_item">menu3</div>
          <div class="menu_item">menu4</div>
     </div>


Tu devrais faire comme ça :


#menu_item { float: right; }

div#menu_item ul li {
	display: inline;  
	margin-left: 20px;
}



         <div id="menu_item">									<ul>
     <li><a href="#" title="">menu 1</a></li>
     <li><a href="#" title="">menu 2</a></li>
     <li><a href="#" title="">menu 3</a></li>
</ul>
              </div>


Un menu est une liste de lien, je t'ai donc fait une liste de liens...



Voici ton fichier "retouché"

N'oublie pas d'aller faire un tour dans la FAQ, beaucoup de solutions et informations importantes s'y trouvent.


Smiley cligne
Ah oui, ok, pas bête, le coup de regrouper dans un div général...
pour le coup des <li>, je pensais qu'on ne pouvait pas donner de marge à des éléments online, mais j'avais visiblement faux.
Cela dit, ça marche dans mon cas, mais ça ne marcherait pas si pour une raison ou une autre, le menu devenait plus long que le bandeau. (ou le bandeau plus petit que le menu). Alors qu'avec mon système, pas de problème, chaque élément est indépendant, et peut grossir dans la limite des places disponibles. Alors que ton système contraint le menu à une taille arbitraire de 600px.

Mais au final, qui a raison sur mon exemple ? Safari et Opera, ou IE et Firefox ?
J'ai finalement comme l'impression que c'est un petit bug de Firefox, non ?
d'ailleurs, en fait, il suffit de donner un width à mon div menu, et ça a le même effet que toi. Le remplacement des div internes par un système de liste, c'est sûr que c'est mieux, mais c'est pas ça qui change le fonctionnement bizarre de Firefox...
a écrit :
Mais au final, qui a raison sur mon exemple ? Safari et Opera, ou IE et Firefox ?
J'ai finalement comme l'impression que c'est un petit bug de Firefox, non ?


Personne je pense, ils interprètent différèrent et plus ou moins en respectant les standards, a toi de pondre un code correct et valide, de faire quelques ajouts ou modifs si un "mauvais élève" fait de trop gros écarts...

a écrit :
en fait, il suffit de donner un width à mon div menu

...oui.

Pour le menu <ul>, il n'est pas question de remplacer, c'est un formatage qui convient mieux, les balises ont un sens.

Par rapport au contenu à insérer, tu utilises là plus approprié.

<div> et <span> sont dénuées de sens.

Si tu considères ton problème comme résolu, n'oublie pas de rajouter [résolu] devant le titre de ton sujet.

Smiley cligne
a écrit :
pour le coup des <li>, je pensais qu'on ne pouvait pas donner de marge à des éléments online, mais j'avais visiblement faux.
Non, tu avais en partie raison ... Mais les éléments <li> sont-ils vraiment de type inline, mmmh ?
Sopo a écrit :
Non, tu avais en partie raison ... Mais les éléments <li> sont-ils vraiment de type inline, mmmh ?

ben à partie du moment où on leur donne la propriété inline, je suppose que oui, non ?