18041 sujets

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

Inserer une nouvelle page dans un cadre

Bonsoir

je debute dans la creation de site, j'ai utiliser un modele de mise en page css du site....

j'ai donc le header, mon menu a gauche , mon contenu et mon pied de page.

quand je met un lien vers une page dans mon menu, ma page ne se positionne pas dans le contenu, mais ouvre une autre page.

j'ai chercher, mais etant debutante je n'ai pas trouver la solution...

merci d'avance.

Nirka
Bonjour,

nirka a écrit :
quand je met un lien vers une page dans mon menu, ma page ne se positionne pas dans le contenu, mais ouvre une autre page.

C'est normal. À la base, le Web fonctionne comme ça. Et même aujourd'hui, c'est le mode de fonctionnement principal des sites web: des liens hypertexte pointent vers des documents web complets, chaque document web (chaque page d'un site par exemple) ayant dans son code HTML tous les éléments de l'«interface» (en-tête, menu de navigation, habillage...) du site.

Il te faut donc créer des pages web complètes et pas juste une page d'accueil complète (avec en-tête, menu, habillage...) et des contenus sans interface pour les autres pages.
Bonsoir

merci de votre réponse, mais malheureusement je n'ai pas compris.

je pensai qu'il fallait simplement que je dise quelque part dans ma page menu....que le lien que je veux ouvrir s'ouvre a tel endroit....par un code...

j'ai chercher en regardant les iframes, mais je n'ai meme pas compris a quoi cela sert ....LOL

merci
nirka a écrit :
je pensai qu'il fallait simplement que je dise quelque part dans ma page menu....que le lien que je veux ouvrir s'ouvre a tel endroit....par un code...

Ben non. Enfin, c'est techniquement possible (frames, Ajax), mais je ne recommanderais pas ces techniques aux débutants.

Donc, pour un site avec deux pages, tu as une première page, par exemple champignons.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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>La vie des champignons - Champignons et ragondins</title>
</head>

<body>

<h1>Champignons et ragondins</h1>

<h2>Navigation</h2>
<ul>
    <li><a href="champignons.html">La vie des champignons</a></li>
    <li><a href="ragondins.html">Éloge des ragondins</a></li>
</ul>

<h2>La vie des champignons</h2>

<p>Bla bla bla les champignons.</p>

</body>
</html>
et une deuxième page, disons ragondins.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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Éloge des ragondins - Champignons et ragondins</title>
</head>

<body>

<h1>Champignons et ragondins</h1>

<h2>Navigation</h2>
<ul>
    <li><a href="champignons.html">La vie des champignons</a></li>
    <li><a href="ragondins.html">Éloge des ragondins</a></li>
</ul>

<h2>Éloge des ragondins</h2>

<p>Bla bla bla les ragondins.</p>

</body>
</html>
Et voilà. Si tu as cent pages avec la même structure, il te faut cent pages HTML avec chacune le code HTML (et CSS) des éléments communs de la structure, et seulement le contenu propre à la page qui change.

Dans le cas d'un site avec un nombre relativement important de pages, tout ça peut s'automatiser en partie grâce à certaines technologies côté serveur, telles que PHP par exemple. On pourra rester sur quelque chose de très très simple:
http://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-PHP

(Par contre, lire attentivement ce tutoriel pour éviter de faire certaines erreurs de débutant. Smiley cligne )
Bonsoir Florent,

merci de prendre du temps pour m'expliquer.

j'ai essayer ce que vous m'avez expliquer....

pas tout compris, j'ai pourtant lu les explications du site.

est ce que je peux vous montrer mes pages ?

Bonsoir
Voila donc ma toute 1er page....menu pris sur ce site...

On ne rigole pas....

<!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>Largeur fixe 750, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #99FFFF;
}

a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
margin-top:5px ; /* Crée une marge de 5 pixels en haut des boutons */
text-align:center; /* centre le texte de chaque bouton */
width:120px ; /* largeur de chaque bouton = 200 pixels */
height: 20px ; /* défini la hauteur des boutons */
border-style:outset ; /* relief sur l'encadrement des boutons */
border-width:3px ; /* épaisseur de l'encadrement des boutons = 3 px */
padding:2px } /* défini la marge intérieur des boutons à 2px */

a.menu1:hover {color:black ; /* change couleur de la police lors du survol souris */
background-color:#0000FF ; /* change couleur du fond lors du survol souris */
background-image: url(fond_cadre.jpg) ; /* place une image de fond */
border-style:inset ; /* relief enfoncé sur l'encadrement des boutons */
font-size:140%} /* augmente de 40% la police du bouton lors du survol */




#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: relative;
width: 950px;
margin: 0 auto;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
height: 600px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>
</head>

<body>

<div id="conteneur">

<div id="header">header de largeur fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

<div id="gauche"><p></p>
<p></p>

<a class="menu1" href="">News</a> <!-- Bouton 1 -->
<a class="menu1" href="historique2.html">Présentation</a> <br><!-- Bouton 2 -->
<a class="menu1" href="">Riven</a> <br><!-- Bouton 3 -->
<a class="menu1" href="">Nirka</a> <!-- Bouton 4 -->
<a class="menu1" href="">Sherkane</a> <!-- Bouton 5 -->
<a class="menu1" href="">Bagheera</a><br> <!-- Bouton 6 -->
<a class="menu1" href="">Photos</a> <!-- Bouton 3 -->
<a class="menu1" href="">Contact</a> <!-- Bouton 4 -->
<a class="menu1" href="">Liens</a> <!-- Bouton 5 -->
<a class="menu1" href="">Livre d'or</a> <!-- Bouton 6 -->






</UL>


</div>

<div id="centre">
partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />



</div>


<div id="pied">pied de page de largeur fixe : 750px </div>
</div>


</body>
</html>




ensuite voila les 2 pages que j'ai faites suite au x explications de Florent...



<div id="header">header de largeur fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

<div id="gauche"><p></p>
<p></p>

<a class="menu1" href="">News</a><br> <!-- Bouton 1 -->
<a class="menu1" href="historique2.html">Présentation</a> <br><!-- Bouton 2 -->
<a class="menu1" href="">Riven</a> <br><!-- Bouton 3 -->
<a class="menu1" href="">Nirka</a> <!-- Bouton 4 -->
<a class="menu1" href="">Sherkane</a> <!-- Bouton 5 -->
<a class="menu1" href="">Bagheera</a><br> <!-- Bouton 6 -->
<a class="menu1" href="">Photos</a> <!-- Bouton 3 -->
<a class="menu1" href="">Contact</a> <!-- Bouton 4 -->
<a class="menu1" href="">Liens</a> <!-- Bouton 5 -->
<a class="menu1" href="">Livre d'or</a> <!-- Bouton 6 -->
</UL>
</div>

<div id="pied">pied de page de largeur fixe : 750px </div>
</div>



2eme

<!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>Largeur fixe 750, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #99FFFF;
}

a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
margin-top:5px ; /* Crée une marge de 5 pixels en haut des boutons */
text-align:center; /* centre le texte de chaque bouton */
width:120px ; /* largeur de chaque bouton = 200 pixels */
height: 20px ; /* défini la hauteur des boutons */
border-style:outset ; /* relief sur l'encadrement des boutons */
border-width:3px ; /* épaisseur de l'encadrement des boutons = 3 px */
padding:2px } /* défini la marge intérieur des boutons à 2px */

a.menu1:hover {color:black ; /* change couleur de la police lors du survol souris */
background-color:#0000FF ; /* change couleur du fond lors du survol souris */
background-image: url(fond_cadre.jpg) ; /* place une image de fond */
border-style:inset ; /* relief enfoncé sur l'encadrement des boutons */
font-size:140%} /* augmente de 40% la police du bouton lors du survol */




#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: relative;
width: 950px;
margin: 0 auto;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
height: 600px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>
</head>

<body>

<div id="conteneur">
<?php include('header.inc.php'); ?>


<div id="centre">
partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />



</div>


<div id="pied">pied de page de largeur fixe : 750px </div>
</div>


</body>
</html>
toutes mes excuses pour cette mauvaise présentation...je refais.

donc voila la 1er page que j'ai faite..en voulant inserer un lien dans mon menu au niveau presentation, du coup ca m'ouvre une autre page.

ce que j'aimerais c'est que cette page, s'ouvre dans le contenu.

[code]<!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>Largeur fixe 750, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #99FFFF;
}

a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
margin-top:5px ; /* Crée une marge de 5 pixels en haut des boutons */ 
text-align:center; /* centre le texte de chaque bouton */
width:120px ; /* largeur de chaque bouton = 200 pixels */
height: 20px ; /* défini la hauteur des boutons */
border-style:outset ; /* relief sur l'encadrement des boutons */
border-width:3px ; /* épaisseur de l'encadrement des boutons = 3 px */
padding:2px } /* défini la marge intérieur des boutons à 2px */

a.menu1:hover {color:black ; /* change couleur de la police lors du survol souris */
background-color:#0000FF ; /* change couleur du fond lors du survol souris */ 
background-image: url(fond_cadre.jpg) ; /* place une image de fond */
border-style:inset ; /* relief enfoncé sur l'encadrement des boutons */ 
font-size:140%} /* augmente de 40% la police du bouton lors du survol */




#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: relative;
width: 950px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
height: 600px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>
</head>

<body>

<div id="conteneur">

	  <div id="header">header de largeur fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche"><p></p>
	  <p></p>
	  	
		<a class="menu1" href="">News</a> <!-- Bouton 1 -->
<a class="menu1" href="historique2.html">Présentation</a> <br><!-- Bouton 2 -->
<a class="menu1" href="">Riven</a> <br><!-- Bouton 3 -->
<a class="menu1" href="">Nirka</a> <!-- Bouton 4 -->
<a class="menu1" href="">Sherkane</a> <!-- Bouton 5 -->
<a class="menu1" href="">Bagheera</a><br> <!-- Bouton 6 -->
<a class="menu1" href="">Photos</a> <!-- Bouton 3 -->
<a class="menu1" href="">Contact</a> <!-- Bouton 4 -->
<a class="menu1" href="">Liens</a> <!-- Bouton 5 -->
<a class="menu1" href="">Livre d'or</a> <!-- Bouton 6 -->






</UL>		

		
	  </div>
	  
	  <div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
 partie avec du contenu occupant le reste de la largeur<br />	  
	  
	   partie avec du contenu occupant le reste de la largeur<br />
	   partie avec du contenu occupant le reste de la largeur<br />
	   partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
 partie avec du contenu occupant le reste de la largeur<br />	  
	  
	   partie avec du contenu occupant le reste de la largeur<br />
	   partie avec du contenu occupant le reste de la largeur<br />
	  
	  
	  
  	</div>

	  
	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>
	  

</body>
</html>


ensuite j'ai suivi les explications de Florent en faisant 2 autres pages....

[/code]


	  <div id="header">header de largeur fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche"><p></p>
	  <p></p>
	  	
		<a class="menu1" href="">News</a><br> <!-- Bouton 1 -->
<a class="menu1" href="historique2.html">Présentation</a> <br><!-- Bouton 2 -->
<a class="menu1" href="">Riven</a> <br><!-- Bouton 3 -->
<a class="menu1" href="">Nirka</a> <!-- Bouton 4 -->
<a class="menu1" href="">Sherkane</a> <!-- Bouton 5 -->
<a class="menu1" href="">Bagheera</a><br> <!-- Bouton 6 -->
<a class="menu1" href="">Photos</a> <!-- Bouton 3 -->
<a class="menu1" href="">Contact</a> <!-- Bouton 4 -->
<a class="menu1" href="">Liens</a> <!-- Bouton 5 -->
<a class="menu1" href="">Livre d'or</a> <!-- Bouton 6 -->
</UL>		
	  </div>
	  
	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>



[code]<!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>Largeur fixe 750, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #99FFFF;
}

a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
margin-top:5px ; /* Crée une marge de 5 pixels en haut des boutons */ 
text-align:center; /* centre le texte de chaque bouton */
width:120px ; /* largeur de chaque bouton = 200 pixels */
height: 20px ; /* défini la hauteur des boutons */
border-style:outset ; /* relief sur l'encadrement des boutons */
border-width:3px ; /* épaisseur de l'encadrement des boutons = 3 px */
padding:2px } /* défini la marge intérieur des boutons à 2px */

a.menu1:hover {color:black ; /* change couleur de la police lors du survol souris */
background-color:#0000FF ; /* change couleur du fond lors du survol souris */ 
background-image: url(fond_cadre.jpg) ; /* place une image de fond */
border-style:inset ; /* relief enfoncé sur l'encadrement des boutons */ 
font-size:140%} /* augmente de 40% la police du bouton lors du survol */




#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: relative;
width: 950px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
height: 600px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>
</head>

<body>

<div id="conteneur">
<?php include('header.inc.php'); ?>

		  
	  <div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
 partie avec du contenu occupant le reste de la largeur<br />	  
	  
	   partie avec du contenu occupant le reste de la largeur<br />
	   partie avec du contenu occupant le reste de la largeur<br />
	   partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
 partie avec du contenu occupant le reste de la largeur<br />	  
	  
	   partie avec du contenu occupant le reste de la largeur<br />
	   partie avec du contenu occupant le reste de la largeur<br />
	  
	  
	  
  	</div>

	  
	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>
	  

</body>
</html>


voila mais je ne sais pas si cela est correcte....

merci a tous pour votre aide.

je suis vraiment débutante et ceux sont mes premieres pages....oupssssss
nirka a écrit :
est ce que je peux vous montrer mes pages ?

Tant que c'est publiquement sur le forum, oui. Smiley smile
(Et bien sûr les autres membres du forum peuvent répondre, hein.)

Edit: ai vu le code. Ça fait beaucoup de code à lire donc je ne peux pas t'assurer que c'est bon. Le principe a l'air compris, mais il se peut qu'il y ait des problèmes malgré tout.

Ça n'est pas le sujet ici, mais tu pourrais améliorer ton code HTML. Ne pas utiliser des paragraphes vides pour espacer les éléments mais utiliser les propriétés margin et padding. Ne pas utiliser des <br> dans tous les sens mais travailler avec des paragraphes (ça laisse plus de liberté pour la mise en page du texte). Pour les menus de navigation, on utilise généralement une liste non ordonnée, sur le modèle suivant:
<ul id="navigation">
	<li><a href="page1.html">Page 1</a></li>
	<li><a href="page2.html">Page 2</a></li>
	<li><a href="page3.html">Page 3</a></li>
	<li><a href="page4.html">Page 4</a></li>
</ul>


Mais ça va venir. Smiley cligne
Modifié par Florent V. (08 Feb 2008 - 23:13)
Oui bien sur que tout le monde peut regarder.....et me donner des conseils.....

Merci Florent pour votre aide...
re...re...merci

La seule chose c'est que je ne sais toujours pas pourquoi ma page ne s'ouvre pas dans le contenu......lol

a écrit :
<a class="menu1" href="historique2.html">Présentation</a> <br><!-- Bouton 2 -->


j'ai citer ce morceau de code html dans ma toute 1er page....
nirka a écrit :
La seule chose c'est que je ne sais toujours pas pourquoi ma page ne s'ouvre pas dans le contenu......lol

Comme je l'ai déjà expliqué, on ne dit pas à la page de «s'ouvrir dans le contenu». On est sur la page 1, et on dit au navigateur (en cliquant sur un lien) de charger la page 2. Et comme la page 2 est structurée comme la page 1, on retrouve les mêmes éléments (en-tête, menu), avec juste une partie des éléments qui changent. Cf. mon exemple plus haut.

Est-ce que tu arrives à faire deux pages séparées, et en accédant séparément à chacune de ces pages (en ouvrant directement le fichier avec le navigateur par exemple) est-ce que tu obtiens bien une même interface avec juste le contenu qui change?
Si ça n'est pas le cas, eh bien il va falloir revoir tout ça.
Bonsoir

Bon j'avance a petit pas.....

j'ai en gros compris le principe, sauf que je n'arrive pas a positionner mes news au centre de ma page menu....

je pense que c'est tout bete....mais j'ai pas trouver....oupssss

je met les codes, si une âme charitable passe par la...

[code]<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<!-- Date de création: 09/02/2008 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="BS OWNZ YOU" />
<meta name="generator" content="WebExpert 5" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />


</head>
<body>
  <div id="header">header de largeur fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche"><p></p>
	  <p></p>
	  	
<a class="menu1" href="news2.php">News</a><!-- Bouton 1 -->
<a class="menu1" href="presentation.php">Présentation</a> <br><!-- Bouton 2 -->
<a class="menu1" href="">Riven</a> <br><!-- Bouton 3 -->
<a class="menu1" href="">Nirka</a> <!-- Bouton 4 -->
<a class="menu1" href="">Sherkane</a> <!-- Bouton 5 -->
<a class="menu1" href="">Bagheera</a><br> <!-- Bouton 6 -->
<a class="menu1" href="">Photos</a> <!-- Bouton 3 -->
<a class="menu1" href="">Contact</a> <!-- Bouton 4 -->
<a class="menu1" href="">Liens</a> <!-- Bouton 5 -->
<a class="menu1" href="">Livre d'or</a> <!-- Bouton 6 -->




</UL>		

		
	  </div>
	  	
	  </div>
	  
	  <div id="centre">
	
	 
	  
  	</div>

	  
	  
	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>
	

</body>
</html>


[/code]
  
	<h1> des nouvelles de quoi...........de qui......</h1>
<?php include("menu3.php"); ?>



merci bonne soirée
Sujet clos
Aller à