28173 sujets

CSS et mise en forme, CSS3

[résolu] Div ou class ?

Bonjour

Je suis entrain de mettre en place une page "annuaire", pour ce faire, je souhaiterai utiliser 4 ou 5 divs identiques alignées horizontalement.
J'ai déja mis en page la première div
http://www.hasparren.net/taina/annuaire.html
Ne pouvant dupliquer une div avec un nom identique, puis je utiliser les class ? J'ai vainement essayer de le faire, sans résultats Smiley decu

En fait, je souhaite trouver une solution afin de ne pas utiliser trop de div
Si vous avez une piste ? merci
Bonne journée

Essai en dupliquant la div "annuaire"
http://www.hasparren.net/taina/annuaire2.html

code css :
#annuaire {
margin-top: 20px;
width: 100%;
background-color: red;
}
#annu1 {
float: left;
width: 33%; 
background-color: yellow;
}
#annu2 {
float: left;
width: 33%; 
background-color: blue;
}
#annu3 {
float: left;
width: 33%; 
background-color: green;
}


code html :
<div id="annuaire"><span class="titre">Hasparren</span>
<div id="annu1"><ul>
<li><a title="" href="taina5.html">Associations</a></li>

<li><a title="Larressore, son histoire ..." href="taina5.html">Produits r&eacute;gionaux </a></li>
</ul></div>
<div id="annu2"><ul>
<li><a title="" href="taina5.html">Associations</a></li>
<li><a title="Larressore, son histoire ..." href="taina5.html">Produits r&eacute;gionaux </a></li>
</ul></div>
<div id="annu3"><ul>
<li><a title="" href="taina5.html">Associations</a></li>
<li><a title="Larressore, son histoire ..." href="taina5.html">Produits r&eacute;gionaux </a></li>

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

Modifié par africa (13 Oct 2007 - 19:17)
Hello,

Si tu veux réutiliser un même type d'élément plusieurs fois dans ta page il te faut utiliser des classes, pas des id.

Dans ton cas en plus, si tu veux éviter d'avoir trop de div, ceux qui encadrent tes <ul> sont inutiles. Tu peux mettre directement les <ul> les uns à la suite des autres en leur appliquant une classe (au lieu de l'appliquer aux divs)

Par exemple :

<div class="annuaire">
	<h3>Hasparren</h3>
	<ul class="annu1">
		<li><a title="" href="taina5.html">Associations</a></li>
		<li><a title="Larressore, son histoire ..." href="taina5.html">Produits régionaux </a></li>
	</ul>
	<ul class="annu2">
		<li><a title="" href="taina5.html">Associations</a></li>
		<li><a title="Larressore, son histoire ..." href="taina5.html">Produits régionaux </a></li>
	</ul>
	<ul class="annu3">
		<li><a title="" href="taina5.html">Associations</a></li>
		<li><a title="Larressore, son histoire ..." href="taina5.html">Produits régionaux </a></li>
	</ul>
</div>  





.annuaire {
margin-top: 20px;
width: 100%;
background-color: red;
}
.annu1 {
float: left;
width: 33%; 
background-color: yellow;
}
.annu2 {
float: left;
width: 33%; 
background-color: blue;
}
.annu3 {
float: left;
width: 33%; 
background-color: green;
}

Modifié par Tymlis (11 Oct 2007 - 09:45)
Sujet clos
Aller à