Problème de CSS

Résolu/Fermé
leodiver - 24 mars 2013 à 20:15
 Profil bloqué - 27 mars 2013 à 13:23
Bonjour,

Tout d'abord bonjour à tous, je suis nouveau à la fois sur le site et nouveau dans la programmation notamment en CSS.
Mon soucis est le suivant: je souhaite mettre sur le site de ma boite trois boutons pour les réseaux sociaux. J'ai déjà mis le bouton Twitter mais comme vous pouvez le voir, le bouton reste actif sur la droite et du coup dès que j'en mets un deuxième, il va à la ligne, chose que je ne veux pas.
http://www.miopalmoplongee.com
J'ai pas mal lu et je pense que c'est un soucis dans mon fichier CSS. Pourriez vous me filer un coup de main ?
Je vous remercie beaucoup.


A voir également:

1 réponse

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
24 mars 2013 à 20:55
Salut,

Je crois qu'il faut attribuer un "display:inline;" aux éléments "li" de votre liste et ceci ce fait dans votre feuille styles.
0
Je viens de chercher où le mettre et fair plein d'essais mais rien n'y fait... snif.
Voici ma feuille de styles css.

@import "Reset.css";
/*@import "virtuemart.css";*/
/*----------------------------------------------------------------------------*/
*
{
margin: 0;
padding: 0;
}

body
{
background: none;
color: #000000;
font-family: arial, helvetica, sans-serif;
font-size: 1em;
padding: 0px;
background: url(../images/background.png) #002596 repeat-x;
/*text-align: center;*/
}
strong
{
font-weight: bold;
}
li
{
list-style: none outside none;
}
@font-face {
font-family: "lunabar_";
src: url('../../../fonts/lunabar_.ttf');
}
/*----------------------------------------------------------------------------*/
#surbody {
background: url(../images/baniere.png) no-repeat center top;
}
#container{
margin: auto;
width: 950px;
}

#header
{
height: 240px;
width: 950px;
}
#baniere
{
height: 200px;
width: 950px;
}
#menu
{
height: 40px;
width: auto;
background: #002f86;
}
.menu li
{
list-style: none;
}
/*----------------------------------------------------------------------------*/
#swmenu td
{
float: left;
border-right: solid 1px #012a64;
border-left: solid 1px #01409
}
#swmenu .last img
{
position: absolute;
margin-top: -30px;
margin-left: -5px;
}
#swmenu .last a.hover
{
background-color: #002F86 !important;
}
/*---------------------------------fil d'ariane-------------------------------------------*/
#breadcrumbs
{
height: 30px;
background: url(../images/content_background.png) #EEE repeat-x;
font-family: Verdana,Arial,Helvetica,Sans-Serif;
font-size: 0.7em;
font-weight: bold;
padding-top: 10px;
/*padding-left: 3px;*/
vertical-align: bottom;
}
#breadcrumbs a
{
color : #287EB7;
text-decoration: none;
}
#breadcrumbs a:visited
{
color : #287EB7;
}
#breadcrumbs a:hover
{
color : blue;
}
/*----------------------------------News------------------------------------------*/
.latestnews a
{
color : black;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
}
.latestnews a:visited
{
color : black;
}
.latestnews a:hover
{
color : grey;
}
#content h3.news
{
background: #287EB7;
padding-bottom: 3px;
padding-top: 3px;
text-decoration: none;
color : white;
text-align: center;
}
/*----------------------------------------------------------------------------*/
#content
{
min-height: 500px;
background: url(../images/footer_background.png) #EEE no-repeat;
background-position: bottom;
padding-bottom: 150px;
}
table td
{
vertical-align: top;
}
#content table.position table.tarifs
{
width: 85%;
margin: auto;
}
#content table.position table.tarifs tr
{
height: 25px;
background: #E1E9F2;
}
#content table.position table.tarifs tr:hover
{
background: #C2D5E8;
}
#content table.position table.tarifs tr td:first-child
{
text-align: left;
color: #004667;
font-size: 0.9em;
font-weight: normal;
}
#content table.position table.tarifs tr td
{
text-align: right;
color: #333333;
font-size: 0.8em;
font-weight: bold;
vertical-align: middle;
}

#content table.position
{
width:100%;
padding: 5px 10px 5px 0px;
}
#content table.position td
{
padding-left: 10px;
width: 100%;
}
#content table.position table
{
padding: 0px;
width: 100%;
}
#content table.position table td
{
width: auto;
padding: 2px 5px 2px 5px;
text-align: left;
}
#content table.position table td.product_name
{
text-align: left;
color:#3A5D8E;
}
#content table.position table td.product_name a
{
font-size: 1.4em;
}
#content table.position table td.price:first-child
{
text-align:right;
}

#content #component
{
width: 100%;
}
#content .contentpaneopen
{
margin: auto;
}
#content h1
{
color: #287EB7;
font-family: arial black, avant garde;
text-align: left;
margin-bottom: 3px;
}
#content h2
{
color: #287EB7;
font-family: arial black, avant garde;
text-align: left;
margin-bottom: 3px;
font-size: 1em;
}
#content h3
{
color: #287EB7;
font-family: arial black, avant garde;
text-decoration: none;
text-align: left;
margin-bottom: 3px;
font-size: 0.9em;
}
#content p
{
color: #333333;
font-family: arial, hevetica, sans-serif;
font-size: 10pt;
}
#content table.position table#tecrec
{
border-collapse: collapse;
width : 85%;
margin: auto;
}
#content table.position table#tecrec td
{
border:1px solid black;
}
#content .middle
{
vertical-align: middle;
}
#tecrec td:first-child
{
background-color: #D5E7F2;
vertical-align: middle;
text-align: center;
}
/*----------------------------------------------------------------------------*/
#mLegal
{
text-align: center;
font-size: 8pt;
padding-bottom: 10px;
padding-top: 10px;
background: #E5E5E5;
border-top: 1px solid #D8D8D8;
}
/*----------------------------------------------------------------------------*/
.site
{
background-color: white;
border:solid 1px #cfcfcf;
width: 300px;
font-size: 0.8em;
padding: 3px 3px 3px 3px;
float:right;
margin-top: -30px;
}
.site td:first-child
{
font-weight: bold;
}

/*----------------------------------------------------------------------------*/
#facebook
{
padding: 0px 5px 5px 5px;
margin-top: -6px;
}
#facebook h3
{
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
color: #287EB7;
}
/*----------------------------------------------------------------------------*/
.moduleBorder
{
border: 1px solid grey;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
background: #E8E8E8;
min-width: 190px;
}
.moduleBorder a
{
text-decoration: none;
font-weight: bold;
color: #44A3DD;
font-size: 0.9em;
margin-left: 25px;
margin-top: 5px;
display: block;
}
.moduleBorder a:hover
{
color : #287EB7;
}
.clearBoth
{
clear:both;
}
/*----------------------------------------------------------------------------*/
#footer
{
/*background: url(../images/footer_background.png) #EEE no-repeat;
padding: 10px 0px 10px 0px;
height: 200px;*/
}

#footer ul
{
border-left: 1px solid #012a64;
}
#footer ul li
{
float: left;
padding: 10px 0px 0px 10px;
width: 170px;
}
#footer ul li a
{
text-decoration: none;
font-weight: bold;
font-size: 0.9em;
color: #287EB7;
}
#footer ul ul li
{
float: none;
padding: 5px 0px 0px 20px;
}
#footer ul ul li a
{
font-size: 0.8em;
color: #3496D8;
}

#sponso
{
/*position: fixed;*/
/*bottom: 0px;*/
float: right;
margin-top : 20px;
border: 1px solid grey;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
background: #E8E8E8;
min-width: 200px;
}
#sponso h3
{
text-align: center;
margin-top: 5px;
display:inline;
}
#sponso li
{
list-style: none;
margin: 10px 20px 3px;
float:left;
display:inline;
}
#sponso li img
{
/*opacity: 0.25;*/
width: 60px;
height: 60px;
}
#sponso li img:hover
{
opacity: 1;
}
/*--------------------------------module de formulaire--------------------------------------------*/
#div_captcha
{
width: 270px;
float: left;
clear: right;
margin-left: 50px;
margin-top: 0px;
padding-top: 0px;
color: #333333;
font-size:15px;
}
#aiContactSafe_contact_form
{
width: 320px;
color: #333333;
float: left;
font-size:15px;
}
div.error
{
margin-bottom: 15px;
background-color: #FFF;
padding:5px;
}
div.error dt.error
{
display: none;
}
.aiContactSafe_error_msg
{
display: none;
}
div.contact
{
float: left;
border-left: 1px solid grey;
height: 500px;
padding-left: 10px;
}
div.form
{
width: 700px;
float: left;
}
/*--------------------------------equipe--------------------------------------------*/
#content table.position table.equipe
{
width: 75%;
margin : auto;
}
#content table.position table.equipe td
{
vertical-align: middle;
0
Profil bloqué
27 mars 2013 à 12:43
Dans template.css, ligne 315, remplace

.moduleBorder a {
text-decoration: none;
font-weight: bold;
color: #44A3DD;
font-size: 0.9em;
margin-left: 25px;
margin-top: 5px;
display: block;
}

par

.moduleBorder a {
text-decoration: none;
font-weight: bold;
color: #44A3DD;
font-size: 0.9em;
margin-left: 5px;
margin-top: 5px;
display: block;
}

et mets tes boutons dans ton html, comme les autres. Fais varier ton margin-left en fonction du rendu (il s'agit de la marge à gauche de l'élément en question.
0
Merci beaucoup ça fonctionne !!!
0
Profil bloqué
27 mars 2013 à 13:23
;)
0