18082 sujets

Questions générales et questions de débutants

Pb de placement du menu (et de l'allignement en général)

Bonjour tout le monde,

En piochant de droite à gauche dans les différents (excellents) tutos de ce site j'ai tenté de passer à l'action coté CSS.

Cependant, j'ai quelques problèmes de positionnement (principalement avec mon menu) mais je pense qu'il y a un problème plus profond que ça.

voila le 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>Manyfest 14 et 15 avril 2006</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 href="mep.css" rel="stylesheet" type="text/css" />
	</head>
<body>
	<div id="conteneur">		
	<h1 id="header"><a href="index.htm" title="Manyfest - Accueil"><span>Manyfest Asso6sons collectif de musiques actuelles bolbecfestival de mirville</span></a></h1>
	<div id="contenu">
	<div id="gauche">
	<img src="images/logo.jpg" id="logo">
	<ul id="menu">
	<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 				codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
	WIDTH=160 HEIGHT=265>
	<PARAM NAME=movie VALUE="flipper.swf?tarframe=_self&exbackground=006699&makenavfield0=# News&makenavurl0=index.htm&makenavfield1=# Edito&makenavurl1=edito.htm&makenavfield2=# Programme&makenavurl2=prog.htm&makenavfield3=# Billetterie&makenavurl3=billetterie.htm&makenavfield4=# Infos Pratiques&makenavurl4=info.htm&makenavfield5=# Histoire&makenavurl5=histoire.htm&makenavfield6=# Bénévolat&makenavurl6=benevolat.htm&makenavfield7=# Forum&makenavurl7=forum.htm&makenavfield8=# Contacts&makenavurl8=contacts.htm">
	<PARAM NAME=loop VALUE=false>
	<PARAM NAME=menu VALUE=false>
	<PARAM NAME=quality VALUE=high>
	<PARAM NAME=scale VALUE=noborder>
	<PARAM NAME=salign VALUE=LT>
	<PARAM NAME=wmode VALUE=transparent>
	<PARAM NAME=bgcolor VALUE=#>
	<EMBED src="flipper.swf?tarframe=_self&exbackground=006699&makenavfield0=# News&makenavurl0=index.htm&makenavfield1=# Edito&makenavurl1=edito.htm&makenavfield2=# Programme&makenavurl2=prog.htm&makenavfield3=# Billetterie&makenavurl3=billetterie.htm&makenavfield4=# Infos Pratiques&makenavurl4=info.htm&makenavfield5=# Histoire&makenavurl5=histoire.htm&makenavfield6=# Bénévolat&makenavurl6=benevolat.htm&makenavfield7=# Forum&makenavurl7=forum.htm&makenavfield8=# Contacts&makenavurl8=contacts.htm" loop=false menu=false quality=high scale=noborder salign=LT wmode=transparent bgcolor=#  WIDTH=160 HEIGHT=265 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
	</OBJECT>
	</ul>
  	</div>
	<div id="centre">
	<p>&nbsp;</p>
	<h2>NEWS</h2>
	<p>
             </p>
	</div>
	<div>
	<p>&nbsp;</p>
	</div>
	<div id="droite">
	</div>
</div>
	<p id="footer">affichage minimum conseillé 1024/768 * navigateur : Mozilla Firefox</p>
	</div>
</body>
</html>


ici l'exemple en vrai
voila le css

/* CSS Document */
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center;
background: #fff;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#conteneur
{
width: 950px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #000 ;
background: #fff ;
}
h1#header
{
height: 271px ;
margin: 0 ;
}
h1#header a
{
width: 950px;
height: 271px;
display: block;
background: url(images/ban-haut.jpg) no-repeat;
position : relative;
left: 0px;
top: 0px;
}
h1#header a span
{
display: none ;
}
#contenu
{
background: url(images/background.jpg) repeat-y 0px 0px;
}
#gauche
{
position: relative;
left:0;
}
#logo
{
position : absolute;
margin-left : 30px;
margin-top : 10px;
border : 0;
}
#menu
{
margin-right : 0px;
margin-top : 0px;
border : 0;
}
#centre
{
position: relative;
padding: 0 180px 0 180px;
}
#contenu h2
{
padding-left: 27px;
line-height: 25px;
background: url(images/puce.gif) no-repeat left bottom;
color: #ff6633;
border-bottom: 1px solid #ff6633;
font-size: medium;
}
#contenu h3
{
margin-left: 27px ;
padding-left: 5px ;
border-bottom: 1px solid #ff6633 ;
border-left: 3px solid #ff6633 ;
color: #ff6633 ;
}
#contenu p
{
text-align: justify;
line-height: 1.7em;
font-size: small;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
}
#contenu a
{
color: #ff6633;
}
#contenu a:hover
{
color: #ff6633;
text-decoration: overline;			
}
#droite
{
position: relative;
right : 0;
}
#footer
{
margin: 0;
padding-right: 10px;
line-height: 15px;
text-align: center;
color: #000;
font-weight: bold;
font-size: small;
}


et du coup, ça devrait donner ça

un détail, quand je supprime tout ce qui concerne le menu, j'ai un espace de 15/20px entre "head" et "contenu"

et pour courroner le tout je suis à la bourre pour rendre ce site en main propre Smiley sweatdrop

merci de votre aide Smiley prie
Modifié par Raphu (23 Feb 2006 - 15:47)
Sujet clos
Aller à