28173 sujets

CSS et mise en forme, CSS3

Onglets avec largeur flexible

Salut pour tt le monde Smiley biggrin

Je suis habitué à utiliser les tableaux pour l'intégration et g du mal à limiter les nombres de divs actuellement.

Est ce que qq peut me conseiller à avoir un code html et css propre avec un nombre de div limité pour mon menu horizontal.

voici l'aperçu g arrivé à ce résultat mais je crois que mon code n'est pas propre sachant que le menu sera dynamique, le nombre des onglets et leur largeur varient suivant le contenu des pages.

upload/14593-ong.gif

voici le html

<div id="onglets">
	<ul><li><div class="puLeft"><img src="img/onglet_pu_active.gif" /></div>
	<div class="courant"><a href="#" class="ongletsActive">xxxxxxxxxx</a></div>
	<div class="puRight"><img src="img/onglet_right_active.gif"></div>
	</li>
	<li><div class="puLeft"><img src="img/onglet_pu_left.gif" /></div>
	<div class="back"><a href="#" class="onglets">xxxxxxxxxx</a></div>
	<div class="puRight"><img src="img/onglet_right.gif" width="12" height="22" /></div>
	</li>
	<li><div class="puLeft"><img src="img/onglet_pu_top.gif" /></div>
	<div class="back"><a href="#" class="onglets">xxxxxxxxxx</a></div>
	<div class="puRight"><img src="img/onglet_right.gif" width="12" height="22" /></div>
	</li>
</ul>
	</div>


et voici le css

#onglets {
	Width:549px;
	height:22px;
	font-size:90%;
	margin-left:29px;
   }
#ongletsBottom {
	Width:549px;
	height:9px;
	background-color:#EFEFEF;
	font-size:90%;
	margin-left:29px;
   }

#onglets ul li {
    margin: 0;
    padding: 0;
	list-style: none;
    display: inline;
	color:#0FDDD6;
   }
   

#onglets .puLeft {
	float:left;
	width:20;
	height:22;
   }
#onglets .puRight {
	float:left;
	margin-right:3px;
	width:20;
	height:22;
   }
#onglets .btTop {
	float:left;
	width:21;
	height:22;
   }
#onglets .courant {
	float:left;
	background-image: url(../img/onglet_bg_active.gif);
	background-repeat:repeat-x;
	line-height:19px;
	padding-top:3px;
	color:#F0D2AC;
	height: 19px;
   }
   
#onglets .back {
	float:left;
    background-image: url(../img/onglet_bg.gif);
	background-repeat:repeat-x;
	height:19px;
	line-height:19px;
	padding-top:3px;
}

a.ongletsActive {
  color:#0FDDD6;
  text-decoration: none;
  cursor: pointer;
}
a.onglets {
  color:#ffffff;
  text-decoration: none;
  cursor: pointer;
}


je veux bien enlever les images de mon code html j'était obligé car chaque onglet à une puce spécifique et parfois il nya pas de puce Smiley sweatdrop
si qq peut me conseiller je serai reconnaissante Smiley ravi
Modifié par sawsen (31 Oct 2007 - 17:38)
Hello !

Ton code me semble bien lourd pour un simple menu horizontal.
Il y a des tuto sur alsacréation (entre autres) pour faire des menus, en général ca requiert juste un ul/li (attention à l'interprétation de ces balises par les différents navigateurs).

Pour ce qui est des puces, sache juste que tu peux les spécifier en CSS !
avec list-style-image (un exemple ici )

Comme ça tu crées une classe par état :

li.puceSpécifique1
{
   // image = puce1.gif
}
li.puceSpécifique2
{
  // image = puce2.gif
}
etc.

(oui bon c'est pas un vrai code mais je vais partir et donc j'écris vite)

Voilà j'espère que ça te donne quelques pistes. Je prétends pas que c'est la seule solution ou la meilleure, mais c'est comme ça que je ferais.

Renaud
Merci pour tes précieux conseils.

J'essayerai de suivre ta méthode Smiley ravi
bonne navigation à tous
voila g fait qq améliorations mais je suis pas encore satisfaite Smiley fache
l'apperçu et impec mais mon code ça va pas.

voici le css

#onglets {
	Width:549px;
	height:22px;
	font-size:90%;
   }
#ongletsBottom {
	Width:549px;
	height:9px;
	background-color:#EFEFEF;
	font-size:90%;
   }

#onglets ul li {
    margin: 0;
    padding: 0;
	list-style: none;
    display: inline;
	color:#0FDDD6;
   }
 #onglets .puLeftActive {
	float:left;
	width:19px;
	height:22px;
	background-image:url(../img/onglet_pu_active.gif);
	background-repeat:no-repeat;
   }  

#onglets .puLeft {
	float:left;
	width:19px;
	height:22px;
	background-image:url(../img/onglet_pu_left.gif);
	background-repeat:no-repeat;
   }
#onglets .puLeftTop {
	float:left;
	width:21px;
	height:22px;
	background-image:url(../img/onglet_pu_top.gif);
	background-repeat:no-repeat;
   }
#onglets .puRight {
	float:left;
	margin-right:3px;
	height:22px;
	width:12px;
	background-image:url(../img/onglet_right.gif);
	background-repeat:no-repeat;
   }
#onglets .puRightActive {
	float:left;
	margin-right:3px;
	height:22px;
	width:12px;
	background-image:url(../img/onglet_right_active.gif);
	background-repeat:no-repeat;
   }
   

#onglets a{
  color:#ffffff;
  float: left;
  display:block;
  text-decoration:none;
  background-image: url(../img/onglet_bg.gif);
  background-repeat:repeat-x;
  height:19px;
  line-height:19px;
  padding-top:3px;
}
#onglets a.courant{
  color:#0FDDD6;
  float: left;
  display:block;
  text-decoration:none;
  background-image: url(../img/onglet_bg_active.gif);
  background-repeat:repeat-x;
  height:19px;
  line-height:19px;
  padding-top:3px;
  padding-right:2px;
}
#onglets a.courant2{
  color:#EED1AF;
  float: left;
  display:block;
  text-decoration:none;
  background-image: url(../img/onglet_bg_active.gif);
  background-repeat:repeat-x;
  height:19px;
  line-height:19px;
  padding-top:3px;
}


et voici le HTML

<div id="onglets">
          <ul>
            <li>
              <div class="puLeftActive"></div>
              <a href="#" class="courant">Résultats : </a><a href="#" class="courant2">i600</a>
              <div class="puRightActive"></div>
            </li>
            <li>
              <div class="puLeft"></div>
              <a href="#" class="onglets">Rayon Smartphone</a>
              <div class="puRight"></div>
            </li>
            <li>
              <div class="puLeft"></div>
              <a href="#" class="onglets">Tout les rayons</a>
              <div class="puRight"></div>
            </li>
          </ul>
        </div>
	    <div id="ongletsBottom"></div>


qq peux m'aider pour améliorer mon code et pour deminuer le nombre des divs utilisés Smiley decu
Merci
Sujet clos
Aller à