28173 sujets

CSS et mise en forme, CSS3

[RESOLU] - Flottement d'élements adaptable avec IE

Petite question concernant le positionnement de deux éléments... je commence à avoir des doutes sur la faisabilité avec IE.

Sur cette page et uniquement avec IE (le code html est spécifique pour lui) : http://essais.eurower.net/

J'ai placer le contenu (en largeur fixe) en début de page et les informations complémentaires (celle en couleur unie) en dessous pour ça fonctionne en 800x600.

J'aimerai savoir il est possible de faire flotter le module d'informations complémentaires à droite du contenu de tel sorte qu'il ce place en dessous si la résolution de la fenêtre est trop faible.

Après plusieurs tentative, je me retrouve constamment avec des ascenseur horizontaux où des plantages du navigateur si j'opte pour une solution javascript pour simuler un min-width.

La question : est ce que c'est envisageable ou doit je jeter l'éponge? Si c'est possible, y a t'il des caractéristiques particulière à IE à connaitre?

Merci par avance.
Modifié par percherie (24 Jan 2008 - 19:30)
Administrateur
Bonjour,

merci d'éditer le titre du sujet pour qu'il ait un rapport avec la question ou le problème, un titre plus précis Smiley cligne (ça se fait en éditant le 1er message du sujet)

Felipe
En effet, il faut dire que je ne voyait aucun titre potable, même celui que j'y choisi est étrange.

Par contre j'ai trouver une solution tout bête, en me rappelant d'un conseil lu sur pompage.net j'ai choisi une "contrainte" simplificatrice.

J'ai fixé le bloc de largeur fixe à gauche avec une marge fixe. Celui ci est flottant à gauche.
Plus loin dans le flux, il y a un autre bloc d'une largeur plus faible.

ce qui fait qu'avec une résolution inférieure à 1024x768 de fenêtre le second bloc ce place en dessous. Avec une résolution supérieure ou égale, il ce place à droite du bloc flottant.

Cette solution à le mérite d'utiliser les bug d'IE, chose qui ne fonctionne pas correctement avec FF qui de toute façon à une code html différent à manger.

Résultats, avec IE uniquement : http://essais.eurower.net/

Une visualisation avec FF donnera une autre présentation plus fluide.

En espérant que ça serve à d'autres utilisateurs.

Passez une bonne soirée
Désolé, rien compris. Quels sont les contraintes de structure ? Quels sont les objectifs précis comportement du rendu ? Quel est le problème, surtout ? Peux-tu fournir un exemple générique, sans styles d'enjolivement ?
Modifié par Laurent Denis (24 Jan 2008 - 19:52)
percherie a écrit :
Cette solution à le mérite d'utiliser les bug d'IE, chose qui ne fonctionne pas correctement avec FF qui de toute façon à une code html différent à manger.


Gné ?

Des HTML différents selon les navigateurs ? Commence mal, ça.
Oups désolé, j'ai le chic de compliquer les choses simple... je vais donc reprendre en suivant tes conseils, ce qui suit est la solution qui semble fonctionner avec IE

HTML
<body>
<div id="conteneur"> 
  <div id="contenu">ici le texte du contenu</div>
  <div id="supplement">ici celui du module de droite</div>
</div>
</body>


CSS
<style type="text/css">
<!--
#conteneur {
	margin-left: 210px;
}
#conteneur #contenu {
	background: #00FF00;
	float: left;
	width: 550px;
	clear: both;
	height: 300px;
}
#conteneur #supplement {
	background: #E4D9CB;
	float: none;
	width: 185px;
	margin-right: auto;
	margin-left: auto;
	height: 400px;
}
-->
</style>


L'idée était donc de placer la colonne à droite si il y a assez de place (plus de 1024x768 comme résolution), dans le cas contraire elle doit ce placer en dessous (souvent 800x600).

Même si ça fonctionne avec IE je ne comprend pas pourquoi FF superpose les deux bloc. Quoi qu'il en soit, FF voit autre chose, la colonne est avant le contenu dans le flux.

Fournir un code html spécifique pour IE est pour l'instant l'unique solution qui semble fonctionner, pour ça, j'utilise un peut de PHP.

Le but recherché à l'origine était de centrer les deux blocs ensemble puis faire en sorte que la colonne de droite prenne toute la largeur si elle passe en dessous aurait été parfait mais j'ai du fixer quelques contraintes.

J'ai donc du accepter de fixer le contenu à gauche et laisser la colonne en largeur fixe. C'est ça que j'ai appeler une contrainte simplifiante.

Je suis conscient que je m'approche d'une usine à gaz et même si ça fonctionne, quelques conseils ne serait pas inutile.

Ps : je viens de me rendre compte que la version en ligne n'était pas à jour, maintenant on peut voir ce que ça donne.
Le comportement de FF est normal.

Dans le comportement par défaut d'un flux, celui-ci ne se place en fait pas "à côté" du flottant qui le précède, comme on le dit souvent abusivement. Le flux s'étend sur toute la largeur du bloc conteneur, et commence donc en réalité "sous" le flottant. Seuls les boîtes de ligne du contenu de ce flux se placent "à côté" du flottant, si l'espace restant est suffisant. On voit donc, tout à fait normalement, le background (et les bordures éventuelles) du flux "sous" le flottant.

Pour éviter ce comportement et forcer le flux à se limiter véritablement à l'espace restant, on utilise la propriété overflow (mets un overflow:auto à #supplements).

Mais attention, dans ton exemple, les choses sont alors perturbées par les margin auto inutilement données à supplements. Celles-ci sont à supprimer.
Merci pour l'explication. Elle à le mérite d'être clair et de préciser le comportement d'un éléments en ligne situé après un éléments flottant.

Petite question, après avoir spécifier overflow:auto à #supplements, je me retrouve donc bien avec celui ci à coté de #contenu.
En cas de diminution de la fenêtre, #supplements provoque l'apparition d'un ascenseur horizontal (ce qui est normal).

Existe il un solution pour faire en sorte que #supplement ce place en dessous de #contenu quand il n'y a plus assez de place?

Honnêtement j'en suis pas très sur mais la question à le mérite d'être posée.
Sujet clos
Aller à