CSS et position

Hey!

J'ai un soucis quelque part avec un position:quelque chose

Je change avec firebug mais rien n'y fait

Voici l'url : http://vaurel.free.fr/shoes/shoes3.html

En gros, le carré bleu, dans n'est pas encadré dans le fond blanc de la chaussure (en bas), comme le carré noir "on sale"

Vous voyez?

Merci !

Bon
J'ai à peu près réussi à le faire apparaître
Sauf que je n'arrive pas à l'afficher comme je voudrai

Voici une image du PSD, donc ce qu'il devrait s'afficher (sachant qu'il y a un trait gris en dessous du carré bleu et du texte à côté) :


Modifié par oceane751 (17 Apr 2015 - 02:29)

Bonjour,

As-tu toujours un problème là dessus ? Je n'ai pas le même rendu entre ton lien et l'image que tu donne... il manque le block avec le titre..

Au passage pour tes block du pris et de "on sale" :

<div class="overlay_best col-lg-3">
  <img alt="on sale" src="images/on_sale.jpg">
  <p class="text_on_sale">ON SALE!</p>
</div>

Tu pourrais faire plus propre/leger. Il n'y a pas besoin de tout ça...

<div class="overlay_best col-lg-3 text_on_sale">
  ON SALE!
</div>

suffirait je pense. En fait c'est surtout d’avoir une image pour faire un fond uni d'une couleur qui me choque.. un simple background-color en CSS suffit

_laurent a écrit :

En fait c'est surtout d’avoir une image pour faire un fond uni d'une couleur qui me choque.. un simple background-color en CSS suffit

J'avais déjà testé mais avec bootstrap comment on gère le height, dans ce cas?

ah oui mais dans ce cas, il faut pour chaque média, leur attribuer un height différent c'est ça?

perso, je pensai qu'avec un <img src, bam! bootstrap gère tout seul le width et le height de l'image et que ça suffisait

oceane751 a écrit :
ah oui mais dans ce cas, il faut pour chaque média, leur attribuer un height différent c'est ça?

Pour moi c'est la solution la plus propre. Bootstrap n'en utilise que 3 et ça te permettra aussi de gérer la taille du texte.

oceane751 a écrit :
perso, je pensai qu'avec un &lt;img src, bam! bootstrap gère tout seul le width et le height de l'image et que ça suffisait

Je vois a quoi tu pensais, mais je ne suis pas sur que ce soit le bon moyen d'utiliser le responsive de boostrap. En plus ton texte ne changera pas de taille normalement.

Bon ok je vais tester

Donc avec ces @media :

@media (min-width : 1200px){

}


@media (min-width: 992px) and (max-width: 1200px) {

}


@media (min-width: 786px) and (max-width: 992px) {

}


@media (max-width: 768px) {

}

Mais d'un côté c'est pas non plus faux d'utiliser les <img src?
Parce que d'un côté on me dit "ok" et de l'autre "non, il faut utiliser le background-color "

oceane751 a écrit :
Mais d'un côté c'est pas non plus faux d'utiliser les &lt;img src?
Parce que d'un côté on me dit "ok" et de l'autre "non, il faut utiliser le background-color "

On va dire qu'il y a des avantages et des inconvénients.
En avantage : tu gardes le ratio hauteur/largeur sans te casser la tete.
En désavantage : un requête par image (donc temps de téléchargement de la page plus long, important sur mobile), temps d'affichage plus long, couleur que tu peux changer qu'en éditant l'image avec un logiciel, obligé de passer par des positions absolute superposées pour mettre un truc par dessus, l'image pixelise si agrandi (surtout quand il y a des motifs ou du texte, pour un fond uni ça va encore), pas de possibilité d'ajouter certains css (box shadow inset, pseudo elements ::before et ::after etc).
Mais ma vision est peut être un peu orienté.

Après c'est à toi de choisir hein.