[Résolu] Positionner verticalement une div dans une autre

Bonjour,

Je suis en train de travailler sur un thème pour le moteur de photoblog PixelPost.

Vous pouvez voir le résultat actuel à cette adresse

J'ai un soucis de positionnement vertical sur ma barre de titre/menu.

Voici le code que j'utilise actuellement :

La partie HTML :

<div id="header">
	<div id="title"><h1>ici le titre</h1></div>
	<div id="menu"><a href='#'>menu1</a> &nbsp; <a href="#">menu2</a></div>

	<div class="spacer">&nbsp;</div>
</div>

<hr/><br/>

La partie CSS :

#header
{	width: 100%;	}

#title
{	float: left;	}

#menu
{	float: right;
	margin-top: 4px;
}

.spacer
{	clear: both;
	font-size: 0;
}

#title h1
{	display: inline;
	font-size: 1.4em;
	font-weight: bold;
	text-align: right;
	color: #222;
}

Comme vous pouvez le voir, j'utilise un margin-top de 4 pixels sur la <div> menu pour la coller à la barre horizontale.

Cependant je ne trouve pas çà très "propre", surtout que çà ne marche pas bien quand on agrandit la taille de la police via le navigateur...

Et je ne connais pas d'autres méthodes... sauriez-vous m'aider ?

Question subsidiaire : comme vous pouvez le voir, je suis plutôt débutant... j'ai des difficultés avec la sémantique des balises, est-ce que vous auriez quelques conseils dans le cadre de cette page pour le choix des balises ?
Pour le moment, c'est une soupe de <div>

Merci d'avance,

Sébastien

PS: pour la question subsidiaire, désolé si c'est posté au mauvais endroit, faite moi signe et je reposterai dans la section idoine.
Modifié par deloscampos (04 Aug 2006 - 09:28)

En fait le <br>sert à un retour ligne et n'a pas à ma connaissance de valeur sémantique réelle.

Le <hr> sert à faire une séparation (par exemple entre tes grandes parties textuelles) et a donc par contre un sens sémantiquement parlant, sauf si le but est d'ajouter un simple trait. Dans ce cas un border-bottom est mieux.

deloscampos a écrit :
Question subsidiaire : comme vous pouvez le voir, je suis plutôt débutant... j'ai des difficultés avec la sémantique des balises, est-ce que vous auriez quelques conseils dans le cadre de cette page pour le choix des balises ?

Juste en passant, ce que je trouve très crade, c'est tes &nbsp; pour séparer tes menus

Tu devrais avoir

<div id='menu'>
  <a href='page1.html'>menu1</a>
  <a href='page2.html'>menu2</a>
  <a href='page3.html'>menu3</a>
</div>

ensuite, utilises les padding pour les espacer :

#menu a {
  padding-left: 2ex ;
}

Sinon, c'est vrai que pour les menus, on utilise généralement des listes à puces pour garder le coté hierarchique, mais ça c'est une autre histoire.

Salut,

easyzik a écrit :

Juste en passant, ce que je trouve très crade, c'est tes pour séparer tes menus

mais

Opquast a écrit :

Les hyperliens adjacents sont toujours séparés par au moins un caractère imprimable ou une image.

En ayant était voir les bonnes pratiques sur ce site, j'ai pu y lire ça.

Dans le cas présent, qui a raison et est-ce qu'un espace codé en HTML est considéré comme caractère imprimable?

Bonjour,

le terme "caractère imprimable" est trompeur.

Historiquement, il s'agissait selon WCAG1.0 d'intercaler entre les liens adjacents un caractère qui soit obligatoirement prononcé par les synthèses vocales, afin que l'utilisateur perçoivent immédiatement la séparation entre les liens.

Les lecteurs d'écran actuels ne posent plus ce type de problème.

Mais il subsiste une autre contrainte: faire apparaître à l'affichage (quelque-soit le mode de rendu avec/sans CSS, avec/sans images, avers/sans javascript, etc) un caractère permettant aux utilisateurs ayant un handicap visuel ou cognitif de faire de même.

L'espace sécable/insécable et ses variantes (padding CSS par exemple) n'est donc pas un caractère de séparation valable.

Le caractère le plus probant et le plus répandu est le pipe |. On peut également citer le tiret simple ou cadratin, ou le boulet. Les caractères plus exotiques présentent le risque de créer de la confusion. Enfin, les :: et autres :|: souvent utilisés sur les blogs sont proprement odieux dans un lecteur d'écran. Du point de vue de l'accessibilité, ils entrent dans le cadre de l'ascii-art, et doivent avoir une alternative textuelle (on retombe sur le pipe). C'est là où l'image citée par la BP Opquast est utile.

Les listes ul et ol, enfin, ne posent pas ce problème, sauf lorsqu'elles sont linéarisées. Dans ce cas, le séparateur est nécessaire.
Modifié par Laurent Denis (04 Aug 2006 - 11:22)

Merci pour ces précisions, je vais recoder le menu pour améliorer çà.
Séb