28220 sujets

CSS et mise en forme, CSS3

Position absolue sur site centré

Bonjour,

Ici :
http://root.jeromine.com/tmp/tab7.htm

Mes onglets <#nav> sont positionnés en absolu par rapport à leur contener <#top>, et dans un site centré <#container> :

#container /* CONTAINER GENERAL AVEC SKYSCRAPER */
{
width: 900px;
margin: auto;
background-color: white;
color: #333;
padding: 0px;
line-height: 130%;
text-align: left;
}

 #top {
	background : #AAEFAA  ;
	height : 79px;
	border-bottom : 0px solid #000;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 11px;
	
}
 

#nav {
	display : block;
	position : absolute;
	 right : 100px;
	top : 54px;
	margin : 0;
	padding : 0;
	list-style : none;
}

et dans le HTML :

<div id="container">
 
 
 	<div id="top"> 
		<h1><a href="/"><img src="i/logo.png" alt="logorhée" border="0" /></a></h1>
	<ul id="nav">
	  <li id="home"><a href="#">tab 1</a></li>
	  <li id="info"><a href="#" >tab 2</a></li>
	  <li id="product"><a href="#">tab 3</a></li>
	  <li id="directory"><a href="#">tab 4</a></li>
	  <li id="compare"><a href="#">tab 5</a></li>
	</ul>
	</div>
 
 
</div>

Forcément, lorsque je resize la fenêtre les onglets se décale du bloc vert #top.
Comment placer mes onglets horizontalement où je veux et de sorte qu'ils restent dans le bloc vert ?

Serait-ce la quadrature du cercle ?...

Merci
Modifié par nico1000 (07 Apr 2005 - 16:25)
Administrateur
Salut,

nico1000 a écrit :

Mes onglets <#nav> sont positionnés en absolu par rapport à leur contener <#top>, et dans un site centré <#container>
Non : #top et #container ne sont pas positionnés donc n'ont aucune influence sur le placement de #nav.

Un objet positionné se place par rapport à un conteneur uniquement si celui-ci est lui-même positionné, ce qui n'est pas le cas ici : ton élément #nav se place par rapport à la balise racine (<html>) puisqu'aucun de ses conteneurs ancêtres ne sont positionnés.

Tout cela est expliqué dans le tutoriel sur le positionnement, ainsi que dans le tutoriel sur le centrage.

Bonne chance Smiley cligne
Modifié par Raphael (07 Apr 2005 - 16:31)
A mon humble avis tu devrais positionner ton conteneur général en relatif et comme ça c'est lui qui donne la position d'origine pour les absolute du reste du flux... enfin c'est ce que je fais moi.. Smiley smile
Sujet clos
Aller à