modifier la class logo du reste des images

gaston

Avril 2013

Bonjour,

Je suis en train de faire un site et j’aimerai pour un affichage smatphone, réduire les logo, documents d’articles à 100% de largeur de mon écran. Pour l’instant c’est du responsive design.

Donc,
J’ai fait

@media(max-width: 400px)
{img
{height:auto;
width:100%;
} }

Alors ça marche, mais mon souci et que ça agrandi mon logo (qui est plus petit) a 100% de la largeur de l’écran, en cherchant dans les pages html je remarque que toute les image ont

< img class="spip_logos">

donc je fais 
{img.spip_logos
{height:auto;
width:100%;
} }

Mais je trouve pas comment différencier mon logo( je voudrai qu’il reste en taille fixe (115px)) du reste de mes images

Comment faire pour changer cette classe, l’écraser par un autre css etc ///

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0

gaston

Avril 2013

Je precise que quand je parle du logo en taille fixe = logo_site
Indiquez l’intérêt que vous portez à cette réponse

0

gaston

Avril 2013

Bon en faite c’est pas lié a Spip, il y a un moyen simple par css,
dans mon header ; il suffit de deux div une en % pour la largeur , et l’autre qui contient mon logo en pixel (150px) pour sa largeur, je centre mon logo en % (left 50%) asssocié a un margin-left négatif de la moitié de la largeur de mon logo (75px).
<div id="logo_site"> <div class="logo_site"> <a rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>"> [(#LOGO_SITE_SPIP) ] </a> </div> </div> #logo_site {position:absolute; width:100%; height:auto; background-color:red; left:0; top:0; display: block; clear: both; float: none; margin: 0 auto;} .logo_site {position:absolute; width:150px; height:200px; top:0; left:50%; margin-left:-75px; display: block; float: none; }
Indiquez l’intérêt que vous portez à cette réponse

0

said

Juillet 2013

S « »