CSS, FF et espace en trop

**oceane751** · 31/03/2015, 04h15

Bonjour,

Bon il est 4h du mat' et je n'arrive pas à résoudre un problème curieux sur FF (sur chrome ça passe, étrange...

)
En gros, j'ai cette url : http://vaurel.free.fr/shoes/index.html
En bas du site, j'ai "blog news"
On voit qu'il y a beaucoup d'espace entre les 2 news qu'il n'y a pas sous chrome et je ne sais pas d'où ça vient :/

Quand on regarde avec firebug sur le carré vert de date, on voit un espace en dessous de l'image carré vert et je ne sais pas du tout d'où il sort
Regardez sous chrome, il n'y en a pas!

Et quand j'enlève le "apr 01" tout redevient normal ! space !

ps : je travaille avec BOOTSTRAP

Avez vous une idée?

Merci

**Erwan31** · 31/03/2015, 21h48

Bonsoir, apparemment ton problème est résolu.

**oceane751** · 31/03/2015, 22h19

Bonsoir

Non, il a toujours ce p***** d'espace que l'on voit avec firebug

Regarde l'image Nom : blog.jpg
Affichages : 184
Taille : 77,0 Ko

Merci

**oceane751** · 01/04/2015, 02h32

En fait, quand je mets :

Code html :

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

la_date col-lg-11 col-md-12  col-sm-12

à la place de

Code html :

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

la_date col-lg-12 col-md-12  col-sm-12

ça passe, j'ai plus autant d'espace en dessous... mais je suis obligé de le mettre

pour que le "01" passe en dessous
et si je mets APR<br />01, j'ai le même problème

Et je viens de voir que l'espace en dessous concerne tous les éléments de la news

Nom : blog2.jpg
Affichages : 141
Taille : 22,0 Ko

Nom : blog2.jpg
Affichages : 141
Taille : 22,0 Ko

pfffu je m'en sors pas...

**Erwan31** · 01/04/2015, 11h37

Je n'ai pas ce problème avec mon FF (la date s'écrit sur une ligne), commencer par réinitialiser ton zoom graphique si ce n'est pas déja fait (Ctrl/Pomme + 0)
Cet espace correspond à l'espace que prends le Apr 01 (sur 2 ligne) puisque tu l'as remonté via un position:relative.
Le positionnement relatif (contrairement à l'utilisation de marges (négative dans ce cas)) déplace l'élément de telle sorte que l'espace qu'il occupait avant déplacement reste intacte. D'ailleurs pourquoi remonter la date, désolé mais ça m'a l'air un peu tordu comme méthode.

D'autre part pourquoi une image pour un fond uni?
Tu devrais plutôt avoir un balisage simplifié dans ce genre :

Code html :

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

1
2
3
4
5
<div class="col-lg-12 col-md-12 col-sm-12">
        <span class="la_date col-lg-12 col-md-12  col-sm-12"><abbr  title="April">APR</abbr> O1</span>
        <h2 class="title_blog col-lg-8 col-md-8 col-sm-8">Hac ex causa</h2>
         <p class="col-lg-10 col-md-11 col-sm-11">Conlaticia stipe Valerius humatur ille Publicola rtifex dirus, unde.</p>
</div>

**oceane751** · 01/04/2015, 12h26

Hey!
Merci!
En fait, j’étais à 110% de zoom sur ff

Je me suis dit, ff qui déconne c'est pas possible :/
Faut vraiment que j’arrête de taffer quand je suis crevé

, je fais vraiment de la m****

**Erwan31** · 01/04/2015, 12h33

Si ça peut te rassurer ya bien pire... Les effets de bords des zoom graphiques (négatifs aussi !) sont assez imprévisibles
mais il faut en tenir compte (surtout du zoom+) sachant que le contenu doit rester accessible jusqu'à un niveau de zoom élevé (6 fois dans l'idéal).
Bon du coup tu ne dis pas ce que tu vas faire, la solution d'urgence étant de remplacer le top: -31px par un margin-top donc.

**oceane751** · 05/04/2015, 15h13

Bonjour,

Désolé pour le retard de ma réponse...

En fait, le 01 doit être à la ligne

Donc, j'ai fait ==> http://vaurel.free.fr/shoes/index.html

Est ce vraiment une bonne solution même si elle fonctionne?

Merci

**oceane751** · 05/04/2015, 17h57

J'ai pris le code à part et finalement ça passe bien sous FF et chrome

Voici le code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
 
<!DOCTYPE html>
<html lang="fr"> 
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/shoes.css" />
 
 
<script src="js/jquery-min.js"></script>
<script src="js/bootstrap.min.js"></script>
 
 
<style>
.la_date { 
            top:-36px; 
            right:-3px; 
            z-index:2;    
            margin-bottom:-15px;
        }
        
        
 
 
</style>
 
 
<title>Document sans nom</title>
</head>
 
 
<body>
<div class="blog_news col-lg-5 col-md-5 col-sm-5">
      <h1 class="title_blog_news col-lg-6">BLOG NEWS</h1>
          <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" >
                   <img src="http://www.developpez.net/forums/images/date.jpg" alt="date blog" class="image_date"/>
                    <div class="la_date col-lg-9 col-md-12  col-sm-12">
                       APR O1
                     </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>
 
        <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" >
                   <img src="http://www.developpez.net/forums/images/date.jpg" alt="date blog" class="image_date"/>
                    <div class="la_date col-lg-9 col-md-12  col-sm-12">
                       APR O1
                     </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>
</div>
</body>
</html>

Pour l'instant, j'en suis qu'au col-lg, donc ne pas tenir compte des autres col-*

Mais sur ma galaxy tab 4, ça s'affiche mal :/

Invité · 05/04/2015, 19h45

Bonjour,
si on se réfère à ces copies d'écran, prises sur I.E. 11 avec différentes tailles de fenêtres, ce n'est pas juste un problème d'"espace"...

Nom : Capture-00.jpg
Affichages : 157
Taille : 89,1 Ko

Nom : Capture-01.jpg
Affichages : 157
Taille : 80,6 Ko

Nom : Capture-02.jpg
Affichages : 163
Taille : 83,7 Ko

Nom : Capture-03.jpg
Affichages : 159
Taille : 97,7 Ko

**oceane751** · 05/04/2015, 20h12

rooo la vache!

non testé sur IE encore, ni sur d'autres résolutions!

bon ba je crois qu'il y a tout à refaire :/

**oceane751** · 05/04/2015, 20h37

heu là je suis sur IE11, et en col-lg c'est pas si catastrophique que ça!

**Erwan31** · 05/04/2015, 23h39

Océane, si tu veux éviter le genre de problèmes relevés par Jreaux, tu dois simplifier ton balisage et tes méthodes d'intégration CSS.
Le premier exemple est assez parlant. Utiliser des marges négatives et des positionnements relatifs négatifs que
lorsque tu n'as pas d'autres choix possibles, tout comme le positionnement absolu d'ailleurs.
L'utilisation de ce genre de procédés difficilement anticipables requière une certaine expérience pour ne pas s'avérer bancales.

**Erwan31** · 05/04/2015, 23h44

Exemple de règle un peu surprenante

Code :

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

1
2
3
4
5
6
7
@media (min-width: 1200px)
.la_date {
  top: -36px;
  right: -4px;
  z-index: 2;
  margin-bottom: -15px;
}

Et donc le APR 01 s'affichera au dessous sur tous les écrans qui sont en dessous de 1200px !

**oceane751** · 05/04/2015, 23h58

Bon ok...
Mais comment positionner du texte sur une image sans utiliser de background-image?
Et donc sans utiliser de top négatif?
:/

**Erwan31** · 05/04/2015, 23h59

Pour la date, tu n'a besoin pare exemple que de cette règle appliqué sur un b

Code :

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

1
2
3
4
5
6
7
8
9
10
.la_date {
	float:left;
	margin: 0 10px 10px 0;
	width: 3em;
        height: 2em;
        padding: .5em 0;
	text-align: center;
	font: 1em "aller", Arial, sans-serif;
	color: #FFF;
}

> les largeur en % ne sont pas nécessaire pour d'aussi petits éléments.
> Pas de flottement pour le titre et paragraphe et pas de largeur non plus (elle prend l'espace dispo et reste flexible.)
> Du coup pas de clearing necessaire via du contenu généré.

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

Envoyé par oceane751

Bon ok...
Mais comment positionner du texte sur une image sans utiliser de background-image?
Et donc sans utiliser de top négatif?
:/

Ah donc ça se sera pas un fond uni?
Tu dois mettre ton image en position:absolue et mettre un z-index supérieur pour la date avec un position:relative donc.

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

En fait on m’à dit de ne pas utiliser de background-image avec bootstrap mais seulement des images avec <img src...

Ou sinon, je pensai à utiliser "centrer une div dans une autre div"

Quel est le mieux du coup avec bootstrap, ta soluce ou ça?

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

Envoyé par Erwan31

Ah donc ça se sera pas un fond uni?
Tu dois mettre ton image en position:absolue et mettre un z-index supérieur pour la date avec un position:relative donc.

Je vais tester

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

Envoyé par oceane751

En fait on m’à dit de ne pas utiliser de background-image avec bootstrap mais seulement des images avec <img src...

Ou sinon, je pensai à utiliser "centrer une div dans une autre div"

Quel est le mieux du coup avec bootstrap, ta soluce ou ça?

Malheureusement je connais pas Bootstrap, je px donc rien te dire sur ses contraintes, mais tu n'as pas besoin de 2 divs pour centrer, ça c'est sûr,
ça complique inutilement le balisage. Pour le centrage vertical, ça se règle ici (lorsque tu as un bloc de plusieurs ligne à centrer) avec des padding verticaux égaux.

CSS, FF et espace en trop

CSS

Discussions similaires

Partager

Partager