Bonjour,

J'ai un problème (qui serait résolu avec la position absolue mais j'essaie de l'utiliser la moins possible).

Voici mon code HTML:

<div id="header_up_login">
<a id="premium_link" href="#"><img class "premium_icon" alt="Fonctionnalités Premium"/>Devenez Premium<br /></a>
<img class="member_icon" alt="Devenez-membre !" />
<a id="connect_link" href="#">Connectez-vous</a>
</div>

Voici mon code CSS:

1. header_up_login

{
float: right;
width: 30%
margin-right: 1%
line-height: 100%;
}

.member_icon
{
width: 48px;
height: 48px;
background: url(icons/vector_icons/icons_white.png);
background-position: 15.8% 1.75%;
background-size: 2500%;
background-color: #435053;
margin-top: 20%;
}

1. premium_link

{
color: white;
margin-left: 20%;
}

.premium_icon
{
width: 16px;
height: 16px;
background: url(icons/vector_icons/icons_white.png);
background-position: 85.2% 41.3%;
background-size: 2500%;
background-color: €435053;
}

1. connect_link

{
color: white;
border: 1px solid white;
padding: 5px;
}

J'ai deux problèmes:

- J'essaie de faire la même disposition qu'Open Classrooms (http://fr.openclassrooms.com/) avec l'image du membre, connectez-vous et devenir premium et le problème est ici:

Aucune éléments adjacent provoque les erreurs, c'est dans le code que je vous ai donné
- C'est que j'ai un bord blanc pour mes icônes qui ne se règle pas avec border: 0 none;

Merci d'avance !

Tu veux enlever la bordure de "Connectez-vous" ?

Enlève la ligne border dans #connect_link.

Non, cette bordure sera modifiée plus tard.

Ce que je veux, c'est que tu vois l'icône de l'utilisateur et le petit ruban à gauche de Premium, il y a une bordure blanche que je ne veux pas !

C'est peut-être inclus dans les images ?

Je vois pas sinon.

Malheureusement pas, j'y avais aussi pensé mais dans l'image (car c'est un gros pack), il n'y a pas le carré blanc autour des icônes.

Tant pis, mais pour mettre tout le truc premium à droite de l'image sans position absolue, c'est possible ?

Lorsque je retire le <br />, je remarque qu'il y a une erreur, le "Devenez Premium" ainsi que son icône ne se situe plus sur le haut comme sur le site du zéro mais sur le bas de l'image ->

Vous voyez, je veux qu'à droite de l'image, il y a en haut, l'icône ruban avec Devenez Premium et en bas Connectez-vous tout en restant à droite de l'image.

Je pense qu'en ayant retirer le <br /> j'ai fait un pas supplémentaire vers mon Saint-Graal ;)

Utilise ce bout de css pour retirer les bordure blanche autour de tes images :

a {border:none}

Sinon pour ton histoire de placement, essaye déjà de mettre ton code html comme ceci :

<div id="header_up_login">
<img class="member_icon" alt="Devenez-membre !" />
<a id="premium_link" href="#"><img class="premium_icon" alt="Fonctionnalités Premium"/>Devenez Premium</a>
<a id="connect_link" href="#">Connectez-vous</a>
</div>

Ensuite fixe une taille à tes classes premium_link et connect_link. Après tu peux mettre ton icon en float left et tes 2 autres class en float right.

Cela devrait t'aider à résoudre ton problème

La première balise pour les images ne fonctionnent pas, ce n'est pas le plus important, comme toi, une autre personne m'a passé le même code HTML mais m'a en plus fournis ce code:

1. header_up_login

{
float: right;
width: 30%
margin-right: 1%
line-height: 100%;
}

.member_icon
{
width: 48px;
height: 48px;
background: url(icons/vector_icons/icons_white.png);
background-position: 15.8% 1.75%;
background-size: 2500%;
background-color: #435053;
}

1. premium_link

{
color: white;
float : right ;
}

.premium_icon
{
width: 16px;
height: 16px;
background: url(icons/vector_icons/icons_white.png);
background-position: 85.2% 41.3%;
background-size: 2500%;
background-color: €435053;
}

1. connect_link

{
color: white;
border: 1px solid white;
padding: 5px;
float : right ;
}

Voici la nouveauté:
Oui, ça ne règle toujours pas le problème ;)

• Résolu*

Rajoute un float left à member_icon ensuite tu n'aura plus qu'à régler les tailles de tes différents éléments. Dis-nous si tout fonctionne comme tu veux après.

Terminé.

Le problème avec les images avec bord, voici le résumé:

Lorsqu'on fait une image sans SRC, Chrome et certains navigateurs font un bord, pour le virer, il faut mettre height et width à 0 et mettre un padding à la place qui reprends l'height/width -> exemple

Pour une image de:
width: 6px;
height: 12px;

Il faudra mettre un padding: 3px 6px 3px 6px;

Ah oui j'ai même pas vu ça.

Bah pourquoi tu fais pas avec src ? Si tu dois changer l'image tu renommes la nouvelle par l'ancienne.

Quand je vois ça déjà je me dis que t'as un souci.
"background-color: €435053;"

xD C'était du recopier et pas du copier-coller ;)

Tu sais pas faire en src pour un sprite css (une grosse image avec toutes tes icônes)