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">
<!--
#apDiv1 {
position:relative;
left:114px;
top:168px;
width:278px;
height:120px;
z-index:1;
overflow: auto;
}
-->
</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">
<!--contenu du menu de 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">
<!--contenu du 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;
}