problème d'alignement

benja88 · Message par **benja88** » 02 août 2004, 13:47

Bonjour,

J'ai réalisé une page d'introduction XHTML Strict Valid, seulement la page s'affiche tel que je le souhaite sous IE mais pas sous FF.
En effet, la liste du menu ne se met pas au centre de la page mais reste à gauche sous FF.

Voici le code de la page :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Mon titre</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>

<body>

	<p><a href="/"><img id="logo" src="images/menu.jpg" alt="Menu" /></a></p>
	<div id="navcontainer">
		<ul>
		<li><a href="blog/"><img src="images/arrow.gif" alt="arrow" />Blog</a></li>
		<li><a href="2bgal/"><img src="images/arrow.gif" alt="arrow" />Galerie</a></li>
		<li><a href="radio/"><img src="images/arrow.gif" alt="arrow" />Jukebox</a></li>
		<li><a href="bookmarks/"><img src="images/arrow.gif" alt="arrow" />Bookmarks</a></li>
		<li><a href="downloads/"><img src="images/arrow.gif" alt="arrow" />Downloads</a></li>
		<li><a href="wikini/"><img src="images/arrow.gif" alt="arrow" />Wiki</a></li>
		</ul>
	</div>
	<p><a href="mail/mail.php"><img id="mail" src="http://www.benja88.be/test/images/mail.png" alt="Mail" /></a></p>
	
</body>
</html>

Et voici le code de la feuille de style :

Code : Tout sélectionner

body {
background-color: #000000;
text-align: center;
}

#logo {
width: 540px;
height: 170px;
margin: 30px;
border: none;
}

#mail {
width: 80px;
height: 15px;
margin-top: 80px;
border: none;
}

#navcontainer ul {
margin-left: 0px;
text-align: center;
width: 160px;
height: 150px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a {
display: block;
width: 160px;
padding: 3px;
background-color: #000000;
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover {
background-color: #FFFFFF;
color: #000000;
}

#navcontainer img{
float: left;
border: none;
width: 7px;
height: 5px;
margin-top: 7px;
}

Merci d'avance pour votre aide,

A bientôt,
benja88

jv2759 · Message par **jv2759** » 02 août 2004, 14:07

Le mieux c'est de suprimer le text-aligne n'est la pour modifier uniquement le text et rien d'autre. Eventuelement les image, mais pas un div...

Quand tu veux centré un div il faut faire :

#navcontainer{
margin-left: auto;
margin-right: auto;
}

benja88 · Message par **benja88** » 02 août 2004, 14:22

Merci pour la réponse mais étrangement ça ne marche pas.
J'ai essayé en laissant le text-align et en le virant, tout en mettant les margin : auto que tu m'as dit, cependant ça ne marche pas j'ai toujours mon div à gauche.

Voir ici

jv2759 · Message par **jv2759** » 02 août 2004, 14:30

Oui je vien de regarder, le probléme c'est que quand j'ai trouver le coup des margin, il était écrie qu'il faut indiquer une taille. Mais cela avait marchais sans..;

Mais comme tu as des style à l'interieure cela ne marche plus donc il faut utiliser un truc dans le genre :

Code : Tout sélectionner

#navcontainer {
width: 160px;
margin-left: auto;
margin-right: auto;
}

benja88 · Message par **benja88** » 02 août 2004, 14:40

Cool ça marche, merci beaucoup.

Il y a juste encore un tout petit problème que j'aimerais régler :
le menu est un peu excentré sur la droite et pas parfaitement au centre comme dans IE.

Apparement ça vient d'une autre zone qui prend de la place à gauche ( j'ai vu ça avec web developer toolbar > information > topographic information ).
Seulement je ne sais pas comment la supprimer.

Une idée ?

jv2759 · Message par **jv2759** » 02 août 2004, 15:05

Non pas trop, car en fait, cela est lier à la liste, car l'espace blanc est lier à la liste car quand on en crée une il décale toujours, or la le probléme c'est qu'en décalent, or la en plus tu centre sans avoir rien mit ni au dessu, ni en dessou... Ce qui fait que cela ne fait pas tres beaux...

La seul solution que je vois là c'est abandonner la liste...

benja88 · Message par **benja88** » 02 août 2004, 20:12

OK, c'est ce que j'ai fais alors : j'ai viré les <ul> et <li> et ça marche pas plus mal comme ça...

Faut pas chercher la complication des fois

Merci encore pour ton aide c'est sympa,
A bientôt,

benja88

Geckozone

problème d'alignement

problème d'alignement

Marche pas....

merci ça marche, encore une chose...

ben oui en fait c'est pas plus mal...

Qui est en ligne ?