CSS et flottement

bonjour,

Je développe une interface web pour un logiciel à l'irisa et voilà maintenant que le fond marche bien , je m'interesse à la forme.

http://shibbylinux.free.fr/camelis.html

ici c'est un peu un screenshot de mon interface
et voici le css :
http://shibbylinux.free.fr/style.css

Ce que je voudrais faire :
Si vous changez la taille de la fenêtre horizontalement, vous verrez que la zone objet (c'est à dire la zone en bas à droite) ainsi que l'entête objet (zone juste au dessus) passe en dessous de la zone feature (zone à gauche en bas) et de son entete également.
J'ai essayé de faire
display:block
clear:both

pour ma zone objet mais rien n'y fait.

J'ai des préconditions pour la solution : elle ne doit pas changer le code xhtml, en effet j'y tiens car pour le générer c'est un peu coton c'est fait via ocsigen (si quelqu'un connait... mais ça m'étonnerait )

Comment je peux éviter que ça passe dessous comme ça ?
Si vous avez d'autres questions je suis à vous

shibby a écrit :
Comment je peux éviter que ça passe dessous comme ça ?

Il devrait être possible d'indiquer une largeur minimale (min-width) pour un conteneur global qui contiendrait toute l'interface, par exemple.

Etrange ça change rien :s
j'ai mis à jour les liens tu peux vérifier


http://shibbylinux.free.fr/style.css
http://shibbylinux.free.fr/camelis.html

Je comprend pas

shibby a écrit :
Etrange ça change rien :s

Je n'avais pas exploré le détail. À priori, je dirais que ça vient du fait que tu utilises le positionnement fixe pour placer tes blocs.

À priori, le positionnement absolu serait plus adapté. Voire l'utilisation de display: table-cell si c'est possible. Là, ça va dépendre de la structure du code HTML, et des navigateurs visés pour cette interface (pour information, avec le positionnement fixe c'est mal barré pour Internet Explorer 6 qui ne le comprend pas).

pour le navigateur c'est firefox qui sera utilisé
Et malheureusement le passage en absolute ne change :s

shibby a écrit :
pour le navigateur c'est firefox qui sera utilisé

L'utilisation de display: table et display: table-cell peut être un choix intéressant.

Sinon, pour le positionnement absolu, on peut dimensionner et placer un bloc en lui passant plusieurs paramètres de positionnement:

div#machin {
	position: absolute;
	top: 30%;
	bottom: 45%;
	left: 40%;
	right: 0;
}

Il me semble que c'est compatible tous navigateurs modernes, dont IE7 (pas IE6, trop vieux).

À vue de nez, cette utilisation du positionnement absolu est ce qu'il y a de plus souple.

Franchement quelquechose m'échappe,
j'ai un div "interface" qui comprend toute la page,
et il a un mind-width à 800px,
ma zone objet est en absolute et est juste en dessous de "interface", je lui met left:33%;
et plutot que de regarder "interface" il se met à 33% de mon écran :s, je vois bien mon div "interface" qui s'arrête à 800 mais le reste de ma page continu à bouger alors que je positionne par rapport à ce div.

edit :
j'ai fait quelques modif et les liens sont à jour,
je te remercie de ton aide déjà
Modifié par shibby (21 Sep 2007 - 10:41)

shibby a écrit :
Franchement quelquechose m'échappe

Oui, en l'occurrence il s'agit des caractéristiques des positionnements fixe et absolu.

Le positionnement fixe se fait par rapport aux limites du viewport (zone de visualisation) uniquement, et ignore tous les éléments parents ou ancêtres de l'élément.

Le positionnement absolu se fait par rapport aux limites du plus proche ancêtre positionné de l'élément. Un élément est dit positionné quand la valeur de la propriété position pour cet élément est "relative", "absolute" ou "fixed".

Tout cela est bien entendu précisé dans diverses ressources en ligne, notamment sur Openweb, et bien sûr dans les spécifications CSS 2.1 qu'il peut être utile de consulter (de la même manière qu'un développeur PHP aura tendance à consulter la documentation officielle du manuel PHP, par exemple...).

shibby a écrit :
j'ai un div "interface" qui comprend toute la page,
et il a un mind-width à 800px,
ma zone objet est en absolute et est juste en dessous de "interface", je lui met left:33%;
et plutot que de regarder "interface" il se met à 33% de mon écran

div#interface {
	[b]position: relative;[/b]
	min-width: 800px; /* pas 760px plutôt? */
}

Modifié par Florent V. (21 Sep 2007 - 10:57)

le relative change la donne en effet,
maintenant ça limite bel et bien le débordement (j'ai pas paufiné mais je vois que ça arrête de partir en dessous après 800px),
mais le résultat est étrange également car ça me change la hauteur de toute ma page :s, j'ai mis
height: 100% pour "interface" mais rien n'y fait, ma hauteur est tout petite...

Mes liens sont à jours.

Sinon pour ce que tu dis sur la documentation, je suis désolé de t'apparaitre comme quelqu'un qui ne lit pas la doc. Ce que tu me dis sur les différences entre absolute et fixed je le savais déjà, mais c'est lorsque je suis en absolute et qu'il prend en compte la taille de l'écran que je m'affole. J'ai passé du temps à lire un bouquin sur le css avant de venir ici parceque je n'arrivais pas à faire tout ce que je voulais. Mais merci de me dire de lire la documentation avec autant de patience (moi si je pensais être en face de quelqu'un qui ne lit rien et qui demande tout, je ne pense pas que j'aurais répondu de manière aussi détaillé que toi)

Merci encore de ton aide.

ps : pourquoi ma hauteur diminue maintenant ? C'est dommage parceque j'aurais pas ça ça serait finit :s

C'est dingue j'arrive pas à changer la taille de ma div "interface"

là en local j'ai mis ça :


#interface{
position: relative;
width:100%
height:1700px; /* j'ai mis 100% avant, c'était pour tester un truc abérant et grand*/
min-width: 800px;
border:solid;
}

mais ça ne change rien le div est tout petit.

et si je fait : position: fixed
alors là même ma largeur est toute petite
(je comprend pas qu'il y ai une différence ici entre fixed et relative)

shibby a écrit :
(je comprend pas qu'il y ai une différence ici entre fixed et relative)

Heu... tu ne comprends pas que, les deux étant totalement différents, les résultats obtenus soient différents? Là, c'est moi qui ai du mal à suivre ta logique.

Par ailleurs, ta page en ligne n'a pas l'air à jour.

Et pour un bloc de hauteur 100%, la FAQ du forum en parle.

Florent V. a écrit :

Heu... tu ne comprends pas que, les deux étant totalement différents, les résultats obtenus soient différents? Là, c'est moi qui ai du mal à suivre ta logique.

Oui les deux sont différents... mais pour moi (et je me trompe certainement) ça concerne le positionnement et pas la taille. Je ne spécifie pas la hauteur et fonction que je sois en relative ou fixed ça change. Donc oui je suis désolé mais ça ça m'échappe

J'ai mis ma page à jour,
je vais regarder la FAQ

shibby a écrit :
Je ne spécifie pas la hauteur et fonction que je sois en relative ou fixed ça change. Donc oui je suis désolé mais ça ça m'échappe

Là encore, méconnaissance de la propriété CSS position. As-tu lu les articles d'Openweb à ce sujet?
Pour rappel, les éléments positionnés en fixe ou absolu sont retirés du flux du document, et ne sont donc plus pris en compte par les autres éléments pour leur dimensionnement ou leur positionnement.

Comme j'ai du mal à travailler sur ta page en ligne pleine d'éléments parasites (des form au contenu caché?), j'ai fait une page simple qui illustre l'utilisation du positionnement absolu pour le positionnement et le dimensionnement des blocs:

<!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" />
	<title></title>
	<link rel="stylesheet" type="text/css" media="screen" href="" />
	<style type="text/css">
	html, body {
	  margin: 0;
	  padding: 0;
	  height: 100%;
	}

	body {
	  font-size: 50px;
	  color: white;
	  background: #444;
	}

	#interface {
	  position: relative;
	  min-width: 760px;
	  height: 100%;
	  min-height: 500px;
	  margin: 0;
	}

	/* ZONE MENU */
	#zoneMenu {
	  position: absolute;
	  top: 0;
	  bottom: 80%;
	  left: 0;
	  right: 0;
	  padding: 5px 10px;
	  border: solid 5px black;
	  overflow: auto;
	  background: blue;
	}

	/* ZONE FEATURE */
	#zoneFeature {
	  position: absolute;
	  top: 20%;
	  bottom: 0;
	  left: 0;
	  right: 70%;
	  padding: 5px 10px;
	  border: solid 5px black;
	  overflow: auto;
	  background: green;
	}

	/* ZONE OBJET */
	#zoneObjet {
	  position: absolute;
	  top: 20%;
	  bottom: 0;
	  left: 30%;
	  right: 0;
	  padding: 5px 10px;
	  border: solid 5px black;
	  overflow: auto;
	  background: red;
	}
	</style>
</head>

<body>
<div id="interface">
	<div id="zoneMenu">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
	</div><!-- #zoneMenu -->
	<div id="zoneFeature">
		<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>
	</div><!-- #zoneFeature -->
	<div id="zoneObjet">
		<p>Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
	</div><!-- #zoneObjet -->
</div><!-- #interface -->
</body>
</html>

À copier-coller dans un fichier .html et à visualiser avec un navigateur moderne (IE7, Firefox, Opera, Safari, Konqueror...).

PS: j'ai poussé la taille du texte pour avoir un contenu important et tester les barres de défilement internes.

bah toi quand tu aides quelqu'un tu aides

c'est bon ça marche, franchement merci beaucoup, cette page concernait un projet assez compliqué réalisé en ocsigen. (ça génère du xhtml à partir de code Ocaml ce qui explique des choses pas très joli et un peu parasite comme tu dis). Et tout le long du projet le but était que ça marche, pas que ce soit beau, mais mon stage finit aujourd'hui, et là du coup c'est pas forcément beau (ça ne l'est pas mais bon j'ai pas de gout donc...) mais au moins ça ne fait plus n'importe quoi.


Merci beaucoup et bonne journée.

Sans vouloir abusé,
maintenant tant qu'à faire j'aurais voulu embellir la chose en mettant différentes teintes de couleur plutot que du rgb(211,211,211) partout

Le truc c'est que je suis daltonien... et du coup ça me passe un peu au dessus moi les couleurs

Vous metteriez quoi comme couleur ?
(faut me donner un code, si je dois choisir entre des teintes je risque de faire des bétises)
Modifié par shibby (21 Sep 2007 - 14:02)