18073 sujets

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

Problème avec le tuto des pseudo frames

Bonjour ^^

Donc je suis en train de faire un site, et je suis votre tuto sur comment remplacer les frames avec le CSS. Tout est OK, mais il me reste 2 petits détails "esthétiques" à règler Smiley smile

-> l'image "dynamique" du fond se répète quand on peut scroller (un peu comme une texture), est t il possible de la fixer et de ne faire bouger que le texte quand on scroll?

-> J'ai un système de menus/sous menus. Quand je clique sur un menu, le sous menu apparait. Quand je clique sur le sous menu la page qui correspond s'affiche, mais la liste des sous menus disparait.

Y a t il une solution?

Merci beaucoup d'avance Smiley ravi



PS important ^^ Voici l'adresse du site en question : http://lasquellec.ludovic.free.fr

Voici le code de index.php :


<html>
<head>
<style type="text/css">
a:link {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
a:visited {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
a:hover {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
.bas{margin-left:150px ; margin-top:0px ; background-image:url(img/imgprinc_05.jpg) ; width:800px ; height:100px}
.ecranprinc{margin-left:150px ; margin-top:0px ; background-image:url(img/Copie de imgprinc_04.jpg) ; width:800px ; height:383px ; overflow:auto}
.menus{margin-left:150px ; margin-top:0px ; background-image:url(img/imgprinc_02.jpg) ; width:347px ; height:36px}
.smenus{margin-left:497px ; margin-top:-36px ; background-image:url(img/imgprinc_03.jpg) ; width:453px ; height:36px ; position:relative}
.haut{margin-left:150px ; margin-top:10px ; background-image:url(img/imgprinc_01.jpg) ; width:800px ; height:81px}
.menu1{ font-family:"Arial Narrow" ; font-size:14px ; left:165px ; top:106px ; z-index:1 ; color:#FFFFFF ; position:absolute}
.menu2{ font-family:"Arial Narrow" ; font-size:14px ; left:255px ; top:106px ; position:absolute ; z-index:1 ; color:#FFFFFF}
.menu3{ font-family:"Arial Narrow" ; font-size:14px ; left:345px ; top:106px ; position:absolute ; z-index:1 ; color:#FFFFFF}
.menu4{ font-family:"Arial Narrow" ; font-size:14px ; left:445px ; top:106px ; position:absolute ; z-index:1 ; color:#FFFFFF}
</style>
</head>
<body>

<div class="haut"></div>
<p class="menu1"><a href="?page=1">DJ Rodger's /</a></p>
<p class="menu2"><a href="?page=2">Le matériel /</a></p>
<p class="menu3"><a href="?page=3">Votre soirée /</a></p>
<p class="menu4"><a href="?page=4"> Contact  </a></p>
<div class="menus"></div>
<div class="smenus">
			<?
			if ($page=='1') {include('menu1.php');}
			elseif ($page=='2') {include('menu2.php');}
			elseif ($page=='3') {include('menu3.php');}
			elseif ($page=='4') {include('menu4.php');}
			else {include('menu0.html');}
			?>
</div>
<div class="ecranprinc">
			<?
			if ($page=='histoire') {include('histoire.html');}
			elseif ($page=='presse') {include('menu2.html');}
			elseif ($page=='mercis') {include('menu3.html');}
			elseif ($page=='reseau') {include('menu4.html');}
			else {include('menu0.html');}
			?>
</div>
<div class="bas"></div>

</body>
</html>


Celui de menu1.php :


<html>
<head>
<style type="text/css">
a:link {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
a:visited {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
a:hover {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
.smenu { font-family:"Arial Narrow" ; color:#FFFFFF ; font-size:14 ; top:15px ; position:absolute}
</style>
</head>
<body>
<div class="smenu" style="left:15px"><a href="?page=histoire"> Historique</a></div>
<div class="smenu" style="left:100px"> Références</div>
<div class="smenu" style="left:185px"> La presse en parle</div>
<div class="smenu" style="left:300px"> Satisfaits</div>
<div class="smenu" style="left:370px"> Réseau</div>
</body>
</html>


Et celui de histoire.html : 


<html>
<head>
<style type="text/css">
a:link {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
a:visited {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
a:hover {font-family:verdana, sans-serif; font-size:80%; color:white; background-color:transparent; text-decoration:none; }
.milieu { font-family:"Arial Narrow" ; color: #003333 ; font-size:14 ; top:15px ; position:absolute}

</style>
</head>
<body>
<div class="milieu" style="left:300px">Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br>Test historique<br></div>
</body>
</html>

Modifié par Aerith (24 May 2006 - 16:18)
Bonjour,
J'ai visité ton site avec Firefox et je ne vois que l'entête et le pied de page.
Il ne faut pas se fier à Internet Explorer lors de la conception de la page.
Oui je sais, mais il y a un autre topic ou on parle de ceete incompatibilité car je ne suis pas la seule dans ce cas la Smiley decu
Salut

Il y a plusieurs balises <html> dans ta page générée (3 pour être précis) or il ne peut y en avoir qu'un... (et il n'y a pas de doctype)

Le <html> doit être dans le fichier appelant seulement. Tes fichiers inclus ne doivent pas le contenir : CE NE SONT PAS DES PAGES HTML !!!

Visiblement, il y a un point important que tu n'as pas compris dans le tuto à ce niveau. L'ensemble des fichiers (l'appelant et les inclus) formera un seul fichier HTML... Et non x fichiers HTML distincts comme dans une page avec des frames.

A la limite, tes fichiers inclus ne devraient contenir que du texte à afficher et rien d'autres...

Par exemple, ton menu1 ne devrait contenir que 


<div class="smenu" style="left:15px"><a href="?page=histoire"> Historique</a></div>

<div class="smenu" style="left:100px"> Références</div>

<div class="smenu" style="left:185px"> La presse en parle</div>

<div class="smenu" style="left:300px"> Satisfaits</div>

<div class="smenu" style="left:370px"> Réseau</div>


Le reste est redondant, pire, provoque sûrement l'affichage erroné sous FF, IE est extrèmement trop permissif à ce niveau...
Oki ^^ En effet j'avais pas compris ça Smiley confused
t'as tout à fait bien visé quand tu compare mon "comprtement" pareil au traitement es frames... N'ayant fait que du html jusqu'à maintenant ^^ Histoire d'habitude Smiley confused Smiley confused
J'essaye tout ça alors Smiley smile
coucou Smiley smile

Ca y est j'ai tout changé, cela marche toujours comme avant mais il me rete toujours mes trois problèmes :
-incompatibilité FF
-le fond qui n'est pas fixé
-les sous menus qui s'effacent une fois que l'on a cliqué dessus

Voyez vous (tout) ce que j'ai pu omettre?

Merci d'avance Smiley confused
j'ai toujours ça dans le code


<div class="menus"></div>
<div class="smenus">
			[b]<html>

</html>[/b]</div>
<div class="ecranprinc">
			[b]<html>

</html>[/b]</div>


Tu as livré tes modifications ?
Sujet clos
Aller à