Inline-block
Semeen
Messages postés
23
Statut
Membre
-
Semeen Messages postés 23 Statut Membre -
Semeen Messages postés 23 Statut Membre -
Bonjour à tous, je constate que mes éléments disposés en "inline-bloc" sont décalés dans certains navigateurs (Safari ou encore Maven ). Etant entrain de réecrire mon site en html, css et javascript justement pour pouvoir etre accessible depuis les appareils mobiles, c'est assez embetant.
Je suis tombé sur une solution sur un site en Anglais disant :
"
<div class="parent">
<div class="child">
</div>
</div>
CSS
.parent{letter-spacing:-1em;word-spacing:-1em}
.child{letter-spacing:normal;word-spacing:normal}
"
Mais ça ne fonctionne pas chez moi. Une idée?
Je suis tombé sur une solution sur un site en Anglais disant :
"
<div class="parent">
<div class="child">
</div>
</div>
CSS
.parent{letter-spacing:-1em;word-spacing:-1em}
.child{letter-spacing:normal;word-spacing:normal}
"
Mais ça ne fonctionne pas chez moi. Une idée?
A voir également:
- Inline-block
- Block breaker - Accueil - Services en ligne
- Code block - Télécharger - Langages
- Peer block - Télécharger - Pare-feu
- Usb block - Télécharger - Pare-feu
- U block origine - Télécharger - Outils pour navigateurs
3 réponses
Salut,
n'aurais-tu pas écrit une clause CSS qui s'appliquerait à tous les objets (accidentellement ou non)?
Si tu as les outils pour (Ctrl+Shift+I sur Safari je crois, c'est du Webkit donc ça devrait être ça), vérifie le style final des objets, en particulier les propriétés margin et border, réputées pour ce genre de décalages.
Mais je ne peux pas vraiment en dire plus, car tu ne décris pas le "décalage": un espacement trop grand? Un décalage de X pixels vers la droite? Vers le bas?
n'aurais-tu pas écrit une clause CSS qui s'appliquerait à tous les objets (accidentellement ou non)?
Si tu as les outils pour (Ctrl+Shift+I sur Safari je crois, c'est du Webkit donc ça devrait être ça), vérifie le style final des objets, en particulier les propriétés margin et border, réputées pour ce genre de décalages.
Mais je ne peux pas vraiment en dire plus, car tu ne décris pas le "décalage": un espacement trop grand? Un décalage de X pixels vers la droite? Vers le bas?
Structure html :
<div id="page1">
<ul>
<li>
<div class="facebook">
</div>
</li>
<li>
<div class="entree">
</div>
</li>
<li>
<a class="twitter-timeline" </a>
</li>
</ul>
</div>
CSS :
div#page1 {
widht: 100%;
margin: 0;
text-align: center;
overflow: hidden;
}
div#page1 li {
display: inline;
width:100%;
height: 100%;
background-color: #000000;
text-align: center;
list-style: none;
}
.twitter-timeline {
display: inline-block;
width: 200px;
height: 430px;
color: #990000;
overflow: hidden;
}
.entree {
display: inline-block;
text-align: center;
widht: 100%;
}
.facebook {
display: inline-block;
widht: 100%;
height: 420px;
overflow: hidden;
}
<div id="page1">
<ul>
<li>
<div class="facebook">
</div>
</li>
<li>
<div class="entree">
</div>
</li>
<li>
<a class="twitter-timeline" </a>
</li>
</ul>
</div>
CSS :
div#page1 {
widht: 100%;
margin: 0;
text-align: center;
overflow: hidden;
}
div#page1 li {
display: inline;
width:100%;
height: 100%;
background-color: #000000;
text-align: center;
list-style: none;
}
.twitter-timeline {
display: inline-block;
width: 200px;
height: 430px;
color: #990000;
overflow: hidden;
}
.entree {
display: inline-block;
text-align: center;
widht: 100%;
}
.facebook {
display: inline-block;
widht: 100%;
height: 420px;
overflow: hidden;
}
