28173 sujets

CSS et mise en forme, CSS3

Incoporer dans <ul> et <li> à un simple menu

Bonjour à tous,
Voici le code d'un menu auquel j'aimerais incorporer des puces (et listes) pour en faciliter sa lecture...
Ne connaissant pas encore très bien les CSS, quelqu'un pourrait-il me montrer sur cet exemple?
En vous remerciant,

--> Le CSS :
<style>
#top {height: 222px;}
#ombrebordure {top: 242px;}
#container {
	width: 758px;
	top: 242px;
	left: 0;
	border-bottom: 1px solid #230;
}
#footer {text-align: right; padding-right: 20px;}


#gestionmenu  {text-align:right; padding-right: 5px; font-size: 9px; font-weight: bold; }
#gestionmenu  a {color: #fff; text-decoration: underline; }
#gestionmenu  a:hover {color: #fff; text-decoration: none }

#arrow {font: 20px/1 georgia; color: #F66804;}

h3.histo {font-style:italic; padding-left:20px; background: url(http://idata.over-blog.com/0/08/58/81/skin/v4/puce1.gif) no-repeat left center; font-size:90%; color: #672;}

#container h3 {	
	margin: 0;
	cursor: pointer;
	font-size: 11px;
}

#container h3 a:link, #container h3 a:visited {
	background: #230;
	color: #fff;
	padding: 0 30px;
	display: block;
	text-decoration: none;
}

#container h3 a:hover, #container h3 a:active {
	background: #ABBC47;
}

#container .stretcher {
	background: #fff url(http://idata.over-blog.com/0/08/58/81/skin/v4/topbgombre.gif) repeat-x top left;
	padding-left: 55px;
	border: 1px solid #230;
	border-width: 0 1px;
}

#container .stretcher a {
	text-decoration: none;
}
#container .stretcher a:hover {
	border-bottom: 1px dashed #F66804;
	padding-bottom: 2px;
}

</style>



--> Le menu :
<!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" lang="fr" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Menu</title>
</head>

<body>
	
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/08/58/81/prototype.lite.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/08/58/81/moo.fx.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/08/58/81/moo.fx.pack.js"></script>



<script type="text/javascript">
	function init(){
		var stretchers = document.getElementsByClassName('stretcher'); //div that stretches
		var toggles = document.getElementsByClassName('display'); //h4s where I click on
		
		var myAccordion = new fx.Accordion(
			toggles, stretchers, {opacity: false, duration: 500}
		);
	}
</script>
<div id="container">
			<span class="display"><a href="#0" id="menu">MENU 1</a></span>
			<div class="stretcher">
								<a href="article-3606911.html">Sous menu</a> <br> <br>
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
			</div>


			<span class="display"><a href="#0" id="menu">Menu 2</a></span>
			<div class="stretcher">
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
			</div>
						<span class="display"><a href="#0" id="menu">MEnu 3</a></span>
			<div class="stretcher">
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
			</div>
						<span class="display"><a href="#0">meNU 4</a></span>
			<div class="stretcher">
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
			</div>
						<span class="display"><a href="#0">mEnU 5 </a></span>
			<div class="stretcher">
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
			</div>			<span class="display"><a href="#0">MeNu 6</a></span>
			<div class="stretcher">
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
								<a href="article-3606911.html">Sous menu</a> <br> 
			</div>
			
</div>
  
				  			
    
    <div id="content">
       
      </div>




<script type="text/javascript">
		Element.cleanWhitespace('content');
		init();
</script>
		</body>
</html>
un truc comme ça pour le html
[code]
<ul>
<li> menu 1
<ul>
<li>sous menu 1</li>
<li>sous menu 2</li>
...
</ul>
</li>
...
</ul>

après pour le css il te suffit d'enlever les margin ou les padidng qu'il faut...
Salut masseuro, merci d'utiliser le balisage approprié pour le code.
Modifié par Alan (28 Dec 2006 - 11:54)
Sujet clos
Aller à