Problème de header : un menu qui sort de la zone

Bonjour,

J'ai un header avec un logo cliquable pour retour à la page d'accueil.
Je souhaite insérer mon menu de navigation en bas de mon header et à l'intérieur de celui-ci au même niveau que mon logo. Mon header a une image de fond (rien de très inovant la dedans !!).

Le problème c'est que pour que mon menu ne se mette pas en dessous du header mais dedans je dois passer par un positionnement absolu.

Cela ne me semble pas très "propre" du point de vue du code mais peut-être me trompé-je ?

Qu'en pensez-vous ?

Voici ma css :

/* Elements du haut de page */
/* ************************ */

/* 1) Le header proprement dit */
#header {
	height: 89px;
	width:865px;
	background-color: #fff;
	background-image: url(img/fond-header-1.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#header h1 {
	font-size: 1em;
	height: 85px;
	margin: 0;
	padding: 0 0 0 40px;
	width: 110px;
}
#header h1 a {
	display: block;
	height: 85px; 
	text-indent: -5000px;
}

/* Les éléments dans le header */

#header ul {
	padding-left: 0;
	margin-left: 300px;
	color: #000;
	font-family: arial, helvetica, sans-serif;
	position:absolute;
	top:65px;
}

#header ul li { display: inline; }

#header ul li a {
	padding: 0.2em 1em;
	color: #000;
	text-decoration: none;
	border-right: 1px solid #ccc;
	text-transform: uppercase;
	font: bold 11px "Trebuchet MS", Arial;
}

#header ul li a:hover {
	text-decoration:underline;
}

et mon HTML :

<div id="header">
	<h1><a href="#" title="Extranet du Leem (retour à la page d'accueil)">Extranet du Leem</a></h1>

	<ul id="navlist">
		<li><a href="#" title="Profil">Profil</a></li>
		<li><a href="#" title="FAQ">FAQ</a></li>
		<li><a href="#" title="Contact">Contact</a></li>
		<li><a href="#" title="Recherche avancée">Recherche avancée</a></li>
	</ul>
	
</div>

j'ai pas bien compris ce que tu veux...

mais bon je vais essayer d'y répondre.

première interprétation : un float:left sur le h1 pourait suffir

deuxième interprétation : ton header fait 89px de haut et ton h1 fait 83px ceci est donc normal qu'il sorte ton menu du header pour l'affichage. il n'arrive tout simplement à résoudre cela correctement.

P.S: par principe évite de fixé les taillent de tes <div> préfère utilisé % ou 80% ne serait-ce que pour les width, cela évitera que ta page est un scroll horizontal sur des résolution de 800x600 px

masseuro a écrit :
par principe évite de fixé les taillent de tes <div> préfère utilisé % ou 80% ne serait-ce que pour les width, cela évitera que ta page est un scroll horizontal sur des résolution de 800x600 px

Personnellement, je n'adhère absolument pas à cette logique... Par contre, pour tes polices caroder, là évite franchement les unités fixes telles que le pixel ou le point.

edit: Ce bout de code:

#header {

	height: 89px;

	width:865px;

	background-color: #fff;

	background-image: url(img/fond-header-1.jpg);

	background-repeat: no-repeat;

	background-position: 0 0;

}

Peut être contracté en:

#header {
height:89px;
width:865px;
background:#fff url(img/fond-header-1.jpg) no-repeat 0 0;
}

Modifié par Benjamin D.C. (26 Dec 2006 - 16:06)

Je ne vois pas ce qui pose prôblème à l'utilisation des % benjamin...

c'est même extrement important d'un point de vue accessibilité. pense à ceux qui sont obligé de lire ton avec une loupe et qui ne voit que 200px de large...
et à toute la population qui est toujours au 800x600.

A quoi ça sert de faire des css et des div si c'est pour bloqué les tailles après
dans ce cas c'était limité mieux de rester avec des tableaux (sauf bien sur pour la maintenance, le poid et les synthèse vocales...)

masseuro a écrit :
Je ne vois pas ce qui pose prôblème à l'utilisation des % benjamin...

c'est même extrement important d'un point de vue accessibilité. pense à ceux qui sont obligé de lire ton avec une loupe et qui ne voit que 200px de large...
et à toute la population qui est toujours au 800x600.

A quoi ça sert de faire des css et des div si c'est pour bloqué les tailles après
dans ce cas c'était limité mieux de rester avec des tableaux (sauf bien sur pour la maintenance, le poid et les synthèse vocales...)

La question n'est pas là. Tu peux tout à fait combiner accessibilité et prise en main du design. Si le site doit être compatible avec une résolution de 800 par 600 pixels, il est préférable — selon moi — d'attribuer au conteneur principal une largeur fixe adéquate ou de se servir des propriétés min et max width.

Merci de vos conseils. Je vais effectivement "contracter" ces éléments. Pour l'instant, je me concentre sur mon problème...
Je suis aussi d'accord pour l'utilisation des % mais je dois utiliser des éléments de design qui ne sont pas de moi et la largeur peu orthodoxe de l'image du header en fait partie... Il faut dire aussi que les utilisateurs de mon site ne sont plus que 1,2% à avoir un écran =< à 800 px !!

Je me suis mal exprimée dans mon 1er post. En fait, c'est le menu <ul> qui ne rentre pas dans le header.

J'ai testé différentes solutions :
- position: relative;
- position: absolute;
- float:left;

Mais c'est toujours en dehors...

Voici l'effet que je veux obtenir :
http://www.ateliersdegiens.org/img/image1.jpg

Et maintenant l'effet que j'obtiens :
http://www.ateliersdegiens.org/img/image2.jpg

Enfin pour terminer, une petite question en passant : c'est quoi la différence fonctionnelle entre les unités em et px (em est-il une mesure de proportion par rapport à la taille de l'écran ?)
Modifié par caroder (26 Dec 2006 - 16:28)

Benjamin D.C. a écrit :
La question n'est pas là.

bah si justement quand on découpe une charte c'est à ce moment là qu'il faut penser accessibilité.. (ou alors j'ai rien compris à ce que tu as dit )

le premier probleme et que les min et les max width ne marchent pas sur IE et les personnes qui ont le plus besoin de loupes n'utilisent en général que IE et ne s'amuse pas à télécharger un autre navigateur (déjà bien qu'il soit sur le net )

bon et sinon le fait d'utiliser les min et les max ne corrige en rien le probleme, il n'y a que les % qui permettent de gérer les différences entre les résolutions. certes ce n'est pas évident au début mais avec un peu d'habitude on peut y arriver... sans pour autant rompre la charte graphique...


EDIT : on a posté en meme temps... em est un indice suivant la taille des caractères, cela possède l'avantage de pouvoir adapter son graphisme meme si l'utilisateur décide d'agrandir les polices par son navigateur.
Modifié par masseuro (26 Dec 2006 - 16:28)

bonjour,

tu n'aurais pas une url pour voir in situ ?

Houra ! J'ai la réponse !!
Il fallait tout simplement renseigner l'attribut margin:0; dans la classe
header ul li !

Merci à tous.