28173 sujets

CSS et mise en forme, CSS3

[RESOLU] centrer du texte dans une div - Firefox / IE

Bonsoir Smiley biggrin ,

Je souhaite utiliser les CSS pour les nombreux avantages décrits sur ce site et notamment le positionnement d'éléments sans tableaux.

Je les utilise déjà pour certains éléments mais si je pouvais petit à petit simplifier mon code HTML en éliminant les tableaux inutiles...

Je souhaiterais de l'aide ou vos avis sur cette page de test : http://www.annuaire-immo.com/temp/

J'ai essayé d'expliquer mon problème le mieux possible sur la page elle-même...

En résumé j'ai un souci de centrage de texte dans une balise DIV.

Mais ce problème n'est pas le seul pusique selon les résolutions d'écran ou le navigateur employé (Firefox 1.5.0.7 ou IE 6.0.2900.2800 sous Windows XP) la largeur de la balise DIV varie. (Modifier la taille de la fenêtre des navigateurs pour mieux cerner les problèmes...)

Ci-dessous la CSS

div#conteneur {
	position: absolute;
	border-style: solid;
	border-color:#000000;
	border-width: 1px;
}
div#contenu {
	position: absolute;
	top: 101%;
	padding: 0px 50px 0px 50px;
	margin: 10px 50px 0px 50px;
	border-style: solid;
	border-color:#000000;
	border-width: 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:9px;
	font-weight:bold;
	color:#999999;
	text-align: center;
}

Pour le code HTML vous pouvez regarder la source de la page en ligne.

Merci d'avance pour vos précieux conseils Smiley biggrin
Modifié par cedriic (04 Nov 2006 - 08:27)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Salut.

Wow ! Que de CSS pour arriver à ce résultat ! Vive les syntaxes raccourcies Smiley cligne

Bon, si j'ai bien compris la structure qu'il faut obtenir, voici ce que je proposerais (à la volée, j'ai pas testé) :
xhtml 
<div id="global">
   <div id="footer">
      Contenu du pied de page
   </div>
   <div id="contenu">
      Contenu principal de la page
   </div>
</div>
CSS 
#global {
   position: relative;
   border: 1px solid #000;
}
#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   text-align: center;
   }
#contenu {
   padding: 0 50px XXXX 50px; /* XXXX représente la hauteur du footer */
   border: 1px solid #000;
   font: bold 10px Verdana, sans-serif;
}
J'ai quelques remarques à faire Smiley murf
- Pourquoi placer le footer au début de la page ? Qu'est-ce qu'il peut bien contenir de si important pour les moteurs de recherche ? Ils liront ta page jusqu'au bout, de toutes façons, non ? Quid des utilisateurs qui ne disposent pas du rendu visuel, les navigateurs textes, les lecteurs d'écran ?
- Définir une taille de police en pixels risque d'empêcher les utilisateurs d'IE de redimensionner la police de caractères. Préfère les tailles relatives, en em, par exemple.
Bonjour,

Tout d'abord mes excuses au modérateurs qui ont dû une énième fois rappeler un distrait aux règles du forum... Smiley confused

Smiley smile Je te remercie pour ta réponse Sopo que j'ai mis en ligne ici : http://www.annuaire-immo.com/temp/index2.htm

Malgré tout cela ne correspond pas tout à fait à ce que je souhaite obtenir comme résultat.

1/ Les deux cadres ne sont pas dissociés (il n'y a plus qu'une bordure pour l'ensemble)

2/ La largeur du cadre n'est pas fixe, elle bouge avec le redimensionnement de la fenêtre

a écrit :
- Pourquoi placer le footer au début de la page ? Qu'est-ce qu'il peut bien contenir de si important pour les moteurs de recherche ? Ils liront ta page jusqu'au bout, de toutes façons, non ?


Pour les robots des moteurs il est important de placer les mots clés en début de page. Il est plus facile de les répéter avec insistance dans un footer en y ajoutant des liens vers les autres pages du site car ainsi le début du texte vu par l'Internaute peut être plus "littéraire" sans trop répéter les mots clés.

a écrit :
Quid des utilisateurs qui ne disposent pas du rendu visuel, les navigateurs textes, les lecteurs d'écran ?


Il faudrait que je fasse une version de mes sites dans cette optique...

a écrit :
Définir une taille de police en pixels risque d'empêcher les utilisateurs d'IE de redimensionner la police de caractères


C'est le but, ainsi la mise en page n'explose dans le cas d'une taille de police non prévue pour le site pas, au moins sous IE...

Pour mon souci de CSS y'a t-il d'autres pistes ?

Merci à tous Smiley smile
Bonjour,

cedriic a écrit :

Pour les robots des moteurs il est important de placer les mots clés en début de page. Il est plus facile de les répéter avec insistance dans un footer en y ajoutant des liens vers les autres pages du site car ainsi le début du texte vu par l'Internaute peut être plus "littéraire" sans trop répéter les mots clés.


Ne serait-il pas plus utile de faire un menu avec les intitulés pertinents vers différentes pages du site ?
Une bonne idée serait de d'abord se préoccuper de l'utilisateur avant les moteurs Smiley cligne .
Bonjour,

Merci pour cette remarque Smiley smile

Les liens y sont aussi et l'utilisateur a devant lui un site pensé pour lui ET pour les moteurs.

Mais je pense que ce n'est pas le lieu pour parler de référencement, le sujet de ma question est centré sur les CSS

Merci
Administrateur
cedriic a écrit :
C'est le but, ainsi la mise en page n'explose dans le cas d'une taille de police non prévue pour le site pas, au moins sous IE...
Hello,

Malheureusement tu prends le problème à l'envers : le media Web est fluide par définition. Le concepteur web ne peut rien imposer aux visiteurs; ces derniers ont leurs réglages, leurs préférences, leurs besoins.
Pouvoir agrandir la taille de police est un besoin pour certains visiteurs, et il leur sera toujours possible de l'agrandir, même sous IE (il suffit de régler les préférences Windows pour l'accessibilité).

En clair, c'est à toi et ton design de s'adapter au média : le media Web n'est pas un média figé comme l'est le média Print.

Fais le tour des sites conformes aux standards, tu verras qu'ils autorisent généralement l'agrandissement des polices sans se dégrader visuellement car c'est un paramètre à prendre en compte dès la conception.

Pour finir, vouloir volontairement empêcher l'agrandissement des polices va à l'encontre du minimum requis pour l'accessibilité de tes sites. Tu te doutes que sur un forum dédié aux standards, les retours négatifs à ce sujet vont s'accumuler.
Administrateur
cedriic a écrit :
Les liens y sont aussi et l'utilisateur a devant lui un site pensé pour lui ET pour les moteurs.

Tu es vraiment sérieux en écrivant ça ? Smiley sweatdrop
Tu t'es mis à la place de certains handicaps ? Un non-voyant qui utilise une synthèse vocale ?
Bonjour,

Je suis novice pour toutes ces questions, je suis désolé de vous choquer avec mes questions naïves ou mes commentaires innapropriés mais peut être n'y a-t-il pas de place sur ce forum pour les débutants ou les non-initiés aux standards ? Smiley cligne

Ceci dit c'est sans doute plutôt en m'aidant à mieux maîtriser les CSS en examinant mon souci que je pourrai mieux prendre en compte les standards à l'avenir...

Merci pour vos remarques à ce sujet Smiley smile
Administrateur
cedriic a écrit :
mais peut être n'y a-t-il pas de place sur ce forum pour les débutants ou les non-initiés aux standards ? Smiley cligne

Si si parfaitement. D'ailleurs j'espère ne pas t'avoir vexé.

Mais tes affirmations semblaient tellement péremptoires qu'elles donnaient l'impression que tu étais vraiment sûr de toi et de tes méthodes.

Ravi de voir que tu acceptes les critiques justifiées et que tu es prêt à apprendre la conception web conforme Smiley cligne

Concernant l'accessibilité, je t'invite à un peu de lecture :
- http://openweb.eu.org/articles/intro_accessibilite/
- http://www.la-grange.net/accessibilite/
- http://edu.ca.edu/article70.html

Bonne lecture Smiley smile
Salut.

Pour les bordures, il suffit de supprimer la propriété border dans #global et de l'appliquer à #footer et à #contenu.

Pour la largeur, à toi de l'ajuster en ajoutant width: XXXpx à #global.
Sujet clos
Aller à