28172 sujets

CSS et mise en forme, CSS3

Aide css pour <li> [résolu]

Bonjour j'essaye de faire un menu de ce type

Liens ---------------Contact ------------- Nos services ------ information
--revue de presse------contactez-nous------ Livraison-------------qui sommes nous
--facebook-------------Nos bureaux------ ---Conditions-----------ou nous trouver

problème, j'arrive bien à aligner sur une ligne le niveau 1 (entête : liens contact ....) et cela se met bien correctement mais le reste se mets à l'horizontal :
ex
liens
revue de presse facebook

voici mon code :


<div class="contentText">
<div class="footer">

<ul class="first">
	<li>
		<h1>Liens</h1>
	</li>
	<li>Presse</li>
	<li>Professionnels</li>
	<li>Blog</li>
	<li>Facebook</li>
</ul>
<ul>
	<li>
		<h1>Contact</h1>
	</li>
	<li>Contactez-nous</li>
	<li>Demande de catalogue</li>
	<li>Catalogues interactifs</li>
</ul>
<ul>
	<li>
		<h1>Nos services</h1>
	</li>
	<li>Livraison rapide</li>
	<li>Paiement s&eacute;curis&eacute;</li>
	<li>Politique de confidentialit&eacute;</li>
	<li>Frais de port offerts d&egrave;s 60&euro;</a></li>
</ul>
<ul class="last">
	<li>
		<h1>Informations</h1>
	</li>
	<li>Qui sommes nous ?</li>
	<li>Notre showroom</li>
	<li>les salons</li>
	<li>Liens amis</li>
	<li>Labels</li>
</ul>
<ul class="horizontale">
	<li>Mentions l&eacute;gales</a></li>
	<li>Plan du site</a></li>
	<li> CGV</li>
	<li class="last">Cr&eacute;dits</li>

</ul>
</div>
</div>


Voici mon css




/* Footer */
div.footer ul.first{
	margin-left: 15px;
}

div.footer ul.last {
	background: none;
	padding-right: 0;
}

div.footer UL LI {
	font-size: 12px;
}

div.footer UL LI A {
	color: #373534;
	/*margin-left: 45px;*/
}

div.footer ul.first LI A {
	/*margin-left: 15px;*/
}



div.footer UL LI H1 {
	font-size: 13px;
	font-weight: normal;
	/*margin-left: 45px;*/
	text-transform: uppercase;	
}

div.footer ul.first LI H1 {
	/*margin-left: 15px;*/
}











div.footer ul.horizontale LI A {
	color: #ffffff;
}

div.footer ul.horizontale LI {
	border-right: solid 1px #ffffff;
	color: #ffffff;
	float: left;
	margin: 10px 0;
	padding: 0 10px;
}

div.footer ul.horizontale li.last {
	border-right: none;
}


div.footer ul.horizontale {
	background: none #7e736f;
	margin: 5px 0 0 0;
	width: 596px;
	padding: 0 0 0 294px;
}



Merci de votre aide
Modifié par oitsuki (17 Dec 2011 - 15:49)
Hello,
Si j'étais toi, j'utiliserais la méthode CSS du z-index.
ex :

<ul class="first">
      <h1>Liens</h1>
   <li>dessous 1</li>
   <li>dessous 2</li>
   <li>dessous 3</li>
</ul>
<ul class="deux">
      <h1>Contact</h1>
   <li>dessous 1</li>
   <li>dessous 2</li>
   <li>dessous 3</li>
</ul>
<ul class="trois">
      <h1>Nos services</h1>
   <li>dessous 1</li>
   <li>dessous 2</li>
   <li>dessous 3</li>
</ul>

et ton CSS:

.first {
   z-index: 1;
}
.deux {
   z-index: 2
   margin-left: 50px;
}
.trois {
   z-index: 3;
   margin-left: 100px;
}

Voilà, voilà, si tu as besoin d'aide, n'hésites pas ! Smiley lol
Modifié par castle (16 Dec 2011 - 22:47)
je te remercie mais cela ne fonctionne pas, j'ai essayé en rajoutant un float: leff, j'obtiens bien le résultat sur page html mais le deuxième est décalé vers le haut et le troisième est vraiment décalé vers le bas

ex
-----------------------------contact
---------------------------dessous1
lien------------------------dessous2
dessous1
dessous2
dessous3----------------------------------------Autre
-----------------------------------------------dessous1
-----------------------------------------------dessous2

Toutefois sur la page de mon outil, les dessous n'apparaissent pas du tout comme comme sur ma page html théorique. ils se situent bien en dessous du <h1>liens</li> mais l'un à côté de l'autre du style : dessous1dessous2dessous3

peut être ai je un conflit.

ex :
----------Liens
dessous 1dessous 2dessous
Bonjour,
Une piste ? Bien sûr, tu positionnes les divs à ta guise et tu adaptes! Smiley cligne 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
body {
	font:normal 12px arial,verdana,helvetica,sans-serif;	
	margin:0;
	padding:0}
	
ul.first {
	float:left; 
	width:149px;
	margin:0;
	padding:0;
	color:#000;
	list-style:none}
	
ul.first h1 {
	margin:2px 0;
	font-weight:bold;
	font-size: 18px;
	color:#000}

div.clear {
	clear:both;
	height:10px}
	
div.horizontale {
	background: #7e736f;
	color: #fff;
	font-size: 14px;
	width: 596px;
	padding: 50px 0;}

div.horizontale a {
	float:left;
	margin-left:12.5%;
	color:#fff;
	text-decoration:none;
	font-size:.8em}
</style>
</head>
<body>
	<div class="contentText">
		<div class="footer">
			<ul class="first">
				<li><h1>Liens</h1></li>
				<li>Presse</li>
				<li>Professionnels</li>
				<li>Blog</li>
				<li>Facebook</li>
			</ul>
			<ul class="first">
				<li><h1>Contact</h1></li>
				<li>Contactez-nous</li>
				<li>Demande de catalogue</li>
				<li>Catalogues interactifs</li>
			</ul>
			<ul class="first">
				<li><h1>Nos services</h1></li>
				<li>Livraison rapide</li>
				<li>Paiement s&eacute;curis&eacute;</li>
				<li>Politique de confidentialit&eacute;</li>
				<li><a href="http://www.karawan.fr/boutique/content/28-frais-de-port-offerts-des-60">Frais de port offerts d&egrave;s 60&euro;</a></li>
			</ul>
			<ul class="first">
				<li><h1>Informations</h1></li>
				<li>Qui sommes nous ?</li>
				<li>Notre showroom</li>
				<li>Les salons</li>
				<li>Liens amis</li>
				<li>Labels</li>
			</ul>

			<div class="clear"></div>

			<div class="horizontale">
				<a href="#">Mentions l&eacute;gales</a>
				<a href="#">Plan du site</a>
				<a href="#">CGV</a>
				<a href="#">Cr&eacute;dits</a>
			</div>
		</div>
	</div>
</body>
</html>
Je vous remercie, cela m'a bien aidé et j'ai pu résoudre mon problème.

j'ai encore du taf en css !!

Bonne journée
Sujet clos
Aller à