5568 sujets

Sémantique web et HTML

[Résolu]Menu qui se déroule par dessus une frame ?

Bonjour, je suis stagiaire et j'ai un problème avec un menu car il ne peut pas se dérouler entièrement à cause de frame plus bas.
Si j'augmente la taille de la frame tout le reste du contenu ne peut plus s'afficher.

Code de la page qui appelle les frames.

<frameset rows="10%,90%" border="0" framespacing="0" frameborder="no">
  <frame src="top_Frame.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frame src="principale.html" name="mainFrame" scrolling="No" id="mainFrame" title="mainFrame" />
</frameset>


La page principale.html appelle elle aussi 2 frames...
Voila le code 
<frameset rows="15%,85%" border="0" framespacing="0" frameborder="no">
		<frame src="menu.html" name="menu" noresize scrolling="no">
		<frame src="main_Frame.html" name="mainFrame" noresize>
	</frameset>
	<noframes>

		<body bgcolor="#ffffff">
		</body>

	</noframes>


Je n'ai pas le choix du langage , je dois rester avec des frames...et j'aimerais que mon menu (uniquement en CSS, je l'ai récupéré et modifié pour le site ).
J'espere que vous pourrez m'éclairer, je suis perdu Smiley sweatdrop
Modifié par loocla (14 Jun 2007 - 15:16)
Bonjour,

<remarque à l'utilité discutable>
Frames et menu déroulant... c'est tout de même fâcheux de cumuler les handicaps (c'est à dire : les mauvaises pratiques de conception web) ainsi. Smiley sweatdrop
</remarque>
Smiley bawling je sais , vas le dire a mon maitre de stage xD !
Il veut pas qur je mette de php Smiley ohwell ...
A oui et le menu déroulant c'est parce que je dois respecter la nouvelle charte graphique(tite précision ) !
Donc c'est impossible que ca marche comme ca ??



help me plz Smiley sweatdrop
Modifié par loocla (13 Jun 2007 - 15:05)
loocla a écrit :
Smiley bawling je sais , vas le dire a mon maitre de stage xD !

Ben je vais pas faire ton boulot de conseil technique (et donc théoriquement décisionnel... si si...), hein. Smiley cligne

Mais déjà tu peux lui dire ceci :
http://css.alsacreations.com/Accessibilite-du-Web/accessibilite-des-menus-de-navigation-en-cascade

Et pour les frames, pointer les problèmes de référencement, par exemple.

Et s'il s'avère qu'il est impossible d'afficher un menu déroulant en dehors de sa frame (ce qui me semble être le cas), tu pourras aussi lui parler des contraintes techniques du média qui font que frame+menu déroulant = game over. Smiley biggol
Déja merci de me répondre Smiley ravi !

Euh j'avais déja lu la page que tu m'as donnée en lien Smiley smile !
Mais la il s'agit d'un site interne a l'entreprise donc je suis limité a utilisé des frames et respecter la charte graphique ( avec des purées de menus déroulant...).

J'ai déja parlé a mon maitre de stage de l'incompatibilté des frames avec les menus déroulants mais comment dire j'ai l'impression de parler dans le vide Oo...(et ya meme pas décho lol , enfin la je rie jaune parce que je suis dessus depuis un certain temps quand même...).
Mon maitre de stage est tres rétissant sur le PHP (qui me simplifierait la tâche Oo ) et donc si il est impossible de passer au dessus , n'y a t'il pas un autre moyen pour moi de pouvoir finir mon travail ?

Smiley sweatdrop

a écrit :

Et pour les frames, pointer les problèmes de référencement, par exemple.

Euh je vois pas de quoi tu parles Smiley biggol dsl
Merci encore Florent V Smiley lol Smiley lol
Modifié par loocla (13 Jun 2007 - 15:55)
loocla a écrit :
Et pour les frames, pointer les problèmes de référencement, par exemple.

Euh je vois pas de quoi tu parles Smiley biggol
Ben en fait pour un site interne la problématique du référencement n'existe pas.
loocla a écrit :
dsl

DSL ? Comme dans ADSL, ou rien à voir ?
Smiley eek

a écrit :
DSL ? Comme dans ADSL, ou rien à voir ?


Non rien a voir ^^ c'est dsl comme " désolé je vois de quoi vous voulez dire monsieur".

Voilou , donc je peux me mettre une balle pour espérer un jour pourvoi dérouler proprement mon menu ?? Smiley biggol

Vivement le week end Smiley langue
Et sinon autre problème que j'ai ( Smiley bawling et oui j'en ai plusieurs xD )...

J'aimerais coller mon menu a ma banniere!
Pour le moment ya un espace on dirait pourtant j'ai rien mis !
J'ai essayé de regardé si quelqu'un avait le mem probleme mais ca n'a pas résolu le mien Smiley confus ...

Code de la frame du haut (banniere) :

<!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>Untitled Document</title>


<link href="css/alstom.css" rel="stylesheet" type="text/css" />
<title>Intraweb</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>

<div id="hautpage" align="right">
<tr >
  <td ><form onsubmit="return _goSearch();" name="simpleSearchForm" method="get" action="http://iww.search.alstom.com/search/en"><input type="hidden" name="action" value="search"/><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a class="navHaut" href="/countries/north_europe/fr/meudon/index.EN.php?languageId=EN">English</a></td><td><img src="Docs/nav_haut_sep.gif" />&nbsp;</td>
<td><a class="navHaut" href="http://intraweb/fr/site_map.html">Site Map</a></td><td><img height="26" width="27" src="Docs/nav_haut_sep.gif"></td><td><a class="navHaut" href="/_looks/alstom_iww_transp/frontofficeScripts/index.php?languageId=LO&docId=&dir=/countries/tools/contacts/">Contact Us</a></td><td><img height="26" width="27" src="Docs/nav_haut_sep.gif"></td><td valign="middle"><input name="q" class="SearchBox" value="Search" onFocus="this.value=''" size="12" maxlength="50" type="text"></td><td align="center" width="30" valign="middle"><input height="15" width="16" src="Docs/recherche.gif" name="imageField" border="0" type="image"></td><td valign="middle"><a onClick="javascript:popup_windowAdvancedSearch(this.href); return false;" href="http://iww.search.alstom.com/search/en"><img border="0" height="15" width="16" src="Docs/recherche_avance.gif" alt="Advanced search"></a></td>
</tr>

<TABLE height="10%" width="100%" border=0 align="right" cellPadding=0 cellSpacing=0 bgcolor="#FFFFCC">
<TBODY>
<div>
<TR>
<TD width=47>
	<A href="http://iww.alstom.com" target="_blank">
	<IMG height=62 alt="Back to ALTAIR PORTAL" src="file:///C|/Documents and Settings/webdev/Mes documents/Page_en_construction/Docs/altair.gif" width=42 border=0></A></TD>

	<TD width="292"><img src="file:///C|/Documents and Settings/webdev/Mes documents/Page_en_construction/Docs/logo.jpg" width="292" height="62"></TD>  

	<TD width="783" align=center valign="middle" noWrap>
	<a href="http://iww.alstom.com/servlet/ContentServer?pagename=Altair/AGF_NavPage/tools_Directory&c=AGF_NavPage&cid=1013762697683&rid=1013762697680&lid=en&currcid=1013676698501&assettype=AGF_NavPage&currrid=1013676698495" target="_blank"
	">	</a></TD>

	<TD width=95>
						<div align="center"><a href="http://www.alstom.com" target="_blank"><img  src="file:///C|/Documents and Settings/webdev/Mes documents/Page_en_construction/Docs/logo_droite.gif" alt="alstom.com" width=91 height=31 border="0" align="right" /></a>	  </TD>
                        

	
</TR>
</TBODY>
</div>
</TABLE>
<span class="regle"></span>
<tr>
<td>


</html>



Code du menu (html):

<!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>menu</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>

<body id="menu" >
<table id="hautpage" border="0" class="LinkMenuSelect" >
  <tr >
    <td height="50%"   width="100%" align="right">
    
    <div id="menu"  class="menuIE"  >
    
<a class="boutonIE navbar" target="mainFrame" href="principale.html">Home</a>
<a class="boutonIE navbar" href="#nogo">Toolgate
<table><tr><td>
<a position="absolute" class="SousMenu sup_menu" href="#nogo">Information portal</a>
<a position="absolute" class="SousMenu sup_menu" href="#nogo">Applications</a>
<a position="absolute" class="SousMenu sup_menu" href="#nogo">Autres Applications</a>
</td>
</tr></table>
</a>
</table>
</a></div>


<div id="menu">

<div class="boutonFF"><a target="_self" href="index.html" >Home</a><br />
</div>
<div class="boutonFF">Toolgate<br />
<a  class="SousMenu" href="#nogo">Information portal</a>
<a  class="SousMenu" href="#nogo">Applications</a>
<a  class="SousMenu" href="#nogo">Autres Applications</a></div>

  </tr>
</table>

</body>

</html>


Code CSS du menu :
.menuIE {
    display:none !important;
    display:block;
	
	
}
a{ text-decoration: none;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
    color:#ffffff;
    width:124px;
    height:18px;
    display:block;
    background: url(../Docs/nav_bar_bg2.gif);
    border:0px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    line-height:18px;
    overflow: hidden;
	
}

a.boutonIE:hover {
    background:#7f9ee1;
    overflow: visible;}

a.boutonIE:hover table {
    display:block;
    background: none;
    border-collapse:collapse;
}

.boutonFF {
	color:#ffffff;
	width:125.5px;
	height:18px;
	display:block !important;
	display:none;
	background:  url(../Docs/nav_bar_bg2.gif);
	border:0px solid #000;
	margin-right:1px;
	text-align:center;
	float:left;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:18px;
	overflow:hidden;
	
 }

.boutonFF:hover {
	height:auto;
	cursor:pointer;
	color:#FFFFFF;
	background:#7f9ee1;
 }

a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
    display: block;
    width:125.5px !important;
    width:125.5px;
    height:18px;
    border-bottom:0px solid #000;
    text-decoration:none;
    color:#ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    text-align:center;
    background:#5a7dc8;
}


a.SousMenu:hover {
    background:#7f9ee1;   
}
body{line-height:1px;}

#piedpage {
	position: absolute;
	bottom: 0%;
	left: 0;
	width: 100%;
}
#page
{
position: absolute;
top: 20%; left:0;
width: 100%;
}

#hautpage
{
position: relative;
top: 0; 
left: 0;
width: 100%;
}
#menu /*position pour le menu*/
{
position:absolute;
top: 0;
left: 0;
width: 100%;
min-height: 200;
}

.navbar
{
background-image:url(../Docs/nav_bar_bg2.gif);
}
a
{
    font-family: Arial, Helvetica, sans-serif;
    /*font-size: 12px;*/ color: #ffffff;
    text-decoration: none;
	font-weight:bold;
	font-size: 10px;
}
a:hover
{
    text-decoration: none;
    background-color: #E3E3E3;
}



Voila la bete ,j'espere c'est pas trop gros Smiley eek j'ai enlevé du code mais bon...

Je sais pas si quelq'un prendra le temps de m'aider Smiley confused

Sinon merci quand meme Smiley smile
Modifié par loocla (13 Jun 2007 - 16:46)
loocla a écrit :
Voila la bete ,j'espere c'est pas trop gros Smiley eek j'ai enlevé du code mais bon...

Plus que d'être gros, c'est surtout difficile à visualiser. Pour ma part, je ne suis pas comme le mec de Matrix qui voit du code défiler et qui comprend ce que ça veut dire instinctivement. Smiley lol

Une chtite page en ligne ? (Page de test anonymisée si besoin...)
Euh je peux pas mettre de pages en ligne désolé par contre je peux te mettre une image si ca te va ?
Smiley smile

upload/12780-Sanstitre.JPG
Modifié par loocla (14 Jun 2007 - 10:51)
C'est bon j'ai trouvé comment contourné mon probleme ^^ !

J'ai supprimé les margin et padding et depuis ca , j'ai la place pour dérouler mon menu Smiley smile !

Merci a tous Smiley cligne
Sujet clos
Aller à