CSS, FF et espace en trop

suis peut être hermaphrodite :mouarf:

Citation:

---

Envoyé par oceane751

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

---

C'est un peu mieux mais encore trop compliqué... T'as toujours une image unie et 2 div imbriquées ! Et ça m'étonnerait que Bootsrap
t'impose des images ou alors il est hyper mal foutu et ses concepteurs tordus... Excuse moi mais crois pas que tu vas t'en sortir facilement en complexifiant le balisage.

heu ba j'ai mis l'image en background-image dans le CSS (class date4) et à l’intérieur le texte que je veux dans une div
c'est pas le but du "background-image", donc de ne pas utiliser les position:relative;/position:absolute?

je ne vois pas où est le problème là

En cas de zoom texte (essayer sur FF en mode zoom text seulement), comme tu n'a pas mis de background color a ta div date,
le mois dépasser l'image de fond et ainsi devenir plus difficilement lisible, pareille si l'image n'est pas chargée comme je t'ai expliqué.
Le centrage vertical se fait avec des padding verticaux égaux..;

Ok j'y penserai ;)

De plus, on m'a dit d'utiliser le min-height pour les 3 blocs gris pour que "blog news" soit aligné
Qu'en penses tu?

Merci :D

Bonjour,
extrait de code

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <div class=" col-lg-1 col-md-1 col-sm-1 date4"> <div class=" col-lg-12 col-md-1 col-sm-1 apr"> APR<br>01 </div> </div> <h2 class="title_blog col-lg-8 col-md-8 col-sm-8">Hac ex causa</h2> <p class="col-lg-9 col-md-11 col-sm-11"> Conlaticia stipe Valerius humatur ille Publicola rtifex dirus, unde. </p> </div> </div>

---

je suis époustouflé par le nombre de classes qui ne doivent pas servir à grand chose et j'ai envie de crier MAIS LAISSER VIVRE LES ELEMENTS DANS LEUR PARENT, je ne suis pas sûr que cela soit l'esprit de Bootstrap !

Je ne parlerais pas des innombrables padding/margin de réajustement aux pixels qui font que tôt ou tard cela posera d'inévitables problèmes.

Si l'on regarde ton besoin, tu as besoin d'une DIV dans laquelle tu places une date, un titre et un descriptif le tout devant suivre la mise en page dicté par le parent.

• La date n'a qu'une contrainte c'est d'avoir les bonne dimension et être épinglée en haut à gauche, donc cela peut être simplement une DIV ou un SPAN qui ont la même valeur sémantique c'est à dire aucune.
• Le titre, élément block, peut occuper la largeur de son parent, on pourra quand même supprimer les marges par défaut pour éviter les soucis.
• Le paragraphe peu faire la même chose que le titre

en résumé

Code:

---

1 2 3 4 5

<div class="new"> <div class="date">APR 1</div> <h1>Un titre de NEW</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor arcu et egestas accumsan.</p> </div>

---

pour la date il te suffit de déclarer une largeur, hauteur et une couleur de fond plus quelques menus aménagement liés à son positionnement

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.date{ /* positionnement */ position:absolute; left:0.1em; top:0.1em; /* taille */ width:3em; /* suffisant pour l'affichage et le retour ligne, s'adaptera à la police choisie */ height:3em; background:#57C5A0; /* font */ color:white; font-weight:bold; text-align:center; }

---

pour le H1 et le P, minimum un reset

Code:

---

1 2 3 4

.new h1, .new p{ margin:0; }

---

et enfin pour la DIV parent

Code:

---

1 2 3 4 5 6 7 8

.new{ position:relative; /* pour servir de référent */ font-size:.8em; /* par exemple */ background:#DFDBD4; min-height:3em; /* doit contenir la date */ padding-left:3.25em; /* pour ne pas passer sous la date */ margin-bottom:0.5em; /* ecart avec la suivante */ }

---

Il ne te reste plus qu'a "surcoucher" (envelopper) avec boostrap.

Sémantiquement il pourrait y avoir lieu d'utiliser une LISTE pour tes news mais ceci n'est pas forcément primordiale.

Citation:

---

Envoyé par NoSmoking

</div>[/CODE]je suis époustouflé par le nombre de classes qui ne doivent pas servir à grand chose et j'ai envie de crier MAIS LAISSER VIVRE LES ELEMENTS DANS LEUR PARENT, je ne suis pas sûr que cela soit l'esprit de Bootstrap !

Je ne parlerais pas des innombrables padding/margin de réajustement aux pixels qui font que tôt ou tard cela posera d'inévitables problèmes.

---

Oui c'est un peu ce que j'ai essayé de lui faire comprendre, trop de balisage et chose que j'ai oublié d'évoqué, les déclaration inutiles (genre float:left) appliquées au niveau des div.

Citation:

---

Envoyé par NoSmoking

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.date{ /* positionnement */ position:absolute; left:0.1em; top:0.1em; /* taille */ width:3em; /* suffisant pour l'affichage et le retour ligne, s'adaptera à la police choisie */ height:3em; background:#57C5A0; /* font */ color:white; font-weight:bold; text-align:center; }

---

pour le H1 et le P, minimum un reset

Code:

---

1 2 3 4

.new h1, .new p{ margin:0; }

---

et enfin pour la DIV parent

Code:

---

1 2 3 4 5 6 7 8

.new{ position:relative; /* pour servir de référent */ font-size:.8em; /* par exemple */ background:#DFDBD4; min-height:3em; /* doit contenir la date */ padding-left:3.25em; /* pour ne pas passer sous la date */ margin-bottom:0.5em; /* ecart avec la suivante */ }

---

Il ne te reste plus qu'a "surcoucher" (envelopper) avec boostrap.

---

Le positionnement hors flux est toujours un peu risqué quand on a pas pensé à tous les contexte d'utilisation. C'est pour ça que ça ne devrait être utilisé qu'en dernier recours (essentiellement pour des raisons d'accessibilité). Mais ton code tient la route grâce aux em.
Faut juste tester le bon fonctionnement du zoom texte sur FF.
Pour centrer verticalement la date, comme elle est sur 2 lignes, il faut passer par des padding verticaux égaux.

Bonjour,

Est ce que c'est mieux là >> http://vaurel.free.fr/shoes/blog.html

ps : pas habitué au "em" donc j'ai utilisé des pixel, désolé...

Par contre sur tablette il manque juste un pixel pour que tous soit aligné :/

Oui c'est mieux, sauf que tu n'as pas réutilisé les unité em (utiles en cas de zoom texte).

Je le répète, la hauteur peut-être obtenue avec des padding verticaux égaux, ce qui permet de centrer verticalement la date.
il faut éviter de spécifier une hauteur quand on a du texte dedans sauf si le nombre de ligne ne peut pas varier avec un agrandissement du texte, mais dans ce cas il doit être précisé en em (comme sur l'exemple de NoSmoking).

Donc tu devrais déclarer ce genre de chose :

Code:

---

1 2 3

width: 3em; padding: 0.4em 0;

---

Je n'ai pas apporté une grande importance au centrage vertical attendu qu'il existe des espaces supérieurs et inférieurs sur une ligne
- supérieur qui permet de conserver une espace entre ligne et placer les accents des majuscules
- inférieur qui permet de placer les jambes des lettres en ayant Âlp.

Comme les dates laisseront ces espaces libres (pas de jambe) cela m'est pas apparu très important.
En ce passant de la hauteur on peut donc effectivement faire

Code:

---

1 2 3 4 5

.date { width:3em; /* il y aura retour ligne donc pas besoin de BR */ line-height:1em; padding:0.5em 0; }

---

Citation:

---

Envoyé par oceane751

ps : pas habitué au "em" donc j'ai utilisé des pixel, désolé...

---

dans ce cas je n'aurais qu'un conseil à te donner
- Il te faut louer un appartement au 50éme étage d'une tour
- T'y rendre avec tout ce que tu possèdes de px (garde en quelques qui pourront être utile ça et là)
- Une fois la fenêtre ouverte jettes les sans regret
- Descend dans le premier magasin que tu trouveras et achètes des em, (les em on les aime)

Citation:

---

Envoyé par oceane751

Par contre sur tablette il manque juste un pixel pour que tous soit aligné :/

---

il te manquera toujours un pixel ou plus dans ta façon de faire d'ajustement, usage et abus de padding/margin au pixel.
LAISSE VIVRE tes éléments au sein de leur parent, déjà dit, inutile de multiplier/dupliquer les styles sur les enfants c'est l'héritage qui doit te guider ;)

Mais il semble que beaucoup de conseils t'ont été donnés et que peu tu as suivi.

Citation:

---

Envoyé par NoSmoking

Mais il semble que beaucoup de conseils t'ont été donnés et que peu tu as suivi.

---

Je confirme.

Et j'ajoute :

Citation:

---

il ne faut pas confondre "être persévérant et déterminé" avec "être têtu et borné"

---

Achète-toi un smartphone, et tu te rendras compte que ces petits problèmes de positionnement de date ne sont RIEN à coté de certains autres, beaucoup plus génant.

Par exemple les images des chaussures qui se déforment.....
(vu dans le CSS)

Code:

---

1 2 3 4

img { width:100%; height:100%; }

---

:roll:

Bonjour,

J'ai tout repris depuis le début

Est ce que cette façon est bonne ==>http://jsfiddle.net/Undless/04on0phk/

Merci

Vu comme ça, ça a l'air bon.
A voir dans ton site...

hello!

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

Il y a juste le col-lg qui a été fait

Une petite question concernant le code (texte sur une image):

Quelle est la meilleure solution entre la partie (après le carrousel) avec le "ON SALE" sur l'image avec opacity ou le code des chaussures avec "ON SALE!", "OUT OF STOCK" et le prix?


Pièce jointe 175371






Les deux types de codes sont ok? ou il y en a un de mieux que l'autre?

Merci!

Bonsoir,
pas le temps de regarder ta dernière question mais pas grand chose à dire,
si ce n'est que le balisage qui n'est pas sémantique. Ceci dit c'est bien d'avoir pensé à placer le titre en premier dans le code.

On attend l'intégration !

Citation:

---

Envoyé par Erwan31

si ce n'est que le balisage qui n'est pas sémantique

---

je verrais bien une Definition List.

Citation:

---

Envoyé par NoSmoking

On attend l'intégration !

je verrais bien une Definition List.

---

HTML5 a transformé les definition list en Description List.
Le meilleur choix sémantique est toujours compliqué et évolutif (surtout depuis que HTML5 est bien implanté).
Du point de vue de l'exploitation par les User Agent (et plus particulièrement les lecteur d'écran) ce n'était pas terrible en 2012 et il
valait mieux passer par une simple list (OL/UL) avec couple Hn + p ou alors un simple table avec th + attribut scope.
L'arrivée d'ARIA complique encore la donne. Bref c'est jamais si évident.
Pourquoi pas une DL dans le sens ou il y a peu de chance que ce type de site serve à des personnes non voyante.

Bonjour,
je vais encore jouer les trouble-fêtes, mais l'url donnée en exemple n'est pas optimale coté "responsivité"... :aie:

De nombreux éléments partent en "lucioles" quand on redimensionne la fenêtre...

Tu devrais repartir d'un template sain, approuvé... et éprouvé.