18073 sujets

Questions générales et questions de débutants

[Résolu] Rendez moi ma position absolu???

Bonjour à toutes et à tous,


Voilà depuis un bon mois j'ai bien assimiler les differentes position et la gestion du flux et j'ai décider de mettre en applications les conseils de cette page :
http://blog.alsacreations.com/2004/06/04/15-rendez-moi-ma-position-absolue

C'est un texte très instructif et c'est aussi ce qui m'a poussé à faire evoluer mon code, après reflexion, il est clair que ce sera plus lisible.

Jeu deux soucis dans la mise en application :
- J'ai une image de fond de largeur 210px que je veut pas recouvrir par le contenu de ma page mais uniquement mon menu
- Le contenu doit prendre 100% de la taille restante (ce qui n'est pas le cas)
- J'ai placer mon pied de page mais si le contenu est plus grand que la page, le pied lui reste statique Smiley sweatdrop

voici un exemple concret et simplifié : http://toutenkamion.net/
Modifié par percherie (25 Aug 2006 - 11:42)
percherie a écrit :
- Le contenu doit prendre 100% de la taille restante (ce qui n'est pas le cas)

Si tu lui dis de prendre 72% de la taille totale, ça me semble assez logique comme comportement. Le bloc étant en positionnement absolu, la largeur indiquée en pourcentage sera indexée sur la largeur totale de la page, pas sur la taille "restante" (elle n'est d'ailleurs restante que visuellement parlant, parce que ton bloc en positionnement absolu ignore royalement les autres éléments).

percherie a écrit :
- J'ai placer mon pied de page mais si le contenu est plus grand que la page, le pied lui reste statique Smiley sweatdrop

Comportement tout à fait logique. Le positionnement absolu en bottom: 0; place le bloc tout en bas sur la zone visible au chargement de la page. Ensuite, le bloc étant en positionnement absolu, il reste strictement à la même place… sur la page.

Un positionnement indexé sur la fenêtre du navigateur plutôt que sur la page, c'est le positionnement fixe (position: fixed;), bien entendu non implémenté dans IE 6. Teste-le quand même pour voir, c'est sympa, même si inutilisable pour l'instant (sauf contexte très précis où l'on n'a pas besoin d'IE, et sauf à adopter une stratégie de dégradation gracieuse).

Pour placer un pied de page en bas de page, j'avais fait quelques tests, mais c'est un peu du bricolage :
http://web.covertprestige.info/test/08-pied-de-page-en-bas-ecran-1.html

Pour les deux colonnes, pourquoi ne pas tout simplement avoir le menu en flottant (float: left;) et la zone de contenu en statique, avec une marge à gauche de la largeur du menu ?
Modifié par mpop (18 Apr 2006 - 19:31)
Oui j'avais pensé utiliser un menu flotant mais j'essais de placer ce menu à la fin du code.
Plusieur fois j'ai lu qu'il est plus facile, pour les personne utilisant des navigateur texte, d'avoir les menus en fin de page pour leur proposer le contenu dès le début.

Par contre si ce n'est pas possible d'utiliser le positonnement en absolu, j'opterai plutot pour un positionnement flottant.

Pour le pied je pensait le placer dans le bloc contenu car lui aussi ne pas ce placer au dessus de la bande verticale de 210px mais du point de vu code HTML ça n'est plus du tout logique, le pied et le contenu sont deux élements different du point de vu informations placée dedans.

Donc en m'inspirant de ta solution qui m'a ouvert les yeux et toujour en utilisant un bloc appelé "conteneur" (qui n'existait pas dans mon ancien fichier) qui prend toute la page j'ai :
- Placer le "corps" dans le flux avec une marge interieure et surtout sans dimension
- Placer le "pied" dans le flux de la même façon
- Placer le "menu" en absolu afin de conserver son code HTML en bas de page

Dernière question, est ce que l'utilisation du bloc "conteneur" est justifiée ou pas?

Avec FF, il existe un scrool vertical et je n'arrive pas à trouver d'où ça viens.

http://toutenkamion.net/

Je poste mon code, car la page test ne restera pas toujour sur le serveur (testé avec FF 1.5 et IE 6.0)

<style type="text/css">
<!--
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
body {
	background-image: url(WEB/Fond.jpg);
	background-repeat: repeat-y;
	background-color: #ECE2D9;
}
#conteneur {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}
#corps {
	left: 210px;
	padding-left: 230px;
	height: 100%;
}
#pied {
	height: 50px;
	padding-left: 230px;
	margin-top: -50px;
}
#menu {
	width: 220px;
	left: 0px;
	top: 75px;
	border: 1px;
	position: absolute;
}
-->
</style>


<div id="conteneur">
  <div id="corps">
    <p>Placez ici le contenu de id "corps"</p>
  </div>
  <div id="pied">Placez ici le contenu de id "pied"</div>
  <div id="menu">
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
      <li>Menu 4</li>
      <li>Menu 5 </li>
    </ul>
  </div>
</div>

Modifié par percherie (25 Aug 2006 - 11:42)
percherie a écrit :
Plusieur fois j'ai lu qu'il est plus facile, pour les personne utilisant des navigateur texte, d'avoir les menus en fin de page pour leur proposer le contenu dès le début.

J'avais lu une étude sur la question. Les personnes interrogées, utilisateurs de lecteurs d'écran en particulier, étaient partagées sur la question de la place relative du contenu et du menu de navigation. Si la page que l'on parcourt ne correspond pas à ce que l'on cherche sur le site, le fait de devoir se taper tout le contenu doit être frustrant, je suppose. Même chose, se taper tout le menu de navigation alors que cette fois on a trouvé la bonne page et on veut accéder au contenu, ça doit pas être très drôle. À l'heure actuelle, la solution la plus viable reste encore les liens d'évitement, placés en début de page, qui conduisent directement au contenu d'une part et au menu de navigation d'autre part.

Si tu veux mettre le menu en deuxième dans le code, il faudra que le bloc de contenu soit flottant (le menu, pas forcément).

Sur les flottants :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

percherie a écrit :
Avec FF, il existe un scrool vertical et je n'arrive pas à trouver d'où ça viens.

C'est dû à la fusion des marges : la marge du paragraphe en haut (par défaut, 1em ou quelque chose comme ça) fusionne avec celle du bloc conteneur (fixée à 0px), et s'applique au bloc conteneur.
Cf http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Note to self: j'ai bien fait de me faire ces petites pages de tests/tutoriels, je gagne un temps fou maintenant Smiley ravi
C'est clair, ces petites pages sont claire et répondent à beaucoup de questions.

Par contre depuis ton dernier msg, je commence à perdre le fil de mon raisonnement. Il semble que l'exemple que j'ai proposé et ceux qui tu a mis en ligne permettent d'obtenir le même résulta mis à part le fait qu'avec le miens il semble qu'un problème de fusionnement de marge existe.

Le debut du "corps" est toujours commencer par une H1 décoré en CSS, je vais donc corriger ce problème de fusion de marge grâce à ce titre et utiliser les marges interne pour placer le texte par rapport au haut de la page.

Je te remerci pour tes explications et pour l'indication des liens d'évitement, je vais me documenter dessus
Sujet clos
Aller à