18100 sujets

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

Sprites en responsive

Bonjour,
J'ai un problème pour afficher mes sprites dans mon site en responsive(je viens de commencer à l'intégrer).Je vous donne le code css:


#reseauxsociaux {
	display: block;
	width: 100%;
	position: absolute;
}
#reseauxsociaux ul li {
	width: 100%;
	display: inline-block;
	max-width: 38px;
	max-height: 38px;
}
#facebook {
	background: url(images/reseaux-sociaux.gif) no-repeat left;
	background-size: 
	display: block;
	margin-right:1%;
	width: 38px;
	heigth: 38px;
	
}
#linkedin {
	background: url(images/reseaux-sociaux.gif) no-repeat center;
	width: 38px;
	heigth: 38px;
	display: block;
	margin-right: 1%;
	
}
#pinterest {
	background: url(images/reseaux-sociaux.gif) no-repeat right;
	width: 38px;
	heigth: 38px;
	display: block;
	margin-right: 1%;
}


#facebook:hover{
	background:url(images/reseaux-sociaux.gif) no-repeat left top;
	}
	
#linkedin:hover{
	background:url(images/reseaux-sociaux.gif) no-repeat center top;
	}	
	
#pinterest:hover{
	background:url(images/reseaux-sociaux.gif) no-repeat right top;
	}
Ta regle : background-size, n'a pas de valeur , il te faut la redéfinir pour chaque icône ainsi que le background-position, avec des valeurs en % si top, center ou bottom ne le font pas Smiley smile .

Tu n'as pas d'exemple en ligne pour montrer corriger Smiley smile

un exemple: http://codepen.io/gc-nomade/pen/Hezro
Modifié par gc-nomade (26 Jul 2014 - 12:01)
Bonsoir,
Merci de vos réponses et désolée de vous répondre que maintenant.
Quelqu'un a réussi à m'aider le problème maintenant est que les réseaux sociaux se posent à la verticale et non à l'horizontale de plus il se mettent pas à côte de la barre de menu.

Voici le code html à partir du body:

<body>
<div id="home">
<nav id="menu">
<img src="images/rubban-menu.gif" />
</nav>

<nav id="reseauxsociaux">
<ul class="float">
<li><a href="#" class="sprite fb">Facebook</a></li>
<li><a href="#" class="sprite linkedin">linkedin</a></li>
<li><a href="#" class="sprite pin">Pinterest</a></li>
</ul>
</nav>

<nav id="portrait">
<img src="images/portrait et badge_r2_c2.gif" />
</nav>

<nav id="fleche">
<img src="images/fleche-descendre.gif" />
</nav>


</div>

<div id="projets">
</div>

<div id="profil">
</div>

<div id="contact">
</div>
</body>

et le css:


html,body {
	height: 100%;
	width: 100%;
}
#home {
	background: url(images/fond-home.png) repeat;
	height: 100%;
}
#projets {
	background: #f9c16f;
	height: 100%;
}
#profil {
	background: url(images/fond-profil.gif) repeat;
	height: 100%;
}
#contact {
	background: #73bdb3;
	height: 100%;
}
#menu img {
	margin-top: 30px;;
	width: 100%;
	max-height: 49px;
	max-width: 723px;
}

#menu {
	text-align: center;
}

#portrait img {
	width: 100%;
	max-height:441px;
	max-width: 476px;
	padding-top: 120px;
	padding-left: 10%;
}

#portrait {
	text-align: left;
	
}

#fleche {
	width: 100%;
	max-height: 54px;
	max-width: 54px;
	padding-left: 50%;
}

.sprite{ background:url(images/reseaux-sociaux.gif) transparent 0 0 no-repeat; display: block; float: right; height: 35px; margin-right: 10px; text-indent: -2113132px; width: 35px;}
.fb{ background-position: 0 0;}
  .fb:hover{ background-position: 0 -50px;}
.linkedin{ background-position: -49px 0;}


  .linkedin:hover{ background-position: -49px -50px;}
  
.float {
	float: right;
}

.pin{ background-position: -99px 0;}
  .pin:hover{ background-position: -99px -50px;}


Je vous remercie d'avance.
Sujet clos
Aller à