28172 sujets

CSS et mise en forme, CSS3

Flottant qui sort de son conteneur

Salut tout le monde,
J'ai un souci de présentation avec une boite flottante.
Je voudrais positionner une boite flottante à droite dans les marges de ma page.
Cette boite flottante contient une liste d'item.
Mais à chaque fois que j'essaye de mettre la boite #nav_top à droite elle sort du conteneur #top où je l'ai positionner.
J'ai mis des border à chaque boite pour voir le phénomène.
Comment puis je faire pour que la boite #nav_top s'aligne à droite et reste à l'intérieur de la boite #top
Je vous remercie pour votre aide

Voici ma feuille de style:

body {
	background:#F0F0F0;
	padding:0pt;
	text-align:center;
	font-family:'Trebuchet MS',Verdana,Arial,Helvetica,Sans-Serif;
	font-size:81.25%;
	/**/
	color:yellow;
	border:1px solid;
}

#page_margins { 
	width: 95%; 
	min-width: 740px; 
	max-width: 90em; 
	margin:auto; 
	text-align:left; 
	position: relative;
	/**/
	color:green;
	border:1px solid;
}

#page {
	background:#FFFFFF;
	/**/
	color:red;
	border:1px solid;
}

#header {
	height:100px;
	color:#287C0A;
	clear:both;
	/**/	
	margin:2px;
	border:2px solid;
}

#nav {
	clear:both;
}


 #top { 
 	background: #F0F0F0;
        /**/
	color:blue;
	border:1px solid;
 }  
 
 #nav_top {
 	float:right;
}

#nav_top ul {
  margin:0;
  padding:0;
}

#nav_top li{
	list-style-type: none;
	display:inline;
  margin:0;
  padding:0;
  }

#nav_top a {
  padding:0 0 0 9px;
  text-decoration:none;
  }


et voici le code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
	<head>
		<title>voici un beau titre</title>
	</head>
	<body>
		<!-- page_margins Begin -->	
		<div id="page_margins">
                         <!-- top Begin -->	
			<div id="top">  
				<div id="nav_top">
				   <ul>
					<li id="current"><a href="#"><span>M1</span></a></li>
					<li><a href="#"><span>M2</span></a></li>
					<li><a href="#"><span>M3</span></a></li>
					<li><a href="#"><span>M4</span></a></li>
				    </ul>
				</div>
			</div>  
                        <!-- top end -->	
			<!-- page Begin -->	
			<div id="page">				
				<!-- Header Begin -->			
				<div id="header">
					<h1>Acceuil</h1>
				</div>
				<!-- Header End -->			
				<!-- Nav Begin -->		
				<div id="nav">
                                        nav
				</div>
				<!-- Nav End -->		
				<!-- Main Begin -->
				<div id="main">
                                       MAin 
				</div>
				<!-- Main End -->
				<!-- Footer begin-->
				<div id="footer">
					footer
				</div>
				<!-- Footer End -->
			</div>
			<!-- page end -->	
		</div>
		<!-- page_margins end -->	
	</body>
</html>

Modifié par spaceibiza (02 May 2008 - 08:33)
Sujet clos
Aller à