Problème positionnement dans div(presque même chose que oufizo)

Bonjour à tous.
J'ai un souci de présentation de div. Pour illustrer la situation, rdv sur la page suivante: http://develop.web.free.fr/template_generic3.php

On y voit un annuaire de camping où 8 enregistrements sont présents sur la première page avec une possibilité d'aller sur une deuxième page à l'aide des flèches en bas à gauche.

Mon soucis est plus visible sur la deuxième page. En effet, je voudrais que les flèches permettant de naviguer entre les pages soient situées au même endroit, à savoir juste au dessus du pied de page et centrer horizontalement.
La div contenant les flèches de pagination est au même niveau que la div du cadre des campings et sont englobées dans une autre div appelée "contenu".
J'ai appliqué le css suivant mais rien y fait, les flèches restent toujours collées au dernier enregistrement.

body,html {
margin:0;
height:100%;
}

body{
	background: #F3FCB4;
	font-family: arial;/* on applique une police et une taille de base pour les caractères. Mettre des "" pour un nom de police comportant un espace.*/
}


div#global{
	min-height:100%;
	width:1002px;
	padding: 0;
	margin: 0 auto;
	position: relative;
}

div#contenu {
	position: absolute;
	padding-top: 30px;
	padding-left: 25px;
	top:85px;
	left: 6px;
	right: 6px;
	width:965px;
	height:490px;
	background: #ddd;
	}
div#cadrechoix {
	float: left;
	position: relative;
	width:461px;
	height:110px;
	background: url(vignette_annuaire.gif);
	margin: 2px 15px 2px 0;
	}
div#photocadrechoix {
	position:absolute;
	width:130px;
	height:97px;
	margin: 6px 0 0 5px;
	}
div#textecadrechoix {
	position:absolute;
	width:280px;
	height:85px;
	margin: 6px 6px 0 136px;
	}

div#textecadrechoix h1 {
	padding: 0;
	margin: 5px 0 5px 30px;
	text-align: center;
	font: bold 15px arial;
	}

div#textecadrechoix p {
	padding: 0;
	margin: 1px 0 0 3px;
	font-size:12px;
	}

div#textecadrechoix a {
	padding: 0;
	margin: 0 0 0 180px;
	font-size:12px;
	}
div#pagination {
	top:450px;
	left:470px;
	float:left;
	}

Est-ce que cela viendrait de la propriété position?

Pour info, du code php (région répétée) m'a permis de n'avoir qu'une div pour la présentation des camping et se répéte 8 fois par page. De même, c'est du code php qui régit les flèches de navigation que j'ai retraduit en div plutôt qu'en table par défaut.

div#pagination {
	top:450px;
	left:470px;
	float:left;
}

Les propriétés CSS top, left, bottom et right ne s'utilisent que pour des éléments positionnés, c'est à dire pour lesquels la valeur de la propriété position est "absolute" ou "relative".

En l'occurrence, tu auras plutôt besoin du positionnement absolu. Et il ne servira à rien de faire flotter ce bloc en plus du positionnement absolu.


Par contre, si je peux me permettre : ce site sera, pour les malvoyants ou pour la simple adaptation aux diverses résolutions et configurations des utilisateurs, encore moins accessible qu'une mise en page équivalente à base de tableaux. Si on agrandit la taille du texte, tout déborde dans tous les sens. La raison : utilisation massive et malvenue des hauteurs fixes et du positionnement absolu.

La solution passerait par une mise en page plus fluide et adaptable, l'utilisation de hauteurs minimales plutôt que de hauteurs fixes, de flottants plutôt que du positionnement absolu, etc.

Salut Florent V. et merci pour tes remarques constructives.

Il est vrai que nous avions (Neomcdn et moi) dans l'idée de privilégier un affichage réduit au maximum à une page sans scroll pour une résolution d'environ 1024x768. Il est vrai aussi que j'avais remarqué le problème du texte qui débordait de partout quand on aggrandissait la taille d'écriture sous firefox en tout cas.
Je suis pour l'idée que mon site soit néanmoins accessible aux malvoyants.

Cependant, comment faire en sorte que les cadres présentant de futurs annonceurs (dans mon exemple des campings) s'aggrandissent en fonction de la taille de l'écriture choisie, sans trop bouleverser l'agencement de ma page et sachant que ce sont des images gif qui illustrent les cadres et donc ont des tailles fixes. Le même problème se pose pour la barre de menus ainsi que les photos.
Cela me parait assez contraignant mais je suis prêt à faire des efforts si on me donne un coup de pouce.

Je voulais savoir aussi une chose: les div qui composent une vignette d'un annonceur sur cette page sont répétée 8 fois à l'aide d'une fonction de php, à savoir région répétée. Cela marche très bien seulement pour le W3C, il considère que j'ai utilisé 8 fois les mêmes noms de div et considère ceci comme des erreurs. On m'a suggéré d'utiliser des tableaux, plus approprié à mon cas, partages tu cet avis?
Modifié par dread (26 Jan 2007 - 09:14)

dread a écrit :
Cependant, comment faire en sorte que les cadres présentant de futurs annonceurs (dans mon exemple des campings) s'aggrandissent en fonction de la taille de l'écriture choisie, sans trop bouleverser l'agencement de ma page et sachant que ce sont des images gif qui illustrent les cadres et donc ont des tailles fixes. Le même problème se pose pour la barre de menus ainsi que les photos.
Cela me parait assez contraignant mais je suis prêt à faire des efforts si on me donne un coup de pouce.

Un indice :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

dread a écrit :
Je voulais savoir aussi une chose: les div qui composent une vignette d'un annonceur sur cette page sont répétée 8 fois à l'aide d'une fonction de php, à savoir région répétée. Cela marche très bien seulement pour le W3C, il considère que j'ai utilisé 8 fois les mêmes noms de div et considère ceci comme des erreurs. On m'a suggéré d'utiliser des tableaux, plus approprié à mon cas, partages tu cet avis?

Savoir si on a un intérêt à utiliser un tableau ou pas n'a strictement rien à voir avec un problème de validation du code HTML. Si le validateur du W3C trouve que tu as utilisé plusieurs fois le même identifiant, il est normal qu'il t'en avertisse. C'est sans doute que tu as utilisé des identifiants là où il aurait été plus logique d'utiliser une classe.
Pour rappel, un identifiant donné ne peut être utilisé qu'une seule fois dans un document HTML donné.

Quelle est la différence entre une classe et un id ?