[Résolu] Problème de positionnement et autres bricoles

Bonjour à tous et toutes,

Continuant dans ma lancée d'aller plus loin avec les CSS, de faire des design plus léger et plus épurés j'ai décidé donc d'étudier un peu ce type de style.

Quoi de plus beau donc que de passer à la pratique ? Et c'est de fait ce que je fais en construisant un nouveau design pour mon blog (oui encore un ! Mais n'apprend t'on pas mieux par la pratique ?).

De fait, je bute actuellement sur un problème... A défaut, je serais toujours plongé dans mes ressources.

Avant de continuer, je vous donne le le code CSS et le code HTML.

Mes questions sont donc les suivantes :

1. Pourquoi le DIV ID Pied se retrouve en haut ? J'ai l'impression qu'il s'agit du positionnement Absolute qui bloque quelque chose... Mais si je passe ce DIV en position relative, il disparait...
2. Pourquoi la balise NOSCRIPT ne se met pas en forme correctement ? Le chemin continu est pourtant fait correctement...
3. Pourquoi est-ce que le corps est-il décalé ? On dirais qu'il y a une marge ou autre qui fais que le corps, le titre etc. soit complétement décalé.

Il est évident que j'ai relu avec attention les articles suivants :
1. Les structures en ligne et en bloc
2. Les parentés de styles
3. Le type de positionnement

Aurais-je mal compris ? Pourriez-vous m'indiquer mes erreurs ?
A défaut, n'hésitez pas à m'envoyer des ressources.

D'avance merci d'avoir déjà lu ce post jusqu'a sa fin !

Excellente journée,

G.
Modifié par Groumphy (08 Jan 2006 - 11:22)

Groumphy a écrit :
1. Pourquoi le DIV ID Pied se retrouve en haut ? J'ai l'impression qu'il s'agit du positionnement Absolute qui bloque quelque chose... Mais si je passe ce DIV en position relative, il disparait...

Voir les règles de calcul de http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height : le moteur de rendu fixe la valeur de "top" à celle qu'aurait eu l'hypothétique élément statique défini pour les besoins du calcul dans cette partie de CSS (c'est à dire, dans l'ordre du flux, juste après la hauteur définie pour #entete)

Mis en position relative, c'est à dire en flux, il se place au même endroit, mais se retrouve en dessous de #principal dans le contexte d'empilement (ajouter un z-index pour le visualiser).

Sinon:
- pour le <noscript>, difficile de te répondre car je n'en vois pas dans ta source HTML
- de quel décalage s'agit-il plus précisément ?
Modifié par Laurent Denis (18 Dec 2005 - 12:15)

Salut Groumphy,

Tu mets des positions absolues mais tu ne positionnes pas, donc forcément tu ne contrôle pas vraiment la position. Mais je crois entrevoir ton souci : ton menu flottant à droite qui déborde du corps. Essaye peut-être de ne pas utiliser de flottant ni de positionnement du tout...?

Hello,

Nilpohc a écrit :
Tu mets des positions absolues mais tu ne positionnes pas, donc forcément tu ne contrôle pas vraiment la position.

Bien tenté, mais perdu

CSS2.1 prévoit très précisément le mode de calcul des top, left et autres right, bottom quand ils sont laissés à leur valeur par défaut, c'est à dire auto. Beaucoup plus clairement, d'ailleurs, que CSS2.0.

Le détail est touffu, selon les valeurs des autres propriétés de hauteur, largeur et marges. Mais grosso modo, on peut dire que dans ce cas le bloc concerné n'est pas totalement retiré du flux, contrairement à l'explication classique de la position absolue : pour déterminer sa position verticale et/ou horizontale, il se comporte à peu près comme s'il était resté en flux.

<edit>Allez, une tite page test pour visualiser: http://test.blog-and-blues.org/absolute_flux/
(A quelques bugs près de positionnement en fonction de la bordure du conteneur, elle est même visualisable dans IE Win 6.0)</>
Modifié par Laurent Denis (18 Dec 2005 - 13:30)

Comme toujours Laurent, tu es un maître pour moi , ça explique certains comportements que j'ai constaté en testant différents positionnement.
Néanmoins, faire confiance aux valeurs par défauts n'est pas vraiment ce que j'appellerai "contrôler" le positionnement des éléments...mais ça n'engage que moi.

Ah... C'est peut-être bien cela, finalement, la vraie difficulté de CSS : apprendre à se fier au flux...

Genre "fie toi à la force Luke"

Hum, je voyais ça plus "néo-sagesse orientale", mais pourquoi pas le space-opera, en effet

Application du "Lacher prise" ?
Je l'applique dans le shiatsu, et ça marche.

Mais c'est vrai que ce n'est pas facile de l'appliquer au web, quand on a été "élevé au Macromedia"....

On peux devenir fou avec le css avec modération

Bonjour,

En premier temps merci à tous, je vais lire les documentations et conseils que vous m'avez fournis... De fait, je vous tiens informé du suivis. Pour le moment je n'ai pas beaucoup le temps.

Toutefois, après lecture globale, mon objectif est de simplifier ma CSS. De fait, sur le design actuel de mon blog, j'ai créé des classes, et tutti quanti à ne plus savoir qu'en faire... De fait, j'aimerais simplifier.

Comme le dis Laurent Denis, la confiance dans le flux est mon but. Mais je voudrais surtout tirer au maximum sur la "cascade". D'où mon idée de ne pas positionner... Relayé par une globalité contenue.

Je lis donc les quelques liens fournis et je vous informe.

G.

Bonjour,

En relisant attentivement Laurent Denis, j'ai l'impression d'entre "qu'il y a un bug dans CSS2.1" mais en le relisant encore, je comprend que c'est l'inverse. Le manque de confiance dans le flux en est la cause.

Malgré le fait de l'absolus ici, il y a parenté. De ce fait, même si on passe en relatif, le problème ne se trouve pas corrigé pour autant. Le DIV ira se positionner en dessous du précédent.

De fait, faut-il pour cela le positionner impérativement ? (J'ai l'impression de répondre moi-même à ma propre question)
Je pense que non. Si j'étudie simplement l'exemple donné par Laurent Denis, le cas est identique au bloc gris...

De fait, il faudrais que je corrige donc "le pied" afin qu'il aie les mêmes attribut que le bloc orange.
Ais-je raison ?

Merci de vos avis,

G.
Modifié par Groumphy (20 Dec 2005 - 08:34)

Bonjour,

Eh bien il me semble que c'est la grande muette sur ce post ...

Pour donner une certaine continuité, je n'ai pas cessé pour autant face au problème.

Pour faire un peu "con", j'ai repassé en position relative le DIV PIED. De fait, il "disparait" visuellement comme annoncé plus haut.
Cependant, faisant suite aux différents commentaires, je me suis dit pourquoi le problème viendrais d'emblée de ce DIV ?

De fait, vu qu'il y a "héritage" dans les CSS, cela pouvait donc venir du DIV supérieur (en sorte le CONTENEUR)...
Malheureusement là aussi ce ne fut pas probant. J'ai joué avec les positions relatives et absolues sur pratiquement tous les DIV, sans aucuns succès. La visibilité du DIV PIED reste absente !

Hum... Avez-vous de fait une idée pour suivre ce chemin périlleux que de faire appel à la confiance du flux ?

Pour information, j'ai mis la totalité en ligne.

Que la force soit avec vous... Et merci déjà de votre lecture,


G.

Bonsoir,

Apparement j'ai posé de mauvaise question ?
Je bloque... Car j'ai eu beau changer la "configuration" des différents positionnement, je ne trouve pas "de solution" idéale...

Y aurais t'il une âme charitable pour me guider ?

Je vous remercie...

G.

Salut Groumphy,

C'est le positionnement absolu de ta division "principal" qui pose problème. Dès lors que tu fais celà, tu l'extrais du flux ce qui fait que ton footer ne la prend plus en compte et viens donc se placer directement après ton entête. Je vois d'ailleurs que tu t'en es servi à toutes les sauces de ce positionnement, ce qui, malgré les explications ci-dessus, me semble inutile.

Par ailleurs, tu n'as pas définis tes zones correctement ce qui fait que tu te retrouves avec des divisions qui ne se justifient pas ("conteneur" + "corps").

En outre, je vois que ton conteneur fait 800px de large. Cà, çà pose problème car lorsque ta page s'agrandit, la barre de défilement verticale apparaît et comme elle prend de la place, certains utilisateurs (800x600) vont se retrouver avec une barre de défilement horizontale donc il faut te limiter à 770px. Comme tu laisses en plus une marge de 50px sur la gauche, on pourrait même dire 720px.

Dans un premier temps, tu devrais commencer par supprimer toutes ces divisions puis redéfinir les grands ensembles en ajoutant des commentaires pour les repérer. Par ailleurs, la plupart des visiteurs cherchant avant tout à lire la page avant d'accéder aux autres, tu pourrais déplacer le menu à la suite du texte principal. Tu aurais donc ceci:

<!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=iso-8859-1">
<title>Document sans nom</title>
<link href="css/global.css" rel="stylesheet" type="text/css">
</head>
<body>

<!-- Début du document -->
<div id="document">

<!-- Entete -->
<div id="entete">
	<h1>digital-nation</h1>
	<p>Un peu de tout, comme le fromage... Et la bière !</p>
</div>

<!-- Texte -->
<div id="texte">
	<h2>Article premier</h2>
	<p class="date">Posté le 12 janvier 2006</p>
	<p>Sous-titre en gras... Première phrase !</p>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<!-- Menu -->
<div id="menu">
	<h3>Naviguez</h3>
	<ul>
		<li>Element 1</li>
		<li>Element 2</li>
	</ul>
	<h3>Catégories</h3>
	<ul>
		<li>Element 1</li>
		<li>Element 2</li>
	</ul>
	<h3>Archives</h3>
	<ul>
		<li>Element 1</li>
		<li>Element 2</li>
	</ul>
	<h3>divers</h3>
	<ul>
		<li><a href="lien.htm">Element 1</a></li>
		<li>Element 2</li>
	</ul>
</div>

<!-- Pied de page -->
<div id="pied"></div>

<!-- Fin du document -->
</div>

</body>
</html>

J'ai changé le doctype html 4.01 Transitionnal en un doctype xhml 1.0 Strict vu que tu es conforme mais bon, à toi de voir ce que tu souhaites.

A des fins d'accessibilité, tu peux compléter en mettant un lien, avant la division "texte", permettant de sauter directement au menu ou bien un qui oriente vers le plan du site... Pourquoi pas les deux d'ailleurs mais fait court.

De là, tu peux te poser la question de savoir comment obtenir ton positionnement tout en respectant au mieux le flux du document.

Qu'est-ce qui pose problème?
Je vois que tu souhaites mettre ton menu à côté du côté du texte donc là, tu es contraint de mettre la tête dans le sac et de sortir du flux.

Comment faire?
Pour sortir du flux, tu as deux solutions: Soit tu te sers du positionnement flottant, soit tu te sers du positionnement absolu.

Si tu le fais en "flottant", tu vas devoir ajouter la propriété "float" sur la division "texte" et sur la division "menu" puis forcer la division "pied" à revenir dans le flux en lui appliquant un "clear: both;". L'avantage de cette méthode est que le pied se trouvera à coup sûr en dessous des deux divisions précédentes, quelquesoit la longueur de chacune. Tu peux donc opter pour celle-ci.

En dehors de çà, il est inutile d'ajouter une quelconque mention de positionnement. Tu peux parfaitement te contenter de jouer avec les marges (margin) et le remplissage (padding).
Modifié par koala64 (25 Dec 2005 - 00:42)

Bonjour,

Je vais tenter cela...

G.

Bonsoir,

Je n'ai pas encore pu tester cela (excès de zèle au travail !), mais je n'ai pas oublié non plus le problème (ni le petit "résolu" si c'est le cas !).

Je vous tiendrais au courant...

G.

Bonjour,

Je viens de réaliser rapidement ce qui était demandé... Et c'est absolument parfais...

Si je ne me trompe, toutes les zones sont dépendante du flux. Afin de positionner correctement le menu vers la droite, ais-je une autre solution que de le passer en absolu ? Et donc de fait le sortir du positionnement dépendant du flux ? (Ne me dite pas qu'il faut tester, ce que je cherche c'est surtout les solutions qui s'offrent à moi... Et ici je ne vois que l'absolu...).

J'ai relu les spécifications données par Laurent D. mais je n'ai pas tout compris (mon anglais est assez... Peu prononcé).

J'ai à nouveau mis le résultat en ligne.

Je tenais encore à vous remercier pour la solution apportée et à m'excuser de mon temps de réponse.

G.

Absolument pas ! Je répond à ma propre question... Etonnant non ?

Vu que j'ai la résolution, je cloture le sujet... Avec un p'tit résolu.

Merci à tous ceux qui ont participé.

G.