Je me perds en css

GaBs34 · 29 Décembre 2009

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é 29 Décembre 2009 par GaBs34

GaBs34 · 29 Décembre 2009

Bonsoir

Après y avoir passé l'après-midi j'ai enfin trouvé la solution

un text-align:center suffisait

Merci quand même

Bonnes fêtes

Connexion

Je me perds en css

Sujets conseillés

GaBs34

GaBs34

Veuillez vous connecter pour commenter

Parcourir

Activité