18041 sujets

Questions générales et questions de débutants

Problème d'affichage et d'imbrications : passer de id à class

Bonjour,

J'ai un problème assez basique, détecté par W3C et que je voudrais régler pour rendre plus optimal mon site web!
Il s'agit d'une erreur concernant les id et class : j'ai appliqué à deux éléments l'attribut "id"... biensur c'est faux car il faut appliquer "class". Mais rien ne va plus quand je commence à corriger le fichier tpl (html) et le css. La tache est rendu difficile par les imbrications (ça vient du fait qu'il y a un div, ul, li, img etc...).

Voici le code html d'un mes deux éléments pour l'instant (celui que je vous montre s'appelle bestsellers.tpl, il y en a un identique s"appelent newproduct.tpl). J'ai biensur changé <div id="bestsellers_block_center"> par <div class="bestsellers_block_center"> :


<div id="bestsellers_block_center">
	<h2><a href="{$base_dir}top-des-ventes" title="top des ventes">  Tableaux les    plus vendus</a></h2>
	
		<ul>
		
		{foreach from=$best_sellers item=product name=myLoop}
			  <li class="bestseller1">
<h3><a href="{$product.link}" title="$product.name|escape:'htmlall':'UTF-8'}">{$product.legend|truncate:20:""}</a></h3>
<a href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}">
			      <img src = "/img/p/{$product.id_image}-medium.jpg" height="{$mediumSize.height}" width="{$mediumSize.width}" alt="{$product.legend}" />
			    </a>
			    <p>
			    A partir de {$product.price}&euro; <a href="{$product.link}" title="Voir {$product.name|escape:'htmlall':'UTF-8'}">Voir le produit</a>
			    </p>
			  </li>
			  
		{/foreach}
		</ul>
		
</div>


Et voici mon code css à modifier (je sais qu'il faut remplacer les # par des . mais après question imbrication je suis paumé Smiley decu ). Pour ne pas alourdir le message j'ai mis des [...].

/* BEST SELLERS BLOCK CENTER */

#bestsellers_block_center{
float: left;
}

#bestsellers_block_center ul{
list-style-type: none;
}

#bestsellers_block_center ul li{
float: left;
}

#bestsellers_block_center .bestseller1{
    margin: 13px;
    margin-bottom: 5px;
    float: left;
    width: 160px;
    height: 160px;
    color: white;
    background: url(../img/vignettecarree.png) no-repeat 0 0;
}

#bestsellers_block_center .bestseller1 p{
[...]
}

#bestsellers_block_center .bestseller1 p a{
  [...]
}

#bestsellers_block_center .bestseller1 a img{
[...]
}


#bestsellers_block_center ul li h3{
    text-align: center;
}

#bestsellers_block_center ul li h3 a{
 [...]
}

#bestsellers_block_center ul li a img{
 [...]
}

#bestsellers_block_center ul li p a{
   [...]
}


Quelqu'un pourrait-il m'aider? Quelles sont les solutions que vous me proposez?
Merci pour votre aide!
Salut,

pour la prochaine fois c'est plus facile de montrer directement le code html généré. Smiley cligne

Sinon en CSS pour cibler un id mon_id on utilise 
#mon_id { }
et pour cibler une class ma_classe on utilise 
.ma_classe { }

Voir les sélecteurs.
Wow impressionant la rapidité de la réponse !! Merci beaucoup, je fais ça et je vous reviens!
Oui Heyon j'ai bien compris qu'en CSS pour cibler un id on utilise #mon_id { } et pour cibler une class on utilise .ma_classe { }
Mais je m'en sors plus du tout quand il s'agit de transformer en css les id en class...
par exemple j'ai transformé cet id...
#bestsellers_block_center ul li a img{ 
 [...] 
}

..en class de la manière suivante :
.bestsellers_block_center ul li a img{ 
 [...] 
}

en suivant ton aide, je n'obtiens pas du tout ce que je voulais au départ! Ma feuille de style n'est pas suivie avec la class, mais l'était très bien avec l'id.
Je pense qu'il y a un certain ordre dans lequel il faut positionner ul li a et img. Il ne suffit pas de remplacer le dièse par un point Smiley decu
Salut salut,

Pour "transformer" une id en classe ou le contraire, effectivement il suffit de remplacé le diez par le point ! Il n'y a pas plus de complication.

A mon avis ton problème vient de ton html (id en maj ? oublié de guillemet ? on sait jamais ^^)
Sujet clos
Aller à