Aller au contenu

Je me perds en css


GaBs34

Sujets conseillés

Bonjour a tous

Je suis en train de refaire le graphisme de mon site et je repart a zéro en essayant de faire le css le plus propre et organisé possible.

Cependant je suis souvent confronté a des problèmes, que j'arrive à résoudre au bout de nombreux essais, mais là je bloque.

Voici l'adresse du site de test : Site de test

J'ai fini le codage de la bannière, du menu en haut et la je m'occupe des deux parties du contenu

J'ai commencé par la colonne de droite et je n'arrive pas a centrer le compteur free et l'horloge sur la colonne

J'aimerais définir par exemple un espacement de 20px entre les deux images, et qu'elles soient centré sur dans la colonne

Voici l'extrait du code de ma page html :

<body>
<div id="banniere">
<ul class="menu">
<li><a href="../index.php">INDEX</a></li>
<li><a href="../forum/index.php">FORUM</a></li>
<li><a href="../astuces/index.php">ASTUCES</a></li>
<li><a href="../images/index.php">LOGOS</a></li>
<li><a href="../astuces/codes.php">CODES</a></li>
</ul>
</div>

<div id="centre">

<div id="droite">
<ul class="colonne_fr">
<li class="colonne_fr"><img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[lesitedegab].dat&display=clock&dd=C&ft=0&tformat=24" alt="" /></li>
<li class="colonne_fr"><img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[lesitedegab].dat&dd=C&ft=0" alt="" /></li>
</ul>
<ul class="colonne">
<li class="colonne">
<a href="http://www.facebook.com/pages/GaB-MOBILE-Astuces-Codes-et-Images-pour-Portables/56510884256" title="GaB-MOBILE : Astuces, Codes et Images pour Portables" target="_TOP"><img src="http://badge.facebook.com/badge/56510884256.3084.10033424.png" width="150" height="175" style="border: 0px;" /></a>
</li>
</ul>
</div>

Et l'extrait de ma feuille css:

<!-- /* CSS DE LA MISE EN FORME DU SITE */ -->

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(../kit/background.jpg);
font-size: 0.8em;
margin: 0;
padding: 0;
cursor: url("../kit/curseur.cur"),
url(../kit/curseur.gif), auto;
}
body img {
border: 0;
}
#centre {
width: 900px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background: url(../kit/haut.gif) no-repeat;
}

#banniere {
width: 900px;
height: 125px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
background: url(../kit/header.gif) no-repeat;
}

#gauche {
float: left;
width: 600px;
margin-top: 5px;
padding-bottom: 5px;
background: url(../kit/gauche.gif) repeat-y;

}

#droite {
float: right;
width: 275px;
margin-top: 5px;
padding-bottom: 5px;
background: url(../kit/droite.gif) repeat-y;
}

#pied {
color:#FFFFFF;
text-align:center;
clear:both;
height: 30px;
background-color:#2E2E2E;
vertical-align: text-top;
border-top: #2E69C5 3px solid;
margin-left: 143px;
margin-right: 146px;
padding-top: 20px;
padding-bottom: 20px;
}

.menu {
margin:0px;
padding:0px;
list-style:none;
overflow:hidden;
}
.menu li {
float: left;
height: 25px;
width: 180px;
display:inline;
margin-top:104px;
}

.menu a {
padding:0 59px;
color:#1d92f2;
text-decoration:none;
font-weight: bold;
font-size: 14px;
}

.menu a:hover {
padding:0 59px;
color:#1d92f2;
font-weight: bold;
font-size: 14px;
background: url(../kit/liens.gif) no-repeat ;
background-position:center center;

}

A:hover {
color:#84B4F6;
font-weight: bold;
cursor: url("../kit/curseur.cur"),
url(../kit/curseur.gif), auto;
}

<!-- /* CSS DE LA MISE EN FORME DU SITE */ -->

<!-- /* CSS DE LA MISE EN FORME GENERALE */ -->

.colonne {
float: left;
list-style-type:none;
}

.colonne_fr {
display:inline;
list-style-type:none;

Merci encore de votre aide ;)

Bonne journée et bonnes fêtes

Modifié par GaBs34
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...