CSS, FF et espace en trop

**Erwan31** · 06/04/2015, 00h16

Voir le code que je te donne qui devrait en principe fonctionner.

**oceane751** · 06/04/2015, 00h20

Ok je vais tester ta soluté
Mais donc je dois mettre mon image dans une div et le APR 01 dans une autre c’est ça?

**Erwan31** · 06/04/2015, 00h31

Non tu mets ton span (plutot que div si tu peux) comme conteneur de l'image et d'un b contenant la date

Pour la taille de la typo et son line-height j'ai mis des valeur un peu au hasard mais essaye d'utiliser autant que possible l'unité em pour tous ce qui est lié à la typo (pour les largeurs et hauteurs aussi)...

**Erwan31** · 06/04/2015, 00h33

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<span class="date">
<img>
<b></b>
</spân>

**oceane751** · 06/04/2015, 00h39

Ça m’à l’air plus fluide comme ça

Mais avec bootstrap tu n’utilisés pas de width mais des des col-*-* pour définir une largeur
En RWD de base, tu joues avec les width

En fait, la "galère" avec bootstrap, c'est qu’il gère les width en %, donc pas toujours évident à gérer :/

**Erwan31** · 06/04/2015, 00h47

Ok je vois, effectivement mais c'est toujours mieux que du px

vérifie bien que Bootstrap impose de dimensionner TOUS des micro éléments.
Je crois que Boostrap utilise aussi une police de base dont la taille est exprimée en pixel (pour faciliter les calcul probablement),
ce qui limite l’intérêt de l'utilisation des em du coup.

**oceane751** · 06/04/2015, 19h19

Bonjour

Je me suis inspiré du code que tu m'a donné...

Donc j'ai fait ça : http://vaurel.free.fr/shoes/blog.html

Est ce bien?

Merci encore

**Erwan31** · 06/04/2015, 22h08

Ok, c'est mieux. Mais l'image et la date devraient avoir le même parent comme sur mon balisage, pourquoi les séparer?
Ensuite les marges et padding et z-index sur la div en position absolue ne servent à rien.
Le paragraphe devrait aussi avoir une marge en bas en cas de zoom texte (qui se collerait à la suite).
En fait le position relative et le z-index de la date ne sont pas nécessaire puisque le bloc se trouve après celui en absolue, je n'y avais pas pensé.

La alt de ton image devrait être vide, sauf s'il apporte une info supplémentaire nécessaire à la compréhension du contenu et le bloc contenant l'image devrait avoir un background color sombre en cas de non chargement de l'image pour garder la date lisible mais le fait que Bootstrap impose ce genre de contrainte est assez surprenant (mettre une image à la place d'un bg)...

**oceane751** · 06/04/2015, 22h28

J’ai testé ton code avec les positions et le texte restait en dessous de l’image
c’est pour ça que j’ai mis une div pour l’image et une div pour le texte

**oceane751** · 07/04/2015, 00h03

Je viens de regarder un truc

Pour mon carrousel, j'utilise (enfin c'est le code de base de bootstrap) ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
.fill {
width: 100%;
background: transparent url(../images/dame_bg.jpg) no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
}

Mais le truc, c'est que pour chaque médias, je dois "jouer" avec le height de l'image pour qu'elle s'affiche bien.

C'est pour ça qu'il vaut mieux utiliser de <img src que des background-image car bootstrap gère mieux ce type d'insertion d'images...

**Erwan31** · 07/04/2015, 00h37

Je vois... dans ce cas mettre l'image en position absolue revient au même puisqu'elle sera "inexistante" via à vis de son conteneur.

**oceane751** · 07/04/2015, 07h41

oui elle est en postion:absolute

par contre, sur ma tablette samsung galaxy tab, il a un espace en dessous du "bloc news" qui n'existe pas sous ff et chome
donc ce bloc n'est pas aligné avec le blog "testimonials" et "free shipping"

j'ai l'impression que je vais jamais m'en sortir

Invité · 07/04/2015, 09h44

Bonjour,
à ta place, j'arreterais de bidouiller... car à force, tu risques de faire pire que mieux.
Et je repartirais du code Bootstrap d'origine.

1/ Pour ce qui est des carrés de couleurs, je ne vois pas l'intérêt d'utiliser des images.
Un background bien placé ferait très bien l'affaire.

Pour les carrés verts des prix (godasses* !), supprimer du code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img alt="on sale" src="images/carre_prix.jpg">

ajouter au code CSS (shoes.cc, ligne 180) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.chauss {
   /*... */
bottom:0;
background: green /* couleur à adapter */
}

2/ Tu as indiqué des positionnements en px, alors que le reste est en %.

Voir (par exemple) shoes.css ligne 622 (ce sont les titres des godasses* !) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.bloc2 {
    left: 88px;
    top: 12px;
}

essaie plutôt left: 30%; !

3/ Plus généralement, si tu peux éviter les position:absolute; fais-le !

N.B. Le mot "godasse" te semble péjoratif ?
Sur écran large, les images sont floues : 301px × 222px (redimensionné à 456px × 336px)
Pas top. Manque de qualité.

**Erwan31** · 07/04/2015, 13h41

Envoyé par jreaux62

Bonjour,
à ta place, j'arreterais de bidouiller... car à force, tu risques de faire pire que mieux.
Et je repartirais du code Bootstrap d'origine.

1/ Pour ce qui est des carrés de couleurs, je ne vois pas l'intérêt d'utiliser des images.
Un background bien placé ferait très bien l'affaire.

C'est ce que je lui ai recommandé au début mais elle doit utiliser une image pour que sa taille puisse influer sur son bloc conteneur,
oui je sais c'est pas très logique dans ce cas là.

**oceane751** · 07/04/2015, 13h46

Donc je dois utiliser un background-color? Je ne vois pas comment gérer le height pour ça avec bootstrap...

**Erwan31** · 07/04/2015, 13h55

Envoyé par oceane751

oui elle est en postion:absolute

par contre, sur ma tablette samsung galaxy tab, il a un espace en dessous du "bloc news" qui n'existe pas sous ff et chome
donc ce bloc n'est pas aligné avec le blog "testimonials" et "free shipping"

Te décourage pas. Pour que ton bloc news soit de la même hauteur que les 2 blocs précédent, tu tu ajouter un min-height,
et si tu veux que le bloc qui occupe la hauteur la plus importante entraine les 2 autres blocs avec lui, tu dois convertir ces bloc en
display:table-cell (sans le float évidemment) et avec son bloc parent en display:table; width:100%

Envoyé par oceane751

Donc je dois utiliser un background-color? Je ne vois pas comment gérer le height pour ça avec bootstrap...

La hauteur elle devrait être fixe puisque c'est une date calibrée en nb de caractères non? La hauteur doit être calculée grace au padding verticaux égaux (en em) qui servent à centrer la date.

**oceane751** · 07/04/2015, 14h04

On m'a dit pour le background-image, je cite :

Mauvaise idée que de mettre tes images en background, ce n'est pas de
la décoration de page mais le produit que tu présentes

Et pour les carrés en CSS et non en image, je cite :

AVEC BOOTSTRAP VAUT MIEUX UTILISER LES IMAGES QUE DU CSS
PAR EXEMPLE UN CARRE DE COULEUR GRIS

C'est pour ça que là, je suis complètement perdue..

En plus, j'avais testé de mettre du css pour les carrés, et ça déconnait pas mal...

**Erwan31** · 07/04/2015, 14h52

Envoyé par oceane751

C'est pour ça que là, je suis complètement perdue..

Bon alors je peux te dire que si l'image n'apporte aucune infos et qu'elle est purement décorative, tu l'as met en background-image avec une fond uni en fallback : backgroung #555 url(...); et si c'est une fond uni tu n'a évidemment pas besoin d'une image.
Ta date devrait être comprise dans un b (ou une div si t'as pas le choix) - à défaut d'un élément html5 <time> qui implique de respecter un certain nombre de formats auxquels celle-ci ne répond pas - et c'est tout.

**oceane751** · 07/04/2015, 16h46

ok!
j'ai mis une div pas une balise b
J'ai mis l'image en background-image
Sur chrome juste un ou deux petits pixels en plus pour que se soit bien aligné, sur FF ça va ==> http://vaurel.free.fr/shoes/blog.html

Mais sur tablette, toujours le même problème