Debutant: Align vertical dans un <div>

Bonjour,

je souhaite alligner mon texte à l'interieur d'un <div> de 20px ( par exemple ), allignement vertical.
A part centre (horizontal), left, right, top et bottom pas de possibilité de centrer sur la vertical.

Par ailleurs j'ai un soucis concernant la position de ce texte dans le <div> sur IE il est plutot en bas et sur FF il se situe plutot centré ( tant mieux d'ailleurs ).

exemple ici : http://www.fileip.com/testCss/
Modifié par Fileip (23 Jul 2006 - 03:46)

Bonjour,

penser à
1. consulter la FAQ,
2. faire une recherche sur le forum
avant de poser une question !

Salut,

Au delà de ce problème ton code xhtml n'est pas juste...

Tu peux remplacer:

<div id="sitename">FileIP.com</div>

par :

<h1 id="sitename">FileIP.com</h1>

et pour ta liste, remplacer :

<div id="barremenu">
<li id="menu">
<a href="news.html">News.</a>
<a href="video.html">Vidéo.</a>
<a href="audio.html">Audio.</a>
<a href="divers.html">Divers.</a>
<a href="contact.html">Contact.</a>
</li>
</div>

par :

<ul id="barremenu">
	<li><a href="news.html">News.</a></li>
	<li><a href="video.html">Vidéo.</a>
	<li><a href="audio.html">Audio.</a>
	<li><a href="divers.html">Divers.</a>
	<li><a href="contact.html">Contact.</a></li>
</ul>

Les div servent surtout à regrouper des groupes de balises mais quand on peut les éviter, autant le faire... Avec ces codes, tu peux obtenir ton résultat sans autres ajouts.

Tu dois aussi éviter de définir la taille de tes textes en px car on ne peut pas les redimensionner sous IE ce qui pose quelques problèmes en terme d'accessibilité.

Pour çà, tu peux définir une taille d'origine en % :

body {
font : 90% "Palatino Linotype","Times New Roman",serif;
color: #000;
background-color: #FFF;
}

puis définir chaque élément avec une taille en em :

h1 {
font-size: 1em;
}

Concernant le centrage vertical, je te laisse consulter la FAQ.
Modifié par koala64 (23 Jul 2006 - 10:26)

koala64 a écrit :
Au delà de ce problème ton code xhtml n'est pas juste...
[remplacer div par h1 pour le titre du site]

Attention, un code juste est tout simplement un code syntaxiquement valide ! Utiliser une division (div) pour le titre du site, c'est tout à fait « juste » !

Par contre, ça n'est pas forcément pertinent, du moins si l'on se soucie du rendu non graphique du site : une fois la feuille de style désactivée, le rendu « minimal » fait-il toujours sens ? Les clients portables à petit écran, qui désactivent souvent les feuilles de style ou du moins certains aspects de celles-ci, conserveront-ils l'information « ceci est un titre de niveau supérieur » ? On peut en douter. Même chose pour les navigateurs non graphiques et les lecteurs d'écran.

Le choix de h1 est donc plus pertinent. Mais pas plus juste.

Sopo a écrit :
Bonjour,

penser à
1. consulter la FAQ,
2. faire une recherche sur le forum
avant de poser une question !

C'est le cas, mais à force de lire beaucoup d'article je passe surement au travers de l'info que je cherche.
Syndrome du debutant des que je trouve une nouvelle proprieté je la test de suite.
Suis souvent sur les tutoriaux, c'est vrai que je suis passé à coté de la Faq.

FileIP

koala64 a écrit :
Salut,

Au delà de ce problème ton code xhtml n'est pas juste...

Merci Koala64 je verifie mon code et fait les corrections necessaire.

Si j'ai bien compris le principe avec les CSS, a chaque clique sur un lien c'est tout le site qui se recharge et pas uniquement un <div>.
Je dois donc revoir toutes mes bases

FileIP.

mpop a écrit :
Le choix de h1 est donc plus pertinent. Mais pas plus juste.

Je n'ai pas dit le contraire même si la forme de mon message pouvait le laisser croire... En revanche, je ne sais pas si tu as vu la liste mais çà, c'était faux, ce pourquoi j'ai dit çà...
Modifié par koala64 (23 Jul 2006 - 13:12)

a écrit :

sitename

Tiens... Le dahu est de retour ?

a écrit :
Si j'ai bien compris le principe avec les CSS, a chaque clique sur un lien c'est tout le site qui se recharge et pas uniquement un <div>.
Je dois donc revoir toutes mes bases

Gluuups ! Quel rapport avec les CSS ? Dans n'importe quelle page HTML, en dehors des framesets, quand on clique sur un lien orienté vers une autre page, le navigateur charge la nouvelle page en entier ... De quelles bases parles-tu, en fait ?

Les techniques qui permettent de modifier le contenu d'une page sans rechargement de l'ensemble sont en général plus complexes qu'un "simple" lien et mêlent notamment le javascript et un language côté serveur (là je sens Laurent Denis qui se tient derrière moi, prêt à me fracasser le crâne à coups de nain de jardin si jamais je mentionne AJAX , mais heureusement, je n'en ferai rien, pasqu'AJAX j'y connait que dalle et puis je tiens à mes cheveux).