Problème dans les code HTML et CSS

Marsh Posté le 24-05-2010 à 22:39:33

Bonjour,

Quelqu'un peut-il m'aider. je suis entraint de créé un site web personnel en formation mais mes formateur ne trouvent pas de solution à mon problème. je vous explique j'ai créé mon site en plusieurs partie et lorsque je met du texte et je l'on actionne la barre de navigation tout le texte se déplace sous le site. et mon pied de page se déplace aussi. je vous transmets le code HTMl ainsi que le CSS.

Je remercie d'avance toute personne pouvant m'aider.

Voici le Code HTML

[#000ef0]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="menu_site.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>
<div id="header">
</div>

<div id="global">

<div id="barreDemenu">

<ul id="menuDeroulant">
<li id="current"><a href="#">Accueil</a></li>
<li><a href="#">Mes créations</a>
<ul class="sousMenu">
<li><a href="#">Logos</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Autres</a></li>
</ul>
</li>
<li>
<a href="#">Photographies</a></li>
<li>
<a href="#">Mes compétences</a>
<ul class="sousMenu">
<li><a href="#">Formation</a></li>
<li><a href="#">Expériences</a></li>
<li><a href="#">Informatique</a></li>
</ul>
</li>
<li><a href="#">Me contacter</a></li>
</ul>
</div>

<div id="menu_gauche">
</div>

<div id="menu_droite">

</div>

<div id="page_principal">
<p>Bonjour</p>
<p>Je viens juste d'apprendre à créé des sites, mais je suis maquettiste inforgraphiste depuis plus de 10 ans. je ne peut pas vous monter l'intégralité ce ce que j'ai effectuer car pour la plus part de mes créations, je n'ai pas eut de droit de le sortir pour des clause de confidentialité.</p>
</div>

<div id="footer">

</div>

</div>
</body>
</html>

Et voici le CSS:

[#0000ff]

body{
margin:0px;
text-align:center;
color: #FFFFFF;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
background-color: #b1b2b0;
}

#header{
position:relative;
width:1024px;
height:100px;
clear:both;
margin-left:auto;
margin-right:auto;
background-image: url(images/bandeau.jpg);
}

#global{
margin-left:auto;
margin-right:auto;
width:1024px;
height:700px;
position:relative;
background-repeat: no-repeat;
background-image:url(images/fond.jpg);
background-color: #69085A;
}

#menu_gauche{
float:left;
position:relative;
width:100px;
height:645px;
z-index:2;

}

#menu_droite{
float:right;
position:relative;
height:645px;
width:100px;
z-index:2;

}

#page_principal{
float:left;
position:relative;
left:0px;
width:824px;
height:615px;
font-family:"Times New Roman", Times, serif;
font-size:16px;
text-align:justify;
line-height: normal;
top: 30px;
z-index:inherit;
}
.Style1 {
font-size: 36px;
background-position: relative;
}
.Style2 {font-size: 18px}

#footer{
position:relative;
width:1024px;
height:30px;
clear:both;
background-color:#69085A;
z-index:2;
}

#barreDemenu{
margin-left:auto;
margin-right:auto;
width:1000px;
height:25px;
clear:both;
position: relative;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
z-index:2;
}

#menuDeroulant
{
background:#69085a;
width:1000px;
height:25px;
list-style-type:none;
margin:0;
padding:0;
border:0;
position:relative;
top:0;
z-index:50;
}

#menuDeroulant li
{
float:left;
width:200px;
margin:0;
padding:0;
border:0;
z-index:50;
}

#menuDeroulant li a:link,#menuDeroulant li a:visited
{
display:list-item ;
color:#69085A;
background:#ac5ea0;
margin:0;
padding:4px 8px;
border-right:1px solid #b1b2b0;
border-left:1px solid #b1b2b0;
text-decoration:none;
z-index:50;
}

#menuDeroulant li a:hover
{
background-color:#c4e356;
height:25px;
z-index:2;
}

#menuDeroulant li a:active
{
background-color:#ac5ea0;
height:25px;
z-index:2;
}

#menuDeroulant .sousMenu
{
display:none;
list-style-type:none;
margin:0;
padding:0;
border:0;
z-index:50;
}

#menuDeroulant .sousMenu li
{
float:none;
margin:0;
padding:0;
border:0;
width:199px;
border-top:1px solid #b1b2b0;
border-right:1px solid #b1b2b0;
border-left:1px solid #b1b2b0;
z-index:50;
}

#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a visited
{
display:block;
color:#69085A;
margin:0;
border:0;
text-decoration:none;
background-color:#ac5ea0;
z-index:50;
}

#menuDeroulant .sousMenu li a:hover
{
background-image:none;
background-color:#c4e356;
z-index:2;
}

#menuDeroulant li:hover> .sousMenu
{
display:block;
z-index:50;
}

#menuDeroulant #current a{
display:block;
color:#69085a;
background:#C4E356;
margin:0;
padding:4px 8px;
border-right:1px solid #b1b2b0;
border-left:1px solid #b1b2b0;
text-decoration:none;
z-index:50;
}

Reply

Marsh Posté le 24-05-2010 à 22:39:33

Reply

Marsh Posté le 25-05-2010 à 02:55:11

Je veux pas faire le méchant, mais ca ne me surprend pas que tes formateurs ne trouve pas la solutions... [:pingouino]

Tant qu'à faire moche, tu peux mettre le #menuDeroulant en position:absolute au lieu de relative, ca devrait marcher

Message édité par Pascal le nain le 25-05-2010 à 02:55:37

Reply

Problème dans les code HTML et CSS

Sujets relatifs:

Leave a Replay