28172 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner horizontalement 4 icones dans une sidebar ?

Bonjour,

je rencontre des soucis pour simplement afficher 4 icones dans ma sidebar !

auriez vous une méthode à me conseiller plutot qu'une autre ?
j'ai essayé d'utiliser display:inline sans succès...


#widget { 
	display:inline;
	height:48px;
}

#home-logo {
    background-image:url('../images/Home.png');
    height:48px;
    width:48px;
}

#ecrire-logo {
    background-image:url('../images/Ecrire.png');;
    height:48px;
    width:48px;
}


Voici ce que j'ai tenté merci pour votre aide, car rien ne s'affiche !
ca marche avec display: block mais biens sur les icones sont alors les unes sous les autres ...

++
Modifié par billboc (23 Sep 2010 - 11:18)
pardon, voila le html...


<div id="widget">
	
<a href="http://poiavisys.com" title="url test" id="home-logo"></a> 		
<a href="http://eravisys.com" title="url test" id="ecrire-logo"></a>

	</div>
rien de plus normal, la balise <a> a un display par defaut en inline donc si elle ne contient rien, elle n'occupe aucun espace donc l'image de fond de ton <a< ne s'affiche pas.

Ton code n'affiche que du vide.
Salut.

Déclarer des images porteuses de sens dans la css?? Smiley fache
Remplace plutôt 
<a href="http://poiavisys.com" title="url test" id="home-logo"></a>
par 
<a href="http://poiavisys.com"><img title="url test" src="../images/Home.png" height="48" width="48" alt="texte alternatif qui va bien"/></a>


A+
Bonjour,
<edit ...='grillé , déja evoqué' />
Il n'y aucune raisons d'ejecter les images hors du document Smiley smile .

Ma demarche de base serait :

<div id="widget">
<a href="/" title="home" ><img src="../images/Home.png" alt="home"/></a> 		
<a href="ecrire" title="ecrire"><img src="../images/Ecrire.png" alt="ecrire" /></a>
</div>

et pour les styles par exemples (a tester ):

#widget  { 
/* hauteur puis baseline */
display:inline-block;
height:48px;
line-height:48px;
}
#widget a {
/* largeur */
display:inline-block;
width:48px;
/* centrage element puis contenu */
vertical-align:middle;
text-align:center;
}

Modifié par gc-nomade (16 Sep 2010 - 16:20)
@gc-nomade : De tête également, je dirais même que la règle sur #widget ne sert à rien aussi, mais un peu la flemme de vérifier. A voir
petite demande de précision supplémentaire Smiley confused

chez moi le code


src="../images/Home.png"


n'affiche rien, je suis obligé de remplir avec l'URL en entier, comment éviter ça ?

merci
L'adresse que j'ai mise était au pif, tu peux garder les urls relatives, mais en adaptant à ton arborescence de site.
super ! ça marche merci beaucoup

existe t-il une méthode simple pour faire en sorte que mes 4 icones soient automatiquement espacées de manière égale sur toute la largeur de la div ? ou faut il calculer les espaces à placer entre chaque ?

PS: ok je suis un peu feignant parfois... Smiley cligne
voici le code que je viens de rajouter 

#sidebar img {
    border:1px solid #5d5d5d;
}

#sidebar img a:hover {
	border:0px solid #5d5d5d;
	box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-webkit-box-shadow: 0 0 10px #000000;
}


le css pour a:hover ne fonctionne pas
est-ce que ma boulette vous saute aux yeux ?
merci pour votre aide
++
Salut,

billboc a écrit :
est-ce que ma boulette vous saute aux yeux ?
Un élément IMG ne peut en aucun cas contenir un lien. Smiley cligne

Au passage quand tu veux enlever un border existant ça ne sert à rien de mettre 0px, ou solid, ou même la couleur : il suffit de mettre border:none;

D'autre part il est plus logique d'utiliser les déclarations propriétaires (-moz et -webkit) avant la déclaration correcte qui sera implémentée un jour ou l'autre.

Ce qui donne :
#sidebar a:hover img {
	border: none;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}
Sujet clos
Aller à