[Résolu] Liste à puce

Question

Miki19

29 May 2009 à 23:48

Bonsoir,

Je suis un novice qui débute en Xhtml & CSS et j'aurrais besoin un peu d'aide s'il vous plait, car là, je suis bloqué sur ce que je voudrais bien faire.

J'explique le souci :

j'aimerais créer une 2e liste à puce juste en dessous du menu principal, et j'ai beau essayé avec plein de truc dans le Xhtml & CSS mais je n'ai pas réussi à la faire correctement.

pourriez-vous m'aider pour le code à insérer et l'endroit où y mettre pour que ça marche correctement s'il vous plait. Je vous en remercie bcp d'avance.

Voici ce que j'aimerais bien faire avec l'exemple juste en dessous.

Modifié par Miki19 (05 Jun 2009 - 16:45)

Heyoan

30 May 2009 à 00:00

Hello,

à priori il s'agit simplement de 2 menus l'un en dessous de l'autre avec un zeste de css pour la présentation. Voir le tuto Créer des menus simples en CSS.

Miki19

2 Jun 2009 à 11:52

Merci bcp pour ta réponse, c'est ce que je pensais et j'ai fait quelques essaie mais j'ai pas réussi à le faire marcher correctement.

Voici ce que j'ai fait et j'aimerais obtenir le résultat comme dans l'exemple en dessous:

http://miki19.free.fr

XHTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Bienvenu</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
	</head>

	<body>
		
		<div id="conteneur">
							
					<!--************************************
																				
								Navigation				
													
					*************************************-->
					
			<div id="corps">
			
				<ul id="navigation">				
					<li class="current"><a href="index.html">Accueil</a></li>
					<li><a href="#">Lien</a></li>
					<li><a href="#">Lien</a></li>
					<li><a href="index.html">Contact</a></li>
				</ul>
				
				
				<div id="mini">	
				<ul>
					<li><a href="#">Lien</a></li>
					<li><a href="#">Lien 2</a></li>
					<li><a href="#">Lien 3</a></li>
					<li><a href="#">Lien 4</a></li>
					<li><a href="#">Lien 5</a></li>
					<li><a href="#">Lien 6</a></li>
					<li><a href="#">Lien 7</a></li>
					<li><a href="#">Lien 8</a></li>
				</ul>
				</div>
				
					<!--************************************
																				
								Contenu				
													
					*************************************-->
					
				<div id="contenu">
			
			
					<h1>Bienvenue</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ultricies. Praesent aliquet tempus arcu. Cum sociis natoque.</p>
            <p>Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel ante id quam accumsan porta. Morbi nec felis et ligula consequat rutrum. Fusce eget lacus quis purus fringilla malesuada.</p>
            <p class="droite">Posté le <a href="#">31/05</a>. <a href="#">9 Commentaires</a></p>
            
            <h1>Bienvenue</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ultricies. Praesent aliquet tempus arcu. Cum sociis natoque.</p>
            <p>Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel ante id quam accumsan porta. Morbi nec felis et ligula consequat rutrum. Fusce eget lacus quis purus fringilla malesuada.</p>
            <p class="droite">Posté le <a href="#">31/05</a>. <a href="#">9 Commentaires</a></p>
			
					
				</div>
				
           <div class="clear"></div> 
		   
				
				<div id="contenu_b">
				</div>	
				
				<h1>Image Exemple</h1>
				
				<div id="image">
				
				
				</div>
				
			</div>		
		</div>	
				
	</body>
</html>



CSS :

[code]

body
	{
		background:#3E4245;
		margin:0 auto;
		padding:0px;
		}


		
#conteneur
	{
		background:#FFF;
		margin:0 auto;
		padding:0px;
		width:802px;	
		}
		
		
	

	
#corps
	{
		width:782px;
		margin:0 auto;
		margin-top:80px;
		padding:0;
		}


	
#navigation
	{
		
		height:29px;
		margin:0 auto;
		margin-left:20px;
		padding:0;		
		}
				
#navigation li
	{
		float:left;
		list-style:none;
		padding:0;
		margin:0;		
		}
		

		
#navigation li a
	{
		background:url(images/nav.png) no-repeat right;
		display:block;		
		margin:0 2px 0 0;
		width:115px;
		height:30px;
		text-align:center;
		text-decoration:none;
		line-height:2.5em;
		color:#702020;
		font-weight:bold;
		font-size:12px;
		font-family:Georgia, "Times New Roman",Verdana, Geneva, sans-serif;		
		}

#navigation li.current a
	{
		background:url(images/nav.png) no-repeat left;
		color:#FFF;
		}
		
#navigation li a:hover
	{
		background:url(images/nav.png) no-repeat left;
		color:#FFF;
		}

#mini
	{
		background:url(images/contenu_h.png) no-repeat;
		height:29px;
		margin:0;
		padding:0;
		}
		
#mini li
	{
		float:left;
		list-style:none;
		
		margin:8px 5px 0 20px;
		}
		
#mini li a
	{
		text-decoration:none;
		line-height:0.5em;
		color:#FFFFFF;
		margin:0;
		padding:0;
		}

#mini li a:hover
	{
		text-decoration:none;
		color:#f50c2d;		
		}
		
#contenu
	{
		background:url(images/contenu.png) repeat-y ;		
		margin:0 auto;			
		padding:0 0 5px 0;
		}
		
.clear
	{
		clear:both; 
		}
		
#contenu h1,p
	{
		margin:0 auto;
		padding:0 20px;
		}
		
#contenu h1
	{
		color:#000000;
		text-align:center;
		margin:0 0 30px 0;
		}
		
#contenu_b
	{
		background:url(images/contenu_b.png) no-repeat;				
		margin:0 auto;			
		padding:0;	
		height:21px;
		}
		
#image
	{
		background:url(images/03.jpg) no-repeat;
		width:702px;
		height:462px;
		margin:0 auto;
		}
		
h1
	{
		color:#07b0ff;
		text-align:center;
		margin:30px 0 0 0;
		}

quelqu'un pourrai m'aider s'il vous plait, je galère depuis quelques jours.

Merci bcp d'avance pour votre aide.
Modifié par Miki19 (02 Jun 2009 - 12:37)

Heyoan

2 Jun 2009 à 13:01

Re',

le DIV #mini est à priori inutile car tu aurais pu styler directement le second élément UL. Quoi qu'il en soit il faut absolument renseigner les valeurs de margin et padding de cet UL car :
1) ce sont les valeurs par défaut qui créent le décalage.
2) voir cette astuce

Il faudra peut-être également créer un contexte de formatage sur le premier UL...

Miki19

2 Jun 2009 à 14:31

Merci pour ta réponse,

mais, j'y pensait aussi à ça et ça n'a rien donné, au contraire ça m'a décalé le 2e UL à droite sous Firefox.

http://miki19.free.fr/

XHTML modifié :





                                <ul id="mini">	
				
					<li><a href="#">Lien</a></li>
					<li><a href="#">Lien 2</a></li>
					<li><a href="#">Lien 3</a></li>
					<li><a href="#">Lien 4</a></li>
					<li><a href="#">Lien 5</a></li>
					<li><a href="#">Lien 6</a></li>
					<li><a href="#">Lien 7</a></li>
					<li><a href="#">Lien 8</a></li>
				</ul>

CSS modifié :



#mini
	{
		background:url(images/contenu_h.png) no-repeat;
		height:29px;
		margin:0;
		padding:0;
		}
		
#mini li
	{
		float:left;
		list-style:none;
		padding:0;
		margin:8px 5px 0 0;
		}

Modifié par Miki19 (02 Jun 2009 - 14:41)

Heyoan

2 Jun 2009 à 14:53

Miki19 a écrit :
au contraire ça m'a décalé le 2e UL à droite sous Firefox.

D'où l'idée d'un contexte de formatage :

#navigation {
   ...
   overflow: auto;
}

Miki19

2 Jun 2009 à 15:08

ok ça ramene le 2e UL sur la gauche, mais ça pose un autre souci sous IE cette fois-ci.

Heyoan

2 Jun 2009 à 15:12

alors utilise overflow:hidden

Miki19

2 Jun 2009 à 15:23

c'est ok avec le overflow:hidden

Merci, et pour le 1er UL et le 2e UL restent collé comme dans l'exemple en dessous, tu as une idée ?

Heyoan

2 Jun 2009 à 15:30

Par exemple :

#navigation {
   ...
   position: relative;
   top: 6px;
}

Miki19

2 Jun 2009 à 17:31

Je te remercie bcp Heyoan,

cela semble bien marcher, je connaissais cette propriété mais je l'ai complètement zappé,

ça prouve que je suis bien un novice Smiley rolleyes

.

Merci bcp & A+.

Heyoan

2 Jun 2009 à 17:38

Miki19 a écrit :
ça prouve que je suis bien un novice

Comme tous les webmasters l'ont été un jour ! Smiley smile

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne

Miki19

5 Jun 2009 à 16:46

Ok je le fais toute suite,

Merci bcp encore pour ton aide.

Sujet clos

Sémantique web et HTML

[Résolu] Liste à puce