28172 sujets

CSS et mise en forme, CSS3

[résolu] CSS : Aligner des images

Bonjour à tous,

Je suis graphiste Web mais une vraie bille en HTML même si je connais quelques bases. Je suis en train de réaliser un nouveau site Internet pour mon entreprise et j'essaye en même temps d'apprendre la programmation par moi-même.

Sauf que là, petit problème. Je sais qu'il ne doit pas être difficile à résoudre mais j'ai beau chercher je ne parviens pas à faire ce que je veux.

Je vous explique brièvement en vous donnant tout d'abord ce lien qui rédige vers ma page de test : 
www.aurelienhamel.fr/perso/AH/index.html


Le problème, c'est que j'aimerais que les 3 icônes Facebook, Twitter et YouTube en haut à droite soient alignés sur la même ligne.

De plus, j'ai mis un Hover sur Twitter comme pour les 2 autres vignettes mais ça ne fonctionne par pour celle là bizarrement. Je vous met le code ci-dessous.

CSS : 

/* Réseaux sociaux */	

#reseaux {
	width:940px;
	height:30px;
	float:left;
	text-align:right;
}


/* Réseaux sociaux : Twitter */	

#Facebook {
	background: url("./Images/F.png") no-repeat;
	left:858px;
	height:24px;
	position:relative;	
}
	
#Facebook:hover {
	background: url("./Images/F-hover.png") no-repeat;
}	


/* Réseaux sociaux : Facebook */	

#Twitter {
	background: url("./Images/T.png") no-repeat;
	left:887px;
	height:24px;
	position:relative;	
}
	
.Twitter:hover {
	background: url("./Images/T-hover.png") no-repeat;
}


/* Réseaux sociaux : YouTube */	

#Youtube {
	background: url("./Images/Y.png") no-repeat;
	left:916px;
	height:24px;
	position:relative;	
}
	
#Youtube:hover {
	background: url("./Images/Y-hover.png") no-repeat;
}


HTML :

    	<div id="reseaux">
        
			<div id="Facebook">
            	<a href="#" title="Facebook" target="_blank" class="Facebook"></a>
            </div>   
			<div id="Twitter">
            	<a href="#" title="Twitter" target="_blank" class="Twitter"></a>
            </div>  
			<div id="Youtube">
            	<a href="#" title="Youtube" target="_blank" class="Youtube"></a>
            </div>
            
        </div>


J'ai essayé plusieurs paramètres différents mais a chaque fois j’obtiens un résultat qui me conviens pas et qui ne donne pas réellement ce que je veux. Pourtant je suis sur que c'est tout bête...

Si quelqu'un pouvais me donner un petit coup de pouce, ça serait sympa de sa part ! Smiley smile

Merci à vous !
Modifié par DKProject (05 Sep 2012 - 15:43)
Pour l'alignement des images, il faut mettre un inline-block.

Pour le hover de twitter, regarde la coloration du code que tu as posté, tu vas vite comprendre Smiley cligne . / #
Bonjour,

Merci pour le hover, effectivement, erreur bête.

Pour le "inline-block", je viens d'essayer mais soit mes icônes disparaissent, soit elles restent à la même place. J'ai essayé de l'appliquer uniquement à #reseaux et ensuite uniquement aux trois catégories #Facebook, #Twitter et #Youtube mais ça ne marche pas.

Peut-être est-ce que je dois supprimer quelque chose.
En réalité c'est ce que j'avais fais avant mais je ne vois pas comment intégrer les Hover des images par la suite...

http://www.aurelienhamel.fr/perso/AH/index.html

J'ai fais quelques modifications : 

    	<div id="reseaux">
        
        	<a href="http://www.facebook.com/" title="Facebook" target="_blank" id="Facebook"> <img src="Images/F.png" title="Facebook" alt="Mon compte Facebook" class="Facebook" /> </a>
        	<a href="http://www.twitter.com/" title="Twitter" target="_blank" id="Twitter"> <img src="Images/T.png" title="Twitter" alt="Mon compte Twitter" class="Twitter" /> </a>
                <a href="http://www.youtube.com/" title="Youtube" target="_blank" id="Youtube"> <img src="Images/Y.png" title="Youtube" alt="Ma chaîne Youtube" class="Youtube" /> </a>
            
        </div>


/* Réseaux sociaux */	

#reseaux {
	display:block;		
	width:940px;
	height:30px;
	text-align:right;
}


/* Réseaux sociaux : Twitter */	

#Facebook {
	background: url("./Images/F.png") no-repeat;
	left:858px;
	height:24px;
	width:24px;
}

#Facebook:hover {
	background: url("./Images/F-hover.png") no-repeat;
}	


/* Réseaux sociaux : Facebook */	

#Twitter {
	background: url("./Images/T.png") no-repeat;
	left:887px;
	height:24px;
	width:24px;
}

#Twitter:hover {
	background: url("./Images/T-hover.png") no-repeat;
}	


/* Réseaux sociaux : YouTube */	

#Youtube {
	background: url("./Images/Y.png") no-repeat;	
	left:916px;
	height:24px;
	width:24px;
}

#Youtube:hover {
	background: url("./Images/Y-hover.png") no-repeat;
}

Modifié par DKProject (03 Sep 2012 - 09:17)
Salut,

Comme l'explique très bien le lien mentionné par Raphaël :
Raphael a écrit :
Si l'on souhaite réaliser un effet au survol (rollover), il faut passer par JavaScript (ou équivalent) : l'effet ne justifie pas le passage de l'image en arrière-plan CSS, qui ne serait pas accessible.

Tu ne trouveras donc pas ton bonheur via CSS...

tm
tm™ a écrit :
Salut,

Comme l'explique très bien le lien mentionné par Raphaël :
Tu ne trouveras donc pas ton bonheur via CSS...

tm


Comment je vais faire moi qui m'en sors déjà pas en HTML/CSS... Smiley decu
D'accord, je regarde ça et je vous tiens au courant.

Par contre dans ce petit bout de code, je rentre le lien des images où pour le hover ?

(function($) {
    $('.social img').hover(
        function() {
            var src = $(this).attr('src');
            $(this).attr('src', src.replace('.jpg', '_hover.jpg'));
        },
        function() {
            var src = $(this).attr('src');
            $(this).attr('src', src.replace('_hover.jpg', '.jpg'));
        }
    );
})(jQuery);


Merci
Modifié par DKProject (03 Sep 2012 - 14:02)
Bonjour,
Raphael a écrit :
Bonjour,

Pour commencer, tu as un gros problème de choix d'élément HTML et d'accessibilité : s'il s'agit d'images, il faut utiliser la balise &quot;img&quot; et non des artifices avec des div et des images d'arrière-plan CSS :
http://www.alsacreations.com/astuce/lire/62-balise-ltimggt-ou-feuille-de-style-css.html

Cela aura également un avantage énorme : les images s'alignent automatiquement toutes seules comme des grandes Smiley cligne

On nous parle de plus en plus de sprites (enfin, moi, je les vois de plus en plus, surtout depuis que je suis sur ce forum), permettant de réaliser des artifices comme celui voulu par DKProject (un changement d'image), et son cas semble être une bonne occasion de les utiliser.
Donc, y a-t-il toujours un problème d'accessibilité s'il met un texte dans ses div, le cache au moyen de css et utilise une image de fond qu'il déplacera par la suite lors du hover, permettant ainsi de se passer de JavaScript ?

Un truc comme ça... http://jsbin.com/idegil/1/edit
Modifié par Gothor (03 Sep 2012 - 14:26)
Salut,

Toute la question est de choisir, si elle existe, la bonne méthode CSS !
Un petit tour au musée ?

Perso, j'utilise la dernière, de Nicolas Gallagher...
tm
Bonsoir,

sur une image, j'utilise une image ... avec un background.

J'adapte donc la technique des sprites CSS et je reduis l'image a Zero de largeur et de hauteur en redimensionnant le block avec des marges internes.

J'ai souvent proposé cette technique, soit boudé ou incomprise mais sans jamais avoir eu en retour une critique de qualité sur cette technique perso. Bonne ou mauvaise.

Démo, inspirer de l'exemple en sprite de Gothor Smiley smile

http://dabblet.com/gist/3624396
ou
http://result.dabblet.com/gist/3624396

Cordialement

<edit>le bon sens fera que l'on n'utilisera pas l'image du sprite dans comme source des images, mais l'image qui va bien Smiley smile l'exemple ne met en avant que le coté styles</>
Modifié par gc-nomade (04 Sep 2012 - 20:30)
gc-nomade a écrit :
Bonsoir,

sur une image, j'utilise une image ... avec un background.

J'adapte donc la technique des sprites CSS et je reduis l'image a Zero de largeur et de hauteur en redimensionnant le block avec des marges internes.

J'ai souvent proposé cette technique, soit boudé ou incomprise mais sans jamais avoir eu en retour une critique de qualité sur cette technique perso. Bonne ou mauvaise.

Démo, inspirer de l'exemple en sprite de Gothor Smiley smile

http://dabblet.com/gist/3624396
ou
http://result.dabblet.com/gist/3624396

Cordialement

&lt;edit&gt;le bon sens fera que l'on n'utilisera pas l'image du sprite dans comme source des images, mais l'image qui va bien Smiley smile l'exemple ne met en avant que le coté styles&lt;/&gt;


Effectivement ça marche super !

Merci beaucoup ! Smiley smile
Sujet clos
Aller à