28173 sujets

CSS et mise en forme, CSS3

Interligne et <ul> / <li>

Bonsoir,

Voici un menu dans lequel j'aimerais que l'énoncé des sous menu soit espacés...
Je peux très bien y mettre deux <br> mais je prefère connaître comment mettre un interligne en les sous menus pour gerer l'espacement comme je veux..

J'ai également essayer d'adapter le menu avec des <ul> et <li> mais je n'y arrive pas... est ce possible?

Je vous remercie,
Monky

<!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>Peut-être une réponse ?</title>

<style type="text/css">
#container {
	width: 185px; 
}

#container h3 {	
	margin: 1px;
	cursor: pointer;
}

#container h3 a:link, #container h3 a:visited {
	padding-left: 15px;
    margin-top:1px;
	height : 18px;
    font: bold 11px Verdana, Arial, Helvetica, sans-serif;
    padding-top:4px; /* permet texte eu milieu \*/
	background: url(menu.jpg) 0 0px; /* couleur barre menu  \*/
	color: #ffffff; /* couleur text menu  \*/
	display: block;
	text-decoration: none; /* pas souligne ou souligne texte menu  \*/
}

#container h3 a:hover, #container h3 a:active {
        background: url(menu.jpg) 0 -24px; /* couleur barre survol menu  \*/
		color: #ffffff; /* couleur text menu  \*/
}

#container .stretcher {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
	background: #000000; /* couleur de fond des sous menu \*/
	padding-left: 5px; /* marge droite sous menu  \*/
	text-align: center;
}

#container .stretcher a {
	text-decoration: none; /* souligner texte sous menus  \*/
	color: #ffff99;
	padding-bottom: 200px;
}

#container .stretcher a:hover {
	text-decoration: underline; /* souligner texte au survol sous menus  \*/
	color: #ffffff;
	padding-left: 14px; /* marge droite sous menu  \*/
	padding-bottom: 200px;

}
</style>
</head>

<body bgcolor="#000000">
		

<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'); //h3s where I click on
		
		var myAccordion = new fx.Accordion(
			toggles, stretchers, {opacity: false, duration: 500}
		);
	}
</script>

<div id="container">
			<h3 class="display"><a href="#0">MENU</a></h3>
			<div class="stretcher">
				<a href="3606911.html" id="abc">Sous menu</a> <br>
				<a href="hb.html" id="abc">Sous menu</a> <br>
				<a href="hbbh.html" id="abc">Sous menu</a> <br>
			</div>

			<h3 class="display"><a href="#0">MENU</a></h3>
			<div class="stretcher">
				<a href="3606911.html" id="abc">Sous menu</a> <br>
				<a href="hb.html" id="abc">Sous menu</a> <br>
				<a href="hbbh.html" id="abc">Sous menu</a> <br>
			</div>
			
						<h3 class="display"><a href="#0">MENU</a></h3>
			<div class="stretcher">
				<a href="3606911.html" id="abc">Sous menu</a> <br>
				<a href="hb.html" id="abc">Sous menu</a> <br>
				<a href="hbbh.html" id="abc">Sous menu</a> <br>
			</div>
			
						<h3 class="display"><a href="#0">MENU</a></h3>
			<div class="stretcher">
				<a href="3606911.html" id="abc">Sous menu</a> <br>
				<a href="hb.html" id="abc">Sous menu</a> <br>
				<a href="hbbh.html" id="abc">Sous menu</a> <br>
			</div>
			
						<h3 class="display"><a href="#0">MENU</a></h3>
			<div class="stretcher">
				<a href="3606911.html" id="abc">Sous menu</a> <br>
				<a href="hb.html" id="abc">Sous menu</a> <br>
				<a href="hbbh.html" id="abc">Sous menu</a> <br>
			</div>
			
						<h3 class="display"><a href="#0">MENU</a></h3>
			<div class="stretcher">
				<a href="3606911.html" id="abc">Sous menu</a> <br>
				<a href="hb.html" id="abc">Sous menu</a> <br>
				<a href="hbbh.html" id="abc">Sous menu</a> <br>
			</div>
			
			</div>
  
				  			
    
    <div id="content">
       
      </div>




<script type="text/javascript">
		Element.cleanWhitespace('content');
		init();
</script>
		</body>
</html>

Modifié par Monky (29 Dec 2006 - 20:36)
Bonsoir,
Tout d'abord les <br> ne sont pas fait pour l'utilisation que tu en fais
mais pour forcer une rupture de ligne.
Etant donné que les liens <a> sont des élément de type inline,
il n'acceptent pas les marge veticales.
Tu dois donc en faire des blocks (> display:block) qui eux acceptent
les marges verticales er génère un retour chariot au dessus et
au dessous de l'élément.
Imbriquer tes liens dans un div n'est pas forcémment nécessaire et
l'utilisation d'une liste non ordonnée (UL) n'est peut-être pas la meilleur solution dans ton cas. Tu dois choisir entre ta structure actuelle
et une liste de définition sous la forme:
<dl>
<dt>MENU</dt>
<dd>sous-menu</dd>
<dd>sous-menu</dd>
<dd>sous-menu</dd>
</dl>

Tu ne peux avoir qu'un seul ID par pages. (id="abc")

Tu as oublié les commentaires javacript.(// <![CDATA[) et CSS.

Essayes avec ça
<!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>Peut-être une réponse ?</title>
<style type="text/css">
<!--
body {background:#000;}
#container a:link {
	display:block; 
	margin-bottom: 5px;
	}
#container {
	width: 185px; 
}
#container h3 {	
	margin: 1px;
	cursor: pointer;
}
#container h3 a:link, #container h3 a:visited {
	padding-left: 15px;
    margin-top:1px;
	height : 18px;
    font: bold 11px Verdana, Arial, Helvetica, sans-serif;
    padding-top:4px; /* permet texte eu milieu \*/
	background: url(menu.jpg) 0 0px; /* couleur barre menu  \*/
	color: #ffffff; /* couleur text menu  \*/
	display: block;
	text-decoration: none; /* pas souligne ou souligne texte menu  \*/
}
#container h3 a:hover, #container h3 a:active {
        background: url(menu.jpg) 0 -24px; /* couleur barre survol menu  \*/
		color: #ffffff; /* couleur text menu  \*/
}
#container .stretcher {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
	background: #000000; /* couleur de fond des sous menu \*/
	padding-left: 5px; /* marge droite sous menu  \*/
	text-align: center;
}
#container .stretcher a {
	text-decoration: none; /* souligner texte sous menus  \*/
	color: #ffff99;
}
#container .stretcher a:hover {
	text-decoration: underline; /* souligner texte au survol sous menus  \*/
	color: #ffffff;
	padding-left: 14px; /* marge droite sous menu  \*/
}
-->
</style>
</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">
// <![CDATA[
	function init(){
		var stretchers = document.getElementsByClassName('stretcher'); //div that stretches
		var toggles = document.getElementsByClassName('display'); //h3s where I click on
		
		var myAccordion = new fx.Accordion(
			toggles, stretchers, {opacity: false, duration: 500}
		);
	}
// ]]>
</script>
<div id="container">
	<h3 class="display"><a href="#0">MENU</a></h3>
	<div class="stretcher"> <a href="3606911.html" >Sous menu</a> <br>
		<a href="hb.html" >Sous menu</a> <br>
		<a href="hbbh.html" >Sous menu</a> <br>
	</div>
	<h3 class="display"><a href="#0">MENU</a></h3>
	<div class="stretcher"> <a href="3606911.html" >Sous menu</a> <a href="hb.html" >Sous menu</a> <a href="hbbh.html" >Sous menu</a> </div>
	<h3 class="display"><a href="#0">MENU</a></h3>
	<div class="stretcher"> <a href="3606911.html" >Sous menu</a> <br>
		<a href="hb.html" >Sous menu</a> <br>
		<a href="hbbh.html" >Sous menu</a> <br>
	</div>
	<h3 class="display"><a href="#0">MENU</a></h3>
	<div class="stretcher"> <a href="3606911.html" >Sous menu</a> <br>
		<a href="hb.html" >Sous menu</a> <br>
		<a href="hbbh.html" >Sous menu</a> <br>
	</div>
	<h3 class="display"><a href="#0">MENU</a></h3>
	<div class="stretcher"> <a href="3606911.html" >Sous menu</a> <br>
		<a href="hb.html" >Sous menu</a> <br>
		<a href="hbbh.html" >Sous menu</a> <br>
	</div>
	<h3 class="display"><a href="#0">MENU</a></h3>
	<div class="stretcher"> <a href="3606911.html" >Sous menu</a> <br>
		<a href="hb.html" >Sous menu</a> <br>
		<a href="hbbh.html" >Sous menu</a> <br>
	</div>
</div>
<div id="content"> </div>
<script type="text/javascript">
// <![CDATA[
		Element.cleanWhitespace('content');
		init();
// ]]>
</script>
</body>
</html>

Modifié par Hermann (29 Dec 2006 - 23:17)
Sujet clos
Aller à