28173 sujets

CSS et mise en forme, CSS3

Positionnement relatif

Ohayo Gosaimasu !

Ca fait longtemps que je n'ai pas posté, je reviens vers vous en ces moments de troubles (Gandalf inside ^^), enfin bref ^^

J'ai commencé, dans le cadre de mes cours, à réaliser un portfolio. Ayant craqué sur l'interface de netvibes, j'ai décidé de m'en inspirer pour l'en tête...
=> http://portfolio.palleas.com

Le problème est que je n'arrive pas à aligner ma liste à puce en bas de mon header. Voila le code html :

	<body>
		<div id="enTete">
			<a href="#" title="cliquez ici pour ajouter du contenu">+ Ajouter du contenu</a> | 
			<form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>" id="rechercher_contenu">
				<label for="motCle">Rechercher :</label>
				<input type="text" id="motCle" name="motCle" title="Entrez ici le mot clé" />
				<input type="submit" value="Go!" />
			</form>
		</div>
		
		<div id="header">
			<ul id="menu">
				<li>PHP / MySQL</li>
				<li>Javascript</li>
				<li>Technologie</li>
				<li>Ouaib</li>
				<li>Rubrique 1</li>
				<li>Rubrique 2</li>
				<li>Rubrique 3</li>
			</ul>
		</div>
	</body>


et le css de l'en-tête

/****************************************
	header
****************************************/
#header {
background-image:url("images/degrade_header.jpg");
height:90px;
border:1px solid #f2f2f2;
}

#header #menu {
position:relative;
border:1px solid #000;
bottom:0;
}

#header #menu li{
display:inline;
padding:2px;
background-color:#64a3e4;
}


Le probleme, c'est que ca ne marche pas Smiley biggrin J'étais persuadé que de cette manière le bloc serait en bas, puisque 0 en bottom, mais non T_T

Sauriez vous me dire pourquoi ?
Merci d'avance !

Palleas
Bonsoir,
La position:relative n'est pas appropriée dans ton cas
puisqu'elle sert soit à donner à un block conteneur une position
de référence pour ses éléments descendant en position:absolute,
( lire à ce sujet http://www.pompage.net/pompe/pieds/ )
soit à decaler un élément de sa position initiale tout en conservant l'espace qu'il prenait avant le positionnement.

Tu devrais declarer


#header {
position:relative; /*reference pr le positionnement des éléments enfants en position absolue*/
background-image:url("images/degrade_header.jpg");
height:90px;
border:1px solid #f2f2f2;
}

#header #menu {
position:absolute;
border:1px solid #000;
bottom:0;
}

#header #menu li{
display:inline;
padding:2px;
background-color:#64a3e4;
}

Modifié par Hermann (29 Dec 2006 - 19:44)
Ah ouais... c'est un truc dont je n'étais pas vraiment sur... J'étais persuadé que lorsque l'on mettait un objet en postionnement absolu, il sortait du flux et se positionnait par rapport à l'élement parent en position absolue... Mwai, pour la clarté on repassera ^^ Quelqu'un a compris ce que je voulais dire ? T_T
Effectivement ca marche Smiley langue
Merci !

Par contre maintenant j'ai un petit soucis (et oui encore), il y a une lègere bande bleue lorsque l'on survol un des éléments de la liste, du fait de l'arriere plan. Pourtant le padding et le margin des tous les éléments sont remis à 0 (ca m'évite les mauvaises surprises)...

Comment ca se fait ? T_T
Sujet clos
Aller à