28172 sujets

CSS et mise en forme, CSS3

[résolu] Problème de positionnement d'un élément en responsive

Bonjour,

Sur cette page test, j'ai réalisé une série de graphiques satistiques full css à partir de listes simples.

Mon problème est situé sur le troisième graphique (.graph-caption) : Sur une petite résolution les labels (.graph-caption li span:first-child) ne sont pas bien placés et je n'en comprend pas la raison.

Une idée ? Merci d'avance.
Modifié par Olivier C (20 Oct 2013 - 15:40)
Bonjour,

Le positionement en absolut intervient sans avoir delimité une zone de reference stable.

avec: 
.graph-caption {
position:relative;
}
.graph-caption li span:first-child {
position: absolute;
top:75%;(ou rem ou em , ou autre, selon la valeur utilisé pour "tailler" le parent)
}

Tu maitrise alors mieux les coordonnées d'affichage a partir du parent.
Évidement : une déclaration en position relative sur l'élément parent... une erreur de débutant.

Merci à toi gc-nomade.

Édit : ça bug sous Safari. Je regarderais ça de plus près ce soir...

Édit de l'édit : un :after en display:table-caption posait problème. Sujet résolu.
Modifié par Olivier C (22 Oct 2013 - 07:40)
Bonjour,

J'ai également un problème de positionnement en responsive
J'ai un background redimensionnable positionné en bottom et souhaite y placer une image par dessus qui doit aussi se redimensionner et garder la bonne position par rapport au background.

Voila ou j'en suis - si une âme charitable..... Smiley cligne 

<body>

<style>
#fond-image {position: fixed; width: 100%; height: 100%;bottom:-5%;left:0;
background: url(background.png) no-repeat 50% 100% ;background-size:100%;z-index:-1;}

.monclip{;position:relative;top:70%;left:40%;width:100%; height:100%;z-index:0}
.monclip img{width:10%; height:auto;}
</style>

<div id="fond-image">
<span class="monclip"><img src="monclip.png"></span>
</div>

</body>
Sujet clos
Aller à