28172 sujets

CSS et mise en forme, CSS3

CSS, Position:relative et float:left [résolu]

Bonjour.

Je suis nouvel inscrit sur le forum, mais alsacreation m'a toujours bien servi, notamment à mes débuts en CSS.

Je suis en ce moment en train de me créer un blog bd sur tumblr. Je viens de terminer le "brouillon CSS" du template, pour le positionnement global, et maintenant je crée mes classes et résous les éventuels bugs visuels (qui sont évidemment nombreux).

En voici un qui me donne du fil à retordre, je n'ai en effet jamais eu à me confronter à ce cas de figure, je pense que c'est vraiment bête comme problème, mais je m'embrouille petit à petit.

Si vous suivez ce lien http://anirniq.tumblr.com/ vous verrez ma mise en page brouillon.
Le problème se situe au niveau de la bulle "likes".

Elle est définie telle que :

.likes {
	float:left;
	position:relative;
	left:-93px;
	overflow:hidden;
	background-image:url(http://www.anirniq.com/tumblr/likes.jpg);
	text-align:center;
	width:64px;
	height:23px;
	padding:15px 0px;
	padding-right:12px;
}


Apparemment, la position relative entraîne une interaction identique si left est à 0 ou à -93 avec la zone de droite, décalant son contenu.
J'entends par là que la zone de la div .like est toujours un espace réservé dans la partie contenu à droite et donc décale le contenu de sa largeur dans la zone "contenu" :

http://www.anirniq.com/probleme-1.jpg

J'ai tenté plusieurs choses, notamment toutes les combinaisons possibles de clear/float, et overflow:hidden, si le contenu était toujours pris en compte.

Voilà. C'est sûrement une manip simple, ou alors toute mon architecture à refaire, je ne connais pas la réponse.

Merci pour votre aide, Clément.

PS.
Modifié par Anirniq (19 Sep 2009 - 14:42)
Bonjour,

Le principe du positionnement relatif, c'est que l'élément est décalé visuellement par rapport à sa place d'origine. Il occupe toujours l'espace qui correspond à sa place d'origine.

Le positionnement flottant (sans positionnement relatif) devrait suffire. Plutôt que de décaler l'élément visuellement avec la propriété left, tu devrais pouvoir le déplacer avec un margin-left (et une valeur négative).
Avec un margin-left:-93px au lieu de position:relative et left:-93px ?
.likes { 
    float:left; 
    margin-left:-93px;
    overflow:hidden; 
    background-image:url(http://www.anirniq.com/tumblr/likes.jpg); 
    text-align:center; 
    width:64px; 
    height:23px; 
    padding:15px 0px; 
    padding-right:12px; 
}


édit : ah zut griller ><
Modifié par jo_link_noir (19 Sep 2009 - 14:36)
Ok, c'est bon, c'est pour ça que je trouvais pas la réponse. C'est parce que c'était aussi simple que ça...
Merci beaucoup
Je comprends pas comment j'ai fait pour pas y penser

Bon week end
Sujet clos
Aller à