Positionnement en css
TheJokeAir
-
powerguitou Messages postés 472 Date d'inscription Statut Membre Dernière intervention -
powerguitou Messages postés 472 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis actuellement en train de créer un site, mais je rencontre un petit soucis: étant en phase finale de création, je me lance dans la "décoration" du site mais certains objets se placent mal (par exemple 3 pixels en dessous des autres objets de la même ligne. Cela se produit avec un bouton (class "btn" du bootstrap twitter) et avec des images qui me servent de menu, qui ne se collent pas parfaitement entre-elles, j'ai un très joli espace entre chaque image (padding:0, margin:0...). Comment puis-je aligner verticalement et coller les objets comme ceux-là s'il vous plait?
Merci beaucoup d'avance!
Je suis actuellement en train de créer un site, mais je rencontre un petit soucis: étant en phase finale de création, je me lance dans la "décoration" du site mais certains objets se placent mal (par exemple 3 pixels en dessous des autres objets de la même ligne. Cela se produit avec un bouton (class "btn" du bootstrap twitter) et avec des images qui me servent de menu, qui ne se collent pas parfaitement entre-elles, j'ai un très joli espace entre chaque image (padding:0, margin:0...). Comment puis-je aligner verticalement et coller les objets comme ceux-là s'il vous plait?
Merci beaucoup d'avance!
4 réponses
Pas encore mais je peux faire des screenshots, je t'as fait un best-of:
http://image.noelshack.com/fichiers/2012/35/1346496769-ccm.png
http://image.noelshack.com/fichiers/2012/35/1346496769-ccm.png
Je te mets ici quelques éléments de code qui pourraient contribuer à mes bugs:
Bootstrap.css:
Index.php
J'utilise la classe menu pour afficher les liens images: <a class="menu" href="#"><img src="#" /></a>
Bootstrap.css:
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
img {
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
Index.php
.menu
{
padding:0;margin:0;display:inline;
.btn
{
position: relative;display:inline;
}
}
J'utilise la classe menu pour afficher les liens images: <a class="menu" href="#"><img src="#" /></a>
