[Résolu 75%] Ah, ces pieds de page...

Bonjour,

Toute nouvelle ici... enfin, j'arpente le site depuis quelques temps

J'ai lu de nombreuses choses sur les pieds de page. Notamment l'astuce de l'absolute avec un bottom:0. J'ai aussi consulté l'article de Pompage, mais décidément... je n'y arrive pas.

J'ai un tout petit pied de page, c'est juste une image. Tout fonctionne comme normal avec l'attribut position:absolute... Le seul problème, c'est qu'il devrait être centré comme mon container, ce pied de page ! Donc l'attribut absolute ne colle pas vraiment à mon cas...
J'ai repris toutes les données de mon container pour le placement horizontal, mais rien n'y fait, et évidemment, si je supprime l'attribut absolute ça ne marche plus comme ça devrait !

Voici la maquette en question (url supprimée par moi)

Je vous remercie d'avance pour votre aide.
(à noter que j'ai déjà arpenté la FAQ avec ferveur... mais je m'y prends peut-être mal dans mes recherches ?)

PS. Je n'ai pas encore de déclaration... ça met tout en l'air. Mais j'ai encore des recherches à faire sur ce sujet là, merci de votre indulgence.
Modifié par Corinne (17 May 2005 - 23:14)

margin-left: -XXpx;

Où XX = largeur de ton fond divisé par 2

Expliqué dans les tutoriels
Centrer-les-elements-ou-un-site-web-en-CSS (vers la fin et la partie "marges négatives")
Modifié par Igor (17 May 2005 - 12:58)

Merci beaucoup, ça fonctionne à merveille !

J'ai une petite question, par pure curiosité... pour quelle(s) raison(s) cela ne marchait-il pas avec ma techniques précédente de donner une largeur fixe et placer les marges en "auto" ?

Avant de mettre un petit [résolu] je m'en vais bidouiller pour le "contenu large" (puisqu'il se superpose sur mon contenu, ce pied) et je reviens dès que ça marche, ou si ça ne marche pas...
Modifié par Corinne (17 May 2005 - 01:06)

Tout marche à merveille grâce à cette petite astuce de Pompage :

Pompage a écrit :
Comme vous ne voulez pas que votre pied de page chevauche votre contenu, vous pouvez ajouter une valeur au padding-bottom du bloc de contenu, pour compenser la hauteur du pied de page.

Bonjour et bienvenue Corinne

Corinne a écrit :

PS. Je n'ai pas encore de déclaration... ça met tout en l'air. Mais j'ai encore des recherches à faire sur ce sujet là, merci de votre indulgence.

C'est pourtant une obligation que de te pencher sur les doctypes, ce ne sont pas des trucs qu'on rajoute à la fin d'un site, en les ignorant tu courres vers quelques désillusions en testant tes réalisations sur un échantillon de navigateur. Sans eux pas de conception web "aux normes", pas de perrenité des sites, un affichage alléatoire sur tel ou tel navigateur.
C'est une des première choses à saisir.

Quelques ressources: http://del.icio.us/Igor/dtd

Merci de la bienvenue

Euh, oui je le sais, mais je n'en suis qu'à ma première maquette et je le ferai une fois que ma mise en page sera résolue. D'où ma demande d'indulgence pour ce point-ci et le fait que j'aie signalé que je devais encore faire des recherches (= me pencher sur le sujet).
Je ne passe pas à une mise en page uniquement CSS pour m'amuser, mais bien pour m'assurer un maximum de compatiblité pour tout et contre tout
(bien que cela m'amuse aussi, mais bon, lol).

Concernant mon sujet initial, je parle toujours trop vite ! En fait l'astuce de Pompage ne résout pas le souci. Si l'on scrolle après avoir redimensionné la fenêtre, le contenu apparaît au-dessous, voire coupé ! Si vous avez une suggestion, je suis bien sûr preneuse. Merci encore.

Oups, j'édite pour remettre le lien histoire de voir :
http://www.exiledesigns.com/tempo/school/index.php?cat=1
Modifié par Corinne (17 May 2005 - 01:20)

Bon, encore là moi !
Me reste encore le souci posté juste au-dessus !

Concernant la validation et les doctypes, pour Igor (hihi) ben voilà, c'est à peu près fait Reste que le background de mon container ne s'affiche plus malgré la validation en XHTML transitionnel 1.0. C'est définitivement un gros mystère...

Arrrgh

Quand on enlève la DTD, tout rentre dans l'ordre (<edit /> le background réapparaît ).
Jamais rencontré ce problème. Je suis mystifié
Modifié par Stephan (17 May 2005 - 03:53)

LOL Non non, c'était déjà pas dans l'ordre avant, ça s'arrange pas avec lol.

Reste l'affichage des infos par-dessus mon footer quand on redimensionne la fenêtre, puis qu'on scrolle. Et puis bien sûr le souci du background qui n'apparaît plus avec la déclaration du doctype.

(c'est tard par là, mais je lâche pas l'affaire ! lol)

Pour aider à résoudre le problème...

Soit le CSS suivant (en utilisant les images de Corinne) :

body {
	background-image: url(images/background_stripes.gif);
}
#container {
	background: url(images/background.gif) repeat-y;
	height: 100%;
}

Et le HTML suivant :

<html>
 <head>
  <title>Page test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="screen.css" />
 </head>
 <body>
  <div id="container">
  </div>
 </body>
</html>

Ça fonctionne nickel . L'image background.gif se superpose à background_stripes.gif sur toute la hauteur de la page.

Si on ajoute un DOCTYPE...

<!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">
 <head>
  <title>Page test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="screen.css" />
 </head>
 <body>
  <div id="container">
  </div>
 </body>
</html>

... seul l'image en arrière-plan du <body> est visible, l'autre étant ignorée.

Par ailleurs, si les déclarations sont faites à même la page en utilisant les balises <style type="text/css"></style>, le comportement est le même avec ou sans DOCTYPE, à savoir que seul l'arrière-plan du <body> est visible.

Le comportement est le même sur IE/Mac, Safari et Firefox/Mac. (Pas testé ailleur, mais ça semble généralisé ).

C'est la première fois que j'observe ce comportement et mes recherches n'ont donné aucun résultat.

Corinne a écrit :

(c'est tard par là, mais je lâche pas l'affaire ! lol)

Lâche pas la patate Corinne. Quand les français vont se lever, on va surement avoir des réponses

Il semble que pour ton problème de background, c'est le float: right; qui est en cause.

#col {
	[b][#red]float: right;[/#][/b]
	width: 179px;
	height: auto;
	margin-left: 17px;
	padding-top: 12px;
	padding-left: 1px;
	padding-right: 1px;
	voice-family: "\"}\"";
  	voice-family: inherit;
	width : 179px;
}

Je trouve qu'il y a abus du « box model hack ». Tu aurais peut-être avantage à approfondir à quoi il sert. Personnellement, j'arrive à m'en passer en évitant d'attribuer des border, padding ou margin aux éléments auxquels j'ai attribué un width.

Il doit bien y avoir un « layout » qui traine quelque part et qui correspond à tes besoins

<edit />
J'ai déterré ce post pour toi :
http://forum.alsacreations.com/topic.php?fid=4&tid=2679#p25369

Tu dois pouvoir adapter à tes besoins. Il n'y a pas le pied de page qui colle en bas, mais perso je ne connais pas de méthode pérenne pour faire ça.
Modifié par Stephan (17 May 2005 - 06:32)

Wouah, ça a bouillonné dis donc

(moi je suis de Suisse, ça paraît fou mais c'était 4 heures du mat quand je me suis décidée à donner du repos à mon pauvre cerveau ébouillanté )

Donc, si je résume...

Le problème serait le float right ? J'ai supprimé le float right pour voir ce que ça donne... Le background et visible effectivement, mais seulement jusqu'à un certain point de la page (le fond de #col). En gros, après ça, mes hauteurs diverses ont l'ai d'être carrément ignorées. Et de plus, dès que j'ai du contenu dans ma page, ce qui se trouve dans ma #col se déplace sur la gauche sous ce contenu !

Concernant le box model hack... Wouah ce qui m'a fallu pour le trouver sur Open Web, j'ai dû taper la chaîne de recherche de la mort Je savais pas que ça existait des choses pareilles .
En fait... Je ne vois pas vraiment comment me passer d'un padding au profit d'un width, ça ne correspond pas à ce que je désire (que mon contenu se place à x pixels des bords de mes divs) de manière uniforme...
Enfin peut-être je ne pense pas encore assez dans l'optique "CSS" mais je suppose que ça viendra

Et... je veux bien regarder des layouts (ce que j'ai déjà pas mal fait en commençant par ceux qui se trouvent ici), mais je ne veux pas limiter les possibilité des ma propre maquette en me "calquant" dessus... J'aimerais que mon code serve mon design et pas l'inverse. Bien sûr j'ai en tête les différentes contraintes du code quand je réalise (ça me vient automatique hihi) mais je n'en fais pas des règles absolues (est-ce une mauvaise mentalité ?)

Je suis allée jeter un oeil du côté de ton "edit" et donc la solution c'est bien de virer tous les margins et paddings ?

Oh, et... encore merci pour toute cette aide précieuse

Corinne a écrit :

Concernant le box model hack... Wouah ce qui m'a fallu pour le trouver sur Open Web, j'ai dû taper la chaîne de recherche de la mort Je savais pas que ça existait des choses pareilles .
En fait... Je ne vois pas vraiment comment me passer d'un padding au profit d'un width, ça ne correspond pas à ce que je désire (que mon contenu se place à x pixels des bords de mes divs) de manière uniforme...

En fait, tu appliques un width à ton conteneur, et pour placer ton contenu à x pixels des bords de tes <div>, tu appliques un margin-left et margin-right aux <p>. C'est tout simple

Effectivement c'est simple, mais pas idiot
Merci, je vais l'adopter !

Quelqu'un aurait une idée pour le float:right ou tout ce qui limiterait l'affichage de mon arrière-plan de #container ?

Corinne a écrit :

Concernant le box model hack... Wouah ce qui m'a fallu pour le trouver sur Open Web, j'ai dû taper la chaîne de recherche de la mort Je savais pas que ça existait des choses pareilles .

Le Modèle de Boîte est pourtant l'un des fondamentaux à connaitre en CSS.
Je te propose de lire cette Méthodologie pour résoudre les problèmes d'affichage en CSS. Tu y retrouveras les différents points qui posent des problèmes, dont le Modèle de Boite.

Bonne chance

Je suis absolument débutante et j'ai découvert le modèle "box" ainsi que toute la documentation de ton site depuis quelques semaines (une ou deux) uniquement. J'ai déjà tout lu (je pense) ainsi que suivi pratiquement tous les liens vers d'autres articles .

Je connais maintenant bien ce modèle boîte (d'où mon utilisation poussée du hack cité plus haut dans toute ma feuille de style lol). Je ne savais juste pas du tout comment ça s'appelait (et donc comment le chercher, si on ne sait pas comment ça s'appelle - j'ai dû probablement taper quelque chose du genre "incompatibilité Firefox Explorer padding" pour y arriver lol).

La première chose que j'ai fait (au départ, puisque j'avais bien plus de soucis que ça) était de suivre la méthodologie de ton billet pour repérer mes erreurs (merci encore, il est fabuleux). J'ai tout réparé...

...le seul hic, c'est ce background qui est insolvable et récalcitrant. J'ai beau relire ton billet (ainsi qu'un article sur les backgrounds sur Openweb) rien n'y fait... Je ne suis peut-être pas encore en mesure de cerner le problème et de lui donner un nom.

Allez ! Je te donne une partie de la solution :

Remplace :

#col {
	float: right;
	width: 179px;
	height: auto;
	margin-left: 17px;
	padding-top: 12px;
	padding-left: 1px;
	padding-right: 1px;
	voice-family: "\"}\"";
  	voice-family: inherit;
	width : 179px;
}

Par :

#col {
	padding: 12px 1px 0 1px;
	margin-left: 458px; /* la largeur de ton main */
}

Cette solution est basée sur le modèle que je t'ai proposé :
http://forum.alsacreations.com/topic.php?fid=4&tid=2679#p25369

Tu aurais avantage à y jeter un oeil attentif
J'y explique notamment comment faire pour que ton conteneur occupe toute la hauteur. As-tu fait un copier-coller du code pour voir de quoi il en retourne ?

Pour le « box model hack », j'avais déjà donné le lien ici :
http://forum.alsacreations.com/topic.php?pid=34382&tid=3855&fid=4&p=1#p34303

Ton pied de page, tu tiens vraiment à l'avoir collé en bas ? Parce qu'avec suffisamment de contenu, pas besoin
Modifié par Stephan (17 May 2005 - 17:50)

Hihi, vous me lisez de travers... mais pas grave.

Je me suis laissée l'après-midi pour méditer, je viens de réaliser la finesse de ceci :

margin-left: 458px; /* la largeur de ton main */

Génial, je n'y aurais pas pensé toute seule, je l'avoue.

J'ai aussi utilisé ton truc pour Explorer !important avec le min-height. Le fond s'étend, c'est magnifique, quasi magique, lol. Merci !

Reste que... le fond s'étend au-delà de mon pied de page . On peut scroller sur une 30aine de pixels malgré le fait que le contenu ne s'étende de loin pas jusque là-bas ! http://www.exiledesigns.com/tempo/school/

J'ai encore du chemin à faire... (voui, j'aimerais le garder le footer tout en bas car certaines pages n'auront pas beaucoup de contenu).
Modifié par Corinne (17 May 2005 - 22:16)