28218 sujets

CSS et mise en forme, CSS3

[Résolu] Flottant qui ne flotte pas vraiment

Pages :
Administrateur
(reprise du message précédent)

Eldebaran a écrit :
Question bête : pourquoi est-ce que l'on aboutit à ce résultat avec overflow: hidden; ?

Justement, c'est aussi un peu ce que j'attends avant de définitivement clore le sujet.
Modérateur
bonsoir,

l'overflow:hidden ou auto ; a le même effets que display:inline-block; (ou zoom:1 ou height/width quelquechose , ...) , il active , cette effet de "haslayout" , qui ne semble pas que "propre a IE.
Alors comment on appelle t-on ça pour les autres ... je n'en sais fichtre rien , toujours est-il que le flottant est alors pris en compte par le conteneur (qui le cotoie ) et plus seulement par le contenu .

++

A propos , il me semble que IE7 beneficie des même defauts que ses predecesseurs pour ce qui du "haslayout or not", l'underscore , pourrait bien lui convenir aussi Smiley smile


edit , j'avais deja , user de ses particularite dans une proposition de code pour un topic de "vero" :
http://forum.alsacreations.com/topic-4-18594-1-resoluEnchainement-de-4-blocs-dont-2-flottants.html
Topic ou je passais div en p et p en span , sans pour autant reprendre son css original , je n'avais pas poussé le bouchon jusque la.

dans un autre topic recent , je propose cette solution , puis j'emet une mise en garde sur les effets "surprenant" possibles .
http://forum.alsacreations.com/topic-4-18819-1-Firefox-2--IE-7--et-c-est-la-cata-.html

Bon , en fait , j'ai souvent bien du mal a etre clair .
bonsoir
Modifié par gcyrillus (31 Oct 2006 - 21:38)
gcyrillus a écrit :

A propos , il me semble que IE7 beneficie des même defauts que ses predecesseurs pour ce qui du "haslayout or not", l'underscore , pourrait bien lui convenir aussi Smiley smile


Je n'ai pas compris ce que tu as voulu dire !!!

Au contraire il me semble bien qu'avec IE7 beaucoup de bug liés au haslayout ont disparus.
Modérateur
oui en effet , mais il me semble que cela est bien l'effet recherché , ... d'une autre maniere , car le inline-block , semblerait bien etre suffissant pour opera , je crois que je vais tester ça , je n'ai pas suffisament creuser la question , a propos de ce "inline-block" , plein de surprises.

je fais un test pour voir .



++

bon , le display:inline-block ne donne pas de resultat valable dans opera dans ce contexte (le contenu n'est pas sufisament important dans les p ), mais mon IE7 en stand alone (pas la derniere mouture) ne bronche pas, le inline-block lui convient , il semble toujours le gerer a la mode "microsoft".
Difference remarqué entre IE et opera/ff :
les marges laterale a p , ne sont pas appliqué contre le flottant dans IE , a l'opossée une marge a gauche sur le flottant est prise en compte par IE .. et les autres.
Opera reagit mal si une marge externe laterale est donnée a p .
IE7 se passe du inline-block si le overflow est donné.

ne m'en veut pas raphael Smiley smile , je met le code en test la , car ff me pourri le source en enregistrant en local la pge test3.html (du -moz-truc chose a la pelle) , j'imagine que je ne suis pas le seul.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#rightcontentsummary {
	background: rgb(255, 255, 255) none repeat scroll 0%;
	float: right; 
	width: 200px; 
	margin-right: 10px; 
}
div#layout p {
	border: 1px solid red; 
	background: green none repeat scroll 0%; 
	overflow: hidden;
	_display:inline-block;
}
</style>
<title>test sur layout</title></head><body>
<div id="content">
  <div id="leftcontentsummary">   
    <div id="rightcontentsummary" >
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </div> <!-- end rightcontentsummary -->
   <div id="layout">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
   </div>
  </div> <!-- end leftcontentsummary -->
</div> <!-- end Content -->
</body>
</html>


Je suis tres curieux de l'avis des autres sur ces comportements ...

++
Modifié par gcyrillus (31 Oct 2006 - 23:16)
Pages :
Sujet clos
Aller à