heu float

heu float - HTML/CSS - Programmation

Marsh Posté le 16-12-2002 à 18:49:50    

ah bin ca, je test les float pour voir comment ca marche et j'ai un truc bizarre.  
 
 

Citation :

<body>
<div id="Layer1" style="float:right; width: 10%; height:100%; z-index:2; background-color: silver;">
  div flottant droite</div>
<div id="Layer2" style="float:left;  z-index:3; width: 10%; height: 100%; background-color: silver;">div  
  flottant gauche </div>
</body>

 
 
Pourquoi sous IE c'est nickel et sous Mozilla la hauteur du div est pas de 100 % de la page, mais juste la hauteur du texte    
Me dites pas que yá encore un truc que j'ai pas capté dans la faq    :pfff:


---------------
Apprenti néo-shreddeur fusionniste de chambre | ♫ Blind test pour zikos
Reply

Marsh Posté le 16-12-2002 à 18:49:50   

Reply

Marsh Posté le 16-12-2002 à 19:05:15    

la ou chui vert, c'est que tout le monde dit que les CSS marchent mieux avec mozila que sous IE. En plus dans la FAQ il est dit que float a des probs avec IE...  
et là mon float marche sous IE et pas sous Moz. *se tappe la tête contre les murs*
 
Dites moi si ca viens de mon code ou de mozila svp  :jap:


---------------
Apprenti néo-shreddeur fusionniste de chambre | ♫ Blind test pour zikos
Reply

Marsh Posté le 16-12-2002 à 19:10:18    

panchopa a écrit :

Me dites pas que yá encore un truc que j'ai pas capté dans la faq    :pfff:


Si ;)


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

Marsh Posté le 16-12-2002 à 19:18:58    

arg  :pt1cable:  
 
*saute partout en se cognant contres les murs capitonnés de sa cellule*
 
Bon bon, alors c'est ma faute j'ai pas compris, pour faire pénitence je vais chercher tout seul pendant des heures en me fouettant avec des orties fraiches.  
 
Une fois cela finit, je viendrais vous poser une autre question sur les floats.  
Cette question sera celle-ci.  
 
 

Citation :

Pour une boîte donnée flottant à gauche, celle ci suivant dans la source un élément ayant déjà généré une autre boîte flottant à gauche, le bord externe gauche de cette boîte doit venir à droite du bord externe droit de la boîte précédente, ou, sinon, son sommet doit venir en dessous du bas de la boîte précédente. Inversement et de la même façon pour des boîtes flottant à droite ;  

C'est quoi ce  OU SINON  de branleur !  :pfff:  :pfff:  
Nan mais sérieux et comment on est censé faire avec ca, le positionnement du bloc va dépendre du sens du vent ou de l'âge du capitaine  :pt1cable:  
C'est n'importe quoi, alors hin il peut frimer c'te CSS nan mais :na:  :D

Reply

Marsh Posté le 16-12-2002 à 19:26:37    

panchopa a écrit :

C'est quoi ce  OU SINON  de branleur !  :pfff:  :pfff:  


C'est au cas où on a pas assez de place en largeur pour mettre les 2 boîtes cote à cote. Dans ce cas la seconde boîte va se mettre en dessous.
 
Ce qui permet de faire des design fluides. Au lieu d'avoir une barre de défilement horizontale qui apparait si la fenêtre est trop étroite, les boites viennent se mettre  les unes sous les autres. C'est une approche tout à fait valable je trouve.


Message édité par gm_superstar le 16-12-2002 à 19:27:13

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

Marsh Posté le 16-12-2002 à 20:18:54    

ha voui expliqué comme ca je comprend  :)  
 
d'ailleurs comment tu sais ca, moi je le vois écrit nul part. C'est par des tests persos ? :)  
 
J'ai plus un seul cheveux, je mes les suis tous arrachés sur ce pseudo div de 100% et je capte toujours pas   :heink:

Reply

Marsh Posté le 16-12-2002 à 20:26:36    

panchopa a écrit :

ha voui expliqué comme ca je comprend  :)  
 
d'ailleurs comment tu sais ca, moi je le vois écrit nul part. C'est par des tests persos ? :)


Oui en faisant des tests et en lisant attentivement les specs.

panchopa a écrit :

J'ai plus un seul cheveux, je mes les suis tous arrachés sur ce pseudo div de 100% et je capte toujours pas   :heink:


C'est-à-dire ?


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

Marsh Posté le 16-12-2002 à 20:36:57    

cf mon premier post, le DIV a qui je demande d'occuper 100% de la hauteur fait bien son office avec Ie, mais pas avec Moz.  
 
Et comme il parait que moz est compliant, je suppute avoir fait une erreur dans mon code, que IE transforme en bon code  :ouch:

Reply

Marsh Posté le 16-12-2002 à 20:39:26    

Et en ajoutant  
 
body {
  height: 100%;
}
?
 
PS : c'est IE qui a tord ;)


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

Marsh Posté le 16-12-2002 à 21:01:45    

nan même pas. Mais peut-être les div en float ne peuvent pas avoir une taille en pourcentage.
 
Un truc marrant : regardez cette page sur IE puis sur Moz :  http://panchopa.free.fr/Untitled-3.htm  
 
*se pend*
 
ca me rapelle le jeu des 7 erreurs de télépoche :sarcastic:
 
P.S : pour le bloc jaune, je viens de comprendre le truc. IE l'interprête comme faisant partit du flot, et Moz l'en sort.


Message édité par panchopa le 16-12-2002 à 21:51:55
Reply

Marsh Posté le 16-12-2002 à 21:01:45   

Reply

Marsh Posté le 16-12-2002 à 23:42:51    

Oui j'ai l'impression qu'un flottant ne peut avoir qu'une hauteur absolue. Pas relative (en %). Cela peut se comprendre : une hauteur relative est fonction de la hauteur de son conteneur. Or la hauteur d'un élément qui contient un flottant peut tout à fait être dissociée de la hauteur du flottant.
 
Par exemple, si j'ai un conteneur et un menu en flottant :
 
 
<div id="conteneur">
  <div id="menu">
    <p>plop</p>
    <p>plop</p>
    ...
    <p>plop</p>
  </div>
</div>
 
Le div conteneur sera de hauteur nulle car il ne contient rien d'autre que le menu qui est un flottant et qui donc sort du flux normal. Dans ce cas, si la hauteur du menu est un pourcentage elle sera forcément nulle car son conteneur est de hauteur nulle.  
 
Bon cette explication n'est sans doute pas parfaite et j'essayerai de trouver quelque chose de plus convaincant à partir des specs ;)


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

Sujets relatifs:

Leave a Replay

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