[Résolu] Comment relier son site? par Faror - page 1

bonjour a tous!
Bon voila, j'explique ma question.Quand je dis "Comment relier son site?" je sais pas trop comment vous expliquer donc je vais vous montrer un exemple.Regardez cette image:<lien url="http://img422.imageshack.us/img422/2406/narutofunproblemeliens4ij.jpg"></lien>.La page de mon site que vous voyez est la page d'Accueil(encadrée en rouge sur mon image), donc la page index.html.Sur mon espace web avec Filezilla j'ai mis cette page qui est la page index.html ainsi qu'une page histoire.html qui correspond au lien Histoire sur l'image(encadré en bleu).Ma question est:Comment je dois faire pour faire les lien, par exemple ici, qu'est ce que je dois faire pour qu'a partir de la page d'Accueil, je puisse aller a la page Histoire en cliquant sur le lien Histoire.
Je vous met mon code XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Naruto Fun</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design Naruto Fun 1" href="CSS/Naruto Fun-design.css"/>
</head>

<body>

<div id="en_tete">
</div>

<div id="menu">
<div class="menu_principal">
<h3><img src="CSS/Modele du site/menu2.jpg" alt="Menu Principal"/></h3>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Historique</a></li>
<li><a href="#">Team</a></li>
</ul>
</div>

<div class="naruto">
<h3><img src="CSS/Modele du site/naruto.jpg" alt="Naruto"/></h3>
<ul>
<li><a href="#">Histoire</a></li>
<li><a href="#">Personnages</a></li>
<li><a href="#">Jeux Videos</a></li>
</ul>
</div>

<div class="multimedia">
<h3><img src="CSS/Modele du site/media.jpg" alt="Multimedia"/></h3>
<ul>
<li><a href="#">Episodes</a></li>
<li><a href="#">Scans</a></li>
</ul>
</div>

<div class="partenaires">
<h3><img src="CSS/Modele du site/partenaires.jpg" alt="Partenaires"/></h3>
</div>
</div>

<div id="corps">
<div id="cadre">
<div id="hautdroit"></div>
<div id="hautgauche"></div>
<div id="contenu">
<img src="CSS/Images/faror lotus2.jpg" class="faror_lotus2" alt="faror lotus2"/><br />
<a href="mailto:faror91@yahoo.fr" class="faror">Faror</a><br />
<p>Bonjour à tous,<br/>
Et bien voila enfin!Au bout de 1 an,
   j'ai enfin fini mon site web.Et oui!Je
   l'ai commencé en juin, puis fin août, GLK,
   le designer sans lequel je n'aurais jamais
   put avoir un site aussi beau, m'a rejoint
   dans ma tentative(presque désespéré) de faire
   un site. Et aujourd'hui je suis enfin arrivé
   au bout du tunnel. Le site n'est pas encore
   tout à fait complet, mais j'espere, que vous
   l'apprecierez.<br/><br/>
<span class="bonne-visite">Bonne Visite!</span></p>
<span class="date-du-commentaire">Le XX/XX/2006</span>
</div>
<div id="basdroit"></div>
<div id="basgauche"></div>
</div>
</div>

<div id="pied_de_page">
<p>Copyright narutofun.free.fr tous droits réservés<br />
Webmaster:Faror<br />
Design:GLK<br />
Toute reproduction totale ou partielle du contenu de ce site est strictement interdite.<br />
© 2005 narutofun.free.fr</p>
</div>

</body>
</html>

Et mon code CSS:

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
margin-bottom:20px;/* Idem pour le bas du navigateur */
background:url("../CSS/Modele du site/fond2.jpg") center;
font: 1em black verdana, sans-serif;
font-family:"Times New Roman","Comic Sans MS",Arial,"Arial Black",serif;
}
/*---------------------------------------------------------------------------------------------------------------------------*/
/*LES LIENS*/
a
{
color:orange;
}

/*Au passage de la sourie*/
a:hover
{
color:silver;
font-size:;/*il faut mettre "font-size:large;" pour que le mot devienne plus gors au passage de la souris*/
}

/*
Pour les liens deja visités
*/
a:visited
{
color:;
}
/*---------------------------------------------------------------------------------------------------------------------------*/
p
{
font-size:medium;
font-family:"Times New Roman","Comic Sans MS",Arial,"Arial Black",serif;
text-align:justify;
width:90%;
padding:12px;/*La marge interieur,entre la bordure,et entre le texte*/
margin:0px;/*La marge extérieur,entre les paragraphes*/
margin: auto;/*Pour centrer les paragraphes au centre.Attention!il faut d'abord avoir utilisé "width" */
overflow:auto;

}

/*---------------------------------------------------------------------------------------------------------------------------*/
#en_tete
{
width: 1000px;
height:281px;
background-image: url("../CSS/Modele du site/naruto banniere copie.gif");
background-repeat: no-repeat;
}

/*---------------------------------------------------------------------------------------------------------------------------*/

#corps
{
background:url("../CSS/Modele du site/corps3.jpg");
width: 539px;
height:700px;
margin-left: 150px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 55px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
text-align: justify;
}

/*---------------------------------------------------------------------------------------------------------------------------*/

#menu
{
float: left; /* Le menu flottera à gauche */
width: 150px; /* Très important : donner une taille au menu */
background:url("../CSS/Modele du site/menu.jpg") repeat-x;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés: ca sert à éloigner le contenu d'un bloc, de sa bordure */
margin-right:100px;
}

ul
{
list-style-type:none;
}

#menu a
{
text-decoration:none;
font-family:"Comic Sans MS","Times New Roman",Arial,"Arial Black",serif;
color:rgb(115,36,48);
font-size: 11px;
font-weight: ;
line-height:px;/*pour espacer les lignes*/

}

#menu a:hover
{
color:silver;
}

/*---------------------------------------------------------------------------------------------------------------------------*/

#pied_de_page
{
padding:5px;
text-align: center;
border:hidden;
background-image:url("../CSS/Modele du site/corps3.jpg");
margin-left:149px;
width: 645px;
}

/*---------------------------------------------------------------------------------------------------------------------------*/
/* LES NEWS*/

/* Tout ce qui concerne les cadres arrondis */

#cadre
{ /* taille du cadre, à titre d'exemple */
width: 30em;
background:url("../CSS/Modele du site/fond.jpg");
margin-left:50px;
margin-top:50px;
}
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit
{
height: 19px;
width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche
{
background: url("../CSS/Modele du site/hautgauche copie.gif");
}
#hautdroit
{
float: right;
background: url("../CSS/Modele du site/hautdroit copie.gif");
}
#basgauche
{
background: url("../CSS/Modele du site/basgauche copie.gif");
}
#basdroit
{
float: right;
background: url("../CSS/Modele du site/basdroit copie.gif");
}
#contenu p /*Toute balise 'p' située dans une balise possédant une classe 'contenu'. Cela permet de spécifier des styles de façon moins générale.*/
{
color: black;
margin: 0.5em; /*gestion des espaces interparagraphes */
margin-left: 10px;
text-align: left;
width: 30em;
}

.faror_lotus2/*L'image*/
{
margin-left:10px;
}

/*Le texte des news*/

.faror
{

float: left;
margin-left:50px;
font-weight: bold;
color:black;
text-decoration:none;
}

ul
{
list-style-type:none
}

.date-du-commentaire
{
margin-left:360px;
font-style:italic;
}

.bonne-visite
{
margin-left:350px;
font-weight: bold;
}

/*---------------------------------------------------------------------------------------------------------------------------*/
.image-kyubi
{
text-align:center;
}

Merci d'avance

Cordialement Faror.

Faror

6 juin 2006 à 21:37:25