28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Problème d'alignement horizontal de texte avec UL, LI et A ?

Bonjour,

Je souhaiterai positionner mon texte à droite de chaque bloc de mon menu. Celui-ci est actuellement collé à la bordure du bloc...
Lorsque j'essai d'ajouter un margin ou padding pour laisser un peu d'espace à droite entre le texte et la bordure, celui-ci ne fonctione pas.

http://cjoint.com/data/lplg5z8a6x_Sans_titre.PNG

Voici mon code CSS :

body
{
	background-color	: #C7E7D5;
	font-family			: Verdana;
	font-size			: 0.7em;
}

img
{
	border				: none;
}

#global
{
	margin-left			: auto;
	margin-right		: auto;
	width				: 760px;
}

#header
{
	border				: 1px #000000 solid;
	width				: 759px;
}

#gauche
{
	background-color	: #007BC1;
	background-image	: url(images/gauche_fond.jpg);
	background-repeat	: no-repeat;
	border-left			: 1px #000000 solid;
	min-height			: 320px;
	width				: 160px;
}

#navigation
{
	padding-top			: 5px;
	text-align			: center;
}

#centre
{
	background-color	: #E2EFBA;
	background-image	: url(images/centre_fond.jpg);
	background-repeat	: no-repeat;
	border-right		: 1px #000000 solid;	
	margin-left			: 160px;
	margin-top			: -320px;
	min-height			: 320px;
	width				: 600px;
}

#footer
{
	text-align			: center;
}

.menu a
{
	display				: block;
	color				: #FFF300;
	font-style			: bold;
	height				: 25px;
	margin-left			: -40px;
	text-align			: right;
	text-decoration		: none;
	width				: 160px;
}

.menu a:hover
{
	background			: #007BC1;
}

.menu ul
{
	list-style-type		: none;	
}

.menu li
{
	list-style-type		: none;
}


Et mon code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Mon site...</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-language" content="fr" />
		<link rel="stylesheet" href="mon.css" />
	</head>
	<body>
		<div id="global">
			<div id="header">HEADER</div>
			<div id="gauche">
				<div id="navigation">
					<a href="#"><img src="images/menu_sommaire.gif" alt="" onmouseover="this.src='images/menu_sommaire_dessus.gif'" onmouseout="this.src='images/menu_sommaire.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="#"><img src="images/menu_contact.gif" alt="" onmouseover="this.src='images/menu_contact_dessus.gif'" onmouseout="this.src='images/menu_contact.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="javascript:history.back();"><img src="images/menu_back.gif" alt="" onmouseover="this.src='images/menu_back_dessus.gif'" onmouseout="this.src='images/menu_back.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="javascript:history.next();"><img src="images/menu_next.gif" alt="" onmouseover="this.src='images/menu_next_dessus.gif'" onmouseout="this.src='images/menu_next.gif'" /></a>
				</div>
				<ul class="menu">
					<li><a href="#">abcd</a></li>
					<li><a href="#">efgh</a></li>
					<li><a href="#">ijkl</a></li>
					<li><a href="#">mnop</a></li>
					<li><a href="#">qrst</a></li>
				</ul>
			</div>
			<div id="centre"><?php include('centre.php'); ?></div>
			<div id="footer">
				<br/>xxxxx<br/>			
			</div>
		</div>
	</body>
</html>


Comment puis-je faire ?

Merci par avance,
ZiP
Modifié par ZiP (15 Nov 2006 - 12:49)
Modérateur
bonjour,

une petite erreur au niveau du css :

.menu ul , ne vas rien ciblé , sauf une sous liste eventuelle a ul.menu.

Ensuite , en reecrivant le selecteur correctement et en enlevant les marges par defaut on retrouve une base "identique" d'affichage pour commencer a appliquer les styles .

.menu
{
	list-style-type		: none;	
	margin:0;
	padding:0;
}


ensuite il suffit d'appliquer a <a< un display:block et un padding a droite :
.menu a
{
	display				: block;
	color				: #FFF300;
	font-style			: bold;
	height				: 25px;
	text-align			: right;
	text-decoration		: none;
padding-right:1em;
}


++
Sujet clos
Aller à