Positionnement sans float

Bonjour,

je tente de créer une page pour notre équipe nationale (France pour les français ) et j'en profite pour revoir un peu mes positionnements.
J'avais jusqu'alors mal compris l'intérêt du relative et de l'absolu, ne positionnant tout que par "défaut" et en float pour les menus.

Parfait, sauf que je me retrouve avec la div principale poussée un peu plus vers le bas dès lors que le menu grandit.
Puis-je arriver à mes fins sans float ?
En fait, je ne fais pas ça par principe mais j'ai lu que le float avait été utilisé à tort et à travers alors je me demande si c'est le cas ici.

Ma page de dév est accessible ici :
http://www.footballamericain.com/dev.htm

Merci pour votre aide, comme toujours très précieuse.
Cordialement

Bonjour,

Tu n'a pas l'air très au clair sur le positionnement CSS. Je t'invite à lire le Guide de survie du positionnement CSS.

Il n'y a pas de contrindication majeure à utiliser float pour placer des éléments côte-à-côte. Pour l'utiliser correctement, il suffit de comprendre comment ça marche et d'empêcher les flottants de dépasser de leur conteneur si nécessaire.

Il y a d'autres possibilités en positionnement CSS:
- Utiliser la position absolu (en plaçant des éléments à des coordonnées absolues par rapport à un parent ou ancêtre qui sera en position:relative). Efficace mais radical, ça fonctionne bien pour certaines pages simples mais dès qu'on a une suite de contenus qui doivent se placer les uns sous les autres c'est à proscrire.
- Utiliser display:inline-block pour que les conteneurs se comportent comme des éléments «inline» tout en gardant un formatage de type bloc.
- Utiliser display:table-cell pour simuler un comportement de cellule de tableau (même à partir de simples DIV).

Les deux dernières solutions sont utilisables dans tous les navigateurs modernes, mais pas dans IE7 (et bien sûr pas dans le regretté IE6). Ça explique pourquoi, au cours des dernières années, on a utilisé soit float soit le positionnement absolu pour faire l'essentiel du travail de mise en page.

kileak a écrit :
Ma page de dév est accessible ici :
http://www.footballamericain.com/dev.htm

Je ne sais pas ce que tu essaies de faire au juste, donc je ne peux pas trop te conseiller.
Je peux juste dire que l'utilisation que tu fais du positionnement relatif est une erreur (c'est d'ailleurs l'une des mauvaises pistes que je relève dans le Guide de survie...).

Merci pour tes deux posts.

Disons que je progresse lentement car pas mon coeur de métier et je n'ai pas loisir d'en faire autant que je veux pour réellement être un pro
J'ai d'ailleurs lu et apprécié ton article sur le z-index il y a moins d'une semaine.
C'est là que j'y ai appris les contraintes de "position" nécessaire pour que cette propriété soit appliquée convenablement.

Je vais lire les articles que tu m'as donné et je reviendrais en cas de flou.
Ce que je connais des positionnements vient de là http://openweb.eu.org/articles/initiation_float , on a vu pire je pense

Ce que je veux faire est assez simple. Je veux que mon menu de droite ne fasse pas baisser ma DIV rose centrale quand il augmente. Et je viens d'y arriver. En mettant mon menu en absolu :s

Ta phrase qui me fait le plus paniquer est celle qui dit que je fais un mauvais usage du relatif. Ca m'inquiète. Je ne dois vraiment pas avoir bien compris la philosophie de tout ceci.

merci
Bonne nuit

kileak a écrit :
Ce que je connais des positionnements vient de là http://openweb.eu.org/articles/initiation_float , on a vu pire je pense

Il y a une série de 3 articles sur Openweb pour le positionnement CSS. Il faut lire les trois.
Ensuite tu peux lire les 2 articles sur Alsacréations, ça fait un peu redite mais ça ne fait pas de mal.
Et enfin lire le Guide de survie du positionnement CSS pour avoir des indications sur quoi utiliser et de quelle manière. (Ce dernier article contient des liens vers les 5 articles que je mentionne plus haut.)

À partir de là, tu auras une bonne base de connaissances.

kileak a écrit :
Ta phrase qui me fait le plus paniquer est celle qui dit que je fais un mauvais usage du relatif. Ca m'inquiète. Je ne dois vraiment pas avoir bien compris la philosophie de tout ceci.

Le positionnement relatif permet de déplacer visuellement un élément par rapport à sa position normale. L'espace normalement occupé par l'élément (avant qu'on ne le décale) reste «occupé», justement, et les éléments frères ne viennent pas s'y mettre. C'est pourquoi le positionnement relatif est adapté pour décaler un élément de quelques pixels pour réaliser un effet graphique, mais très rarement adapté pour placer un élément loin de sa position de départ. Dès que tu as un position:relative;top:-200px dans un code, c'est très probablement une bêtise.

(Je dis sensiblement la même chose dans le «Guide de survie...».)

Bonsoir à toutes et à tous,

voici un exemple de ce que l'on peut faire sans le positionnement :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<style type="text/css">
* {
		margin				: 0;
		border				: 0;
		padding				: 0;
}

html {
		overflow			: auto;
}

body {
		background-color	: white;
}

/*----------------------*/
/*     le conteneur     */
/*----------------------*/

div#content {
		background-color	: lightgrey;

		margin				: 5%;
		padding				: 1%;

		width				: 90%;
		height				: 90%;
}

/*-----------------*/
/*     l'image     */
/*-----------------*/

div#content img {
		color				: #DA2127;
		font-size			: 1.6em;
		width				: 600px;
		height				: auto;
}

/*-----------------*/
/*     le menu     */
/*-----------------*/

div#content ul#menu {
		float				: right;
		margin-right		: 50px;
		width				: 100px;
}

div#content ul#menu li {
		background-color	: orange;
		list-style-type		: none;
}

div#content ul#menu li a {
		text-decoration		: none;
}

div#content ul#menu li a:link {
		color				: green;
		text-decoration		: none;
}

div#content ul#menu li a:visited {
		color				: red;
		text-decoration		: underline;
}

div#content ul#menu li a:hover {
		color				: yellow;
		text-decoration		: none;
}

div#content ul#menu li a:active {
		color				: blue;
		text-decoration		: none;
}

div#content ul#menu li a:focus {
		color				: black;
		text-decoration		: none;
}

/*-----------------------------*/
/*     le corps principale     */
/*-----------------------------*/

div#content div#main {
		background-color		: pink;
		color					: darkblue;

		width					: 220px;
		height					: 220px;

		margin-top				: 50px;
}
</style>
</head>
  
<body>
<div id="content">
	<img src="http://www.footballamericain.com/images/images/equipe-de-france/equipe-de-france.jpg"
		 alt="L'équipe de France de football américain"
		 title="L'équipe de France de football américain" />

	<ul id="menu">
		<li><a href="#1">choix 1</a></li>
		<li><a href="#2">choix 2</a></li>
		<li><a href="#3">choix 3</a></li>
		<li><a href="#4">choix 4</a></li>
		<li><a href="#5">choix 5</a></li>
		<li><a href="#6">choix 6</a></li>
		<li><a href="#7">choix 7</a></li>
		<li><a href="#8">choix 8</a></li>
		<li><a href="#9">choix 9</a></li>
	</ul>

	<div id="main">
		<p>ici mon corps de texte central....</p>
		<p>ici mon corps de texte central....</p>
		<p>ici mon corps de texte central....</p>
	</div>
</div>
</body>
</html>

Je ne suis pas un expert en ce domaine. Et en plus, ce n'est pas mon métier !

@+

@fvsch : merci pour ton temps.

Oui j'avais bien lu ces 3 parties et pas qu'une fois.
Mon problème est plus les cas de figure possibles que le cas général. Sur les exemples donnés, souvent simple, c'est limpide, mais dès lors que l'on complexifie (peut être à tort) sa structure de page ça se complique

Typiquement, si tu regardes le site en exemple (pas la page de dev.htm), tu verras que je ne suis pas ou peu en relatif. Mais ayant un problème z-index, j'ai lu ton article et j'y ai appris que seuls les éléments positionnés le prennent en compte. Du coup j'ai fait du relatif sans connaitre le travers que tu m'expliques ici.
Un bon exemple de finesses CSS non assimilées de ma part

@Artemus24 : merci pour ce code
Comme je le disais, je ne suis pas débutant en positionnement mais la complexité des règles et une mauvaise vue d'ensemble font que je me retrouve dans des situations délicates.

J'y retourne... j'ai de quoi lire
Bonne journée

Bonjour Kileak,

je suis aussi débutant et donc j'utilise une technique très simple pour la présentation d'une page. J'utilise pour cela un crayon et une feuille de papier. Et oui, je dessine ce que je veux faire. Au début, on croit que telle ou telle boite sera ici ou là, puis on s’aperçoit que ça ne va pas. Alors je redessine ma page jusqu'à ce que j'ai enfin obtenu quelque chose de présentable. Et crois-moi ce n'est pas toujours facile de savoir ce que l'on veut surtout si on a pas encore les automatismes du métier !

Une autre technique consiste à mettre des boites dans des boites. C'est le principe des poupées gigognes ou russes. D'abord on dispose dans la balise <body> les principaux conteneurs correspondant d'une part à une spécialisation et d'autre part au découpage relatif au dessin de ta page. Exemple : logo, en-tête de page, menu navigateur, corps principale, pied de page ...

Ensuite tu joues avec ta boite. J'accroche à gauche une autre boite qui devient une colonne, à droite une image, au centre un texte qui vient s'enrouler autour de l'image et ainsi de suite...

Concevoir un site web semble facile au premier abord mais rien qu'en consultant ce forum de discussions, tu vas vite t’apercevoir que le b. a. ba. du HTML n'est pratiquement jamais respecté. Alors que penser du CSS et du Javascript ?

C'est un métier et cela s’apprend !

Pour prendre un autre exemple : ce n'est pas parce que l'on sait écrire trois mots sur une feuille de papier que l'on devient le dernier prix Goncourt !

Et bien je constate que beaucoup de gens veulent l'excellence mais ne sont pas prêt à faire l'effort de l'étude.

Attention : ce n'est pas une critique à ton égard car je ne te connais pas du tout. Mais la remarque que je viens de faire est une constatation de mon observation sur tous les forums que j'ai pratiqué. A cela il n'y a qu'un seul remède : lire, lire et relire encore puis enfin faire des exercice !

C'est ce que je fais.

Sinon n'hésite pas à poser des questions !

@+

kileak a écrit :
Du coup j'ai fait du relatif sans connaitre le travers que tu m'expliques ici.

La subtilité c'est que tu peux définir un position:relative;z-index:10; sans pour autant utiliser le positionnement relatif pour placer l'élément. Un exemple fictif:

#test {
  position: relative; z-index: 10; /* Gère uniquement l'empilement */
  float: right; /* Pour placer le bloc */
}

@Artemus24 : ne t'inquiète pas, je ne prends rien mal. On parle d'un métier là, qui n'est pas le mien, donc il y a du pain sur la planche, des gammes à faire et à refaire. Malheureusement, je ne consacre pas le temps que je voudrais ce qui freine mon assimilation.

@fvsch : merci pour la précision. C'est ce que j'ai découvert cet aprem !!! Je l'ai donc appliqué avec succès sur ma frontpage. Progresserais-je ?

Bonne nuit à tous les deux.

Bonsoir,

je reprends le fil de ce post. Je pense avoir pas mal progressé grâce aux différents tuto sur ce site ou sur openweb principalement.
J'ai refait la front de mon site sans flottant. Mais... avec un jeu de top:-30px, de position:absolute ou relative et de margin-left:650px...
Problème pénible est que dès lors qu'on remonte des blocs, il se crée un espace vide avec le bloc du dessous que l'on ne peut rattraper qu'avec un autre top:-30px.

Le problème de cette technique est de savoir si c'est la bonne. Je ne trouve pas cela forcément intuitif par rapport à un "bête" float.
D'ailleurs le discours est peu clair (mon avis). On nous présente des tuto pour faire des menus à x colonnes en mode float puis un article ici même qui explique que les floats sont mal utilisés et présente un "comment faire" des colonnes sans les floats. J'en perds le peu de latin que j'ai appris il y a bien longtemps

J'ai donc décidé de réintégrer une dose de float pour mon menu de droite (image + colonnes news). Ce n'est pas en ligne actuellement.
Là je suis tombé sur un problème curieux que vous pourrez surement expliquer. J'ai réussi à le reproduire facilement avec l'inspecteur embarqué dans Chrome :
La page est : http://www.alsacreations.com/xmedia/tuto/exemples/3colonnes/exemple-2.html

Supprimer les tags HTML de manière à n'avoir plus que ceci :

<body>	
	<div id="colonne2">
		<h2>Code CSS</h2>
	</div>
	
	<div id="centre">
		<h2>Explications</h2>		
	</div>
</body>

La colonne2 est un float à droite. Le centre n'est pas positionné.
Dans la CSS, ajouter une margin-top à 150px (ou plus) pour la div #centre.
Là tout fonctionne logiquement.
Le centre est à 150px du haut de la page et colonne2 est bien calée en haut à droite.
MAIS, et c'est là que ça se corse : supprimer le padding:1em; qui est placé sur le body et constater que la colonne2 est aussi déplacée à 150px du haut et se retrouve au même niveau que #centre.

Je ne comprends pas ce comportement. Je l'ai tout d'abord constaté sur mon site mais vu l'imbrication de blocs j'ai cherché un cas simple pour reproduire . Pour contourner le problème, je peux :
1- mettre un padding:1px; au conteneur père
2- mettre le conteneur père en absolu (marche dans mon cas où le père est un div et non body)
3- mettre #centre en absolu

Auriez-vous une explication ?

Voila, j'ai été un peu long et pas forcément très clair, désolé si ça a été le cas.

Merci d'avance pour les conseils de pro.
Bonne nuit

Bonjour,

Je continue d'avancer petit à petit et même si personne n'a pu m'aiguiller sur mon post précédent j'ai trouvé un bel élément de réponse par Raphaël ici.

Maintenant j'ai une autre incompréhension que j'ai illustré par un exemple ici.

Le gros bloc de gauche "myGallery" est en absolue sous le body.
La div2 est juste en dessous.
La div foottour a une margin:100px 0 0 685px;
Tout est normal selon moi : la margin-top prend appui sur la div2 juste au dessus dans le flux. myGallery est quant à elle en absolue et donc retirée du flux.
Là où je ne comprends pas, c'est le comportement de myGallery si je supprime la div2. Pour info, j'ai ajouté cette div bidon part hasard. Elle "corrige" mon problème mais je m'en passerais bien.
Donc en fait, sans div2, myGallery "subit" la margin-top de 100px de la div du dessous, foottour.

Donc pour résumé, pourquoi myGallery en absolue subit cette margin-top ?
J'aurais pensé qu'étant retiré du flux, elle ne subirait plus du tout l'influence d'autres div et surtout pas celle du dessous, qui plus est non positionné !

Merci pour votre aide
à+

kileak a écrit :
Donc pour résumé, pourquoi myGallery en absolue subit cette margin-top ?

C'est son comportement par défaut tant que tu ne lui as pas défini de valeurs de positionnement top/right/bottom/left. A ce moment, ton bloc prendra sa position par rapport à ces valeurs et à son conteneur référent.

Merci mob mais justement, dans ce cas, si on supprime "div2", le référent de "foottour" devient "myGallery" qui est en absolue. Je ne comprends pas pourquoi sa marge influe sur son référent. Je dis, dont acte, mais sans être convaincu.
C'est chaud parfois le positionnement

à+

J'ai supprimé #div2 et si tu n'indiques pas de valeur de positionnement à #myGallery, je pense que simplement elle s'aligne dans le flux par défaut, et c'est pour çà que la marge de "foottour" est prise en compte. Quand #div2 n'est pas supprimer, #myGallery s'aligne dans le flux avec lui, et si tu lui ajoutes un margin, elle réagira pareil.

A défaut d'avoir un parent et de valeur de positionnement, le bloc s'aligne à son frère adjacent en gros à mon avis.

Simple supposition, j'm'étais jamais posé la question !

J'arrive à la même conclusion que toi mais je n'ai rien lu d'officiel laissant penser cela.
Quoiqu'il en soit c'est contournable et je suis prévenu si je puis dire.
Merci pour ton temps

kileak a écrit :
Le problème de cette technique est de savoir si c'est la bonne.

Faudrait voir le design et l'intégration réalisée.
Là comme ça je dirais que non, c'est pas la bonne. Mais il faudrait juger sur pièces.

kileak a écrit :
On nous présente des tuto pour faire des menus à x colonnes en mode float puis un article ici même qui explique que les floats sont mal utilisés et présente un "comment faire" des colonnes sans les floats.

Il y a des années d'écart entre ces articles. Les capacités des navigateurs ont pas mal changé entre les deux. En 2005 ou 2008 c'était encore du float partout parce que c'était à peu près la seule chose qui marchait. Aujourd'hui on a plus de possibilités, et utiliser du display:inline-block ou du display:table-cell est sans doute préférable (sauf qu'IE7 qui est encore utilisé ne comprend pas ces dernières techniques).

kileak a écrit :
Je ne comprends pas ce comportement. Je l'ai tout d'abord constaté sur mon site mais vu l'imbrication de blocs j'ai cherché un cas simple pour reproduire .
(...)
Auriez-vous une explication ?

Oui: La fusion des marges en CSS. (Un article qui reste d'actualité. )

Merci beaucoup fvsch pour ton éclairage et ton temps.
J'ai appris à me servir du inline-block et table-cell et c'est vrai que c'est puissant
Le diaporama de Raphaël est démentiel d'ailleurs sur les tableaux

Bon week-end