dropdown menu in css door frames

cageman · 21 nov 2006

mijn css dropdown menu kan niet door het frame heen en er wordt dus automatisch een scrollbar aangemaakt, maar ik wil er voor zorgen dat hij dat frame negeerd. Ik zie vaak sites waar in iedergeval zoiets als ik wil wordt toegepast. Alleen ik weet niet of dit met frames gebeurd, maar dat zou wel handig zijn. scheelt een heleboel copy paste werk.
de verticale indeling van mijn pagina is als volgt:

frame 1:
header
dropdown menu

frame 2:

dit is het iframe waar alle links van het dropdown menu in worden geladen.
hier komt dus allerlei informatie. Misschien doe ik er ook nog aan beide zijden van het iframe frames naast voor extra informatie of reclame.

ik wil dus het het dropdown menu het 2de frame negeerd.

ik heb 3 bestandjes

index.html, deze regeld de frames:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
</HEAD>
<frameset rows="30%,70%">
<frame src="header.html" scolling=no NORESIZE>
<frame src="main.html" scrolling=no NORESIZE>
</frameset>

</HTML>

header.html dit is dus de code voor de header + het dropdown menu

HTML:

<head>
<style type="text/css">
body {color:#fff;}
#wrapper {color:#000;}
.red {color:#c00;}

#info h1 {font-size:3em; text-align:center; font-family: georgia, "times new roman", serif;}


#positioner {clear:both; position: top; :95px; left:1px; z-index:100;}

#ads {position:relative; z-index:10;}
.menu {display:none;}
#noniemenu {position:absolute;}

#noniemenu .holder ul {padding:0; margin:0;}
#noniemenu .holder ul li {list-style-type: none;}
#noniemenu .holder li {}
#noniemenu .holder li ul {display: none;} 
#noniemenu .holder li:hover > ul#a3 {display:block; position:absolute; left:105px; margin-top:-20px; border:1px solid #000;}
#noniemenu .holder .bold {font-weight:bold;}

#noniemenu .holder {
  color:#fff; 
  width:104px; 
  height:18px; 
  display:block; 
  overflow:hidden;
  float:left;
  border:1px solid #000;
  margin-right:1px;
  font-size:10px;
  }
#noniemenu .holder:hover {
  height:auto; 
  }
#noniemenu a.outer, #noniemenu a.outer:visited {
   color:#fff; 
   width:104px; 
   line-height:18px;
   display:block; 
   background:#e09222; 
   text-align:center; 
   text-decoration:none; 
   font-family: verdana, arial, sans-serif;
   }
#noniemenu a.outer:hover {
  background:#697210; 
  overflow:visible;
  }
#noniemenu div.open {display:none;}
#noniemenu a.inner, #noniemenu a.inner:visited {
  display:block; 
  width:104px; 
  height:18px;
  line-height:18px;
  border-bottom:1px solid #000; 
  text-decoration:none; 
  color:#000; 
  background:#eee;
  text-align:center;
  }
#noniemenu a.second {font-weight:bold;}
#noniemenu a.inner:hover {
  background:#add;
  }
</style>

<!--[if lte IE 6]>
<style type="text/css">
#wrapper {margin-top:-14px;}

#noniemenu {display:none;}
.menu {display:block; position:absolute;}
.menu a.outer, .menu a.outer:visited {
   color:#fff; 
   width:104px; 
   height:18px; 
   display:block; 
   background:#e09222; 
   border:1px solid #000; 
   margin-right:1px; 
   text-align:center; 
   float:left; 
   text-decoration:none; 
   font-family: verdana, arial, sans-serif; 
   font-size:10px; 
   line-height:18px; 
   overflow:hidden;

   }
.menu a.outer:hover {
  background:#697210; 
  overflow:visible;
  }
.menu a.outer:hover table.first {
  display:block; 
  background:#eee; 
  border-collapse:collapse;
  }
.menu a.inner, .menu a.inner:visited {
  display:block; 
  width:102px; 
  height:18px; 
  border-bottom:1px solid #000; 
  text-decoration:none; 
  color:#000;
  font-family: verdana, arial, sans-serif; 
  font-size:10px; 
  text-align:center;
  }
.menu a.inner:hover {
  background:#add;
  }

.menu a.outer table.first a.second {
  height:18px; 
  line-height:18px; 
  overflow:hidden; 
  font-weight:bold;
  }
.menu a.outer table.first a.second:hover {
  position:relative; 
  overflow:visible;
  }
.menu a.outer table.first a.second:hover table {
  position:absolute; 
  top:-2px; 
  left:102px; 
  border-collapse:collapse; 
  background:#eee; 
  border:1px solid #000; 
  font-weight:normal
}
</style>
<![endif]-->


<!--[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<![endif]-->


</head>

<body>
<center>
<img src="images/header.png">
</center>


<div id="wrapper">

<div id="head">


<div id="positioner">

<div class="menu">
<a class="outer" href="../menu/index.html">DEMOS
<table class="first"><tr><td>
<a class="inner" href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a>
<a class="inner" href="../menu/embed.html" title="Wrapping text around images">wrapping text</a>
<a class="inner" href="../menu/form.html" title="Styling forms">styled form</a>
<a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a>
<a class="inner second" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<a class="inner" href="../menu/form.html" title="Styling forms">styled form</a>
<a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a>
<a class="inner" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a>
</td></tr></table>
</a>
<a class="inner" href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a>
<a class="inner" href="../menu/old_master.html" title="Image Map for detailed information">image map</a>
<a class="inner" href="../menu/bodies.html" title="fun with background images">fun backgrounds</a>
<a class="inner" href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a>
<a class="inner" href="../menu/em_images.html" title="em size images compared">em sized images</a>
</td></tr></table>
</a>

<a class="outer" href="index.html">MENUS
<table class="first"><tr><td>
<a class="inner" href="spies.html" title="a coded list of spies">spies menu</a>
<a class="inner" href="vertical.html" title="a horizontal vertical menu">vertical menu</a>
<a class="inner" href="expand.html" title="an enlarging unordered list">enlarging list</a>
<a class="inner" href="enlarge.html" title="an unordered list with link images">link images</a>
<a class="inner" href="cross.html" title="non-rectangular links">non-rectangular</a>
<a class="inner" href="jigsaw.html" title="jigsaw links">jigsaw links</a>
<a class="inner" href="circles.html" title="circular links">circular links</a>
</td></tr></table>
</a>

<a class="outer" href="../layouts/index.html">LAYOUTS
<table class="first"><tr><td>
<a class="inner" href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a>
<a class="inner" href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a>
<a class="inner" href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a>
<a class="inner" href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a>
<a class="inner" href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a>
</td></tr></table>
</a>

<a class="outer" href="../boxes/index.html">BOXES
<table class="first"><tr><td>
<a class="inner" href="../boxes/scrollbars.html" title="Left scroll bars">left scroll</a>
<a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a>
<a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy borders</a>
<a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a>
<a class="inner" href="../boxes/outside.html" title="Percentage PLUS pixels">% PLUS pixels</a>
<a class="inner" href="../boxes/minwidth.html" title="min-width for IE">IE min-width</a>
<a class="inner" href="../boxes/minheight.html" title="min-height for IE">IE min-height</a>
</td></tr></table>
</a>

<a class="outer" href="../mozilla/index.html">MOZILLA
<table class="first"><tr><td>
<a class="inner" href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a>
<a class="inner" href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a>
<a class="inner" href="../mozilla/content.html" title="Using content:">content:</a>
<a class="inner" href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a>
<a class="inner" href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a>
<a class="inner" href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a>
<a class="inner" href="../mozilla/target.html" title="Target Practise">target practise</a>
<a class="inner" href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a>
<a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a>
</td></tr></table>
</a>

<a class="outer" href="../ie/index.html">EXPLORER
<table class="first"><tr><td>
<a class="inner" href="../ie/exampleone.html" title="Example one">example one</a>
<a class="inner" href="../ie/weft.html" title="Weft fonts">weft fonts</a>
<a class="inner" href="../ie/exampletwo.html" title="Vertical align">vertical align</a>
</td></tr></table>
</a>

<a class="outer" href="../opacity/index.html">OPACITY
<table class="first"><tr><td>
<a class="inner" href="../opacity/colours.html" title="colour wheel">opaque colours</a>
<a class="inner" href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a>
<a class="inner" href="../opacity/png.html" title="partial opacity">partial opacity</a>
<a class="inner" href="../opacity/png2.html" title="partial opacity II">partial opacity II</a>
</td></tr></table>
</a>

</div>





<div id="noniemenu">
<div class="holder">
<ul>
<li><a class="outer" href="../menu/index.html">DEMOS</a></li>
<li><a class="inner" href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="inner" href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="inner second" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<ul id="a3">
<li><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="inner" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
</li>
<li><a class="inner" href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a class="inner" href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a class="inner" href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a class="inner" href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a class="inner" href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
</div>


<div class="holder">
<ul>
<li><a class="outer" href="index.html">MENUS</a></li>
<li><a class="inner" href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a class="inner" href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a class="inner" href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a class="inner" href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a class="inner" href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a class="inner" href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a class="inner" href="circles.html" title="circular links">circular links</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../layouts/index.html">LAYOUTS</a></li>
<li><a class="inner" href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a class="inner" href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a class="inner" href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a class="inner" href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a class="inner" href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../boxes/index.html">BOXES</a></li>
<li><a class="inner" href="../boxes/scrollbars.html" title="Left scroll bars">left scroll</a></li>
<li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a></li>
<li><a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy borders</a></li>
<li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a></li>
<li><a class="inner" href="../boxes/outside.html" title="Percentage PLUS pixels">% PLUS pixels</a></li>
<li><a class="inner" href="../boxes/minwidth.html" title="min-width for IE">IE min-width</a></li>
<li><a class="inner" href="../boxes/minheight.html" title="min-height for IE">IE min-height</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="#">Dupes</a></li>
<li><a class="inner" href="armors.html" title="A drop down menu">drop down menu</a></li>
<li><a class="inner" href="rings.html" title="A cascading menu">cascading menu</a></li>
<li><a class="inner" href="boots.html" title="Using content:">content:</a></li>
<li><a class="inner" href="helms.html" title=":hover applied to a div">mozzie box</a></li>
<li><a class="inner" href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a class="inner" href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a class="inner" href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a class="inner" href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../ie/index.html">EXPLORER</a></li>
<li><a class="inner" href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a class="inner" href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a class="inner" href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../opacity/index.html">OPACITY</a></li>
<li><a class="inner" href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a class="inner" href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a class="inner" href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a class="inner" href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>
</div>
</div>

</div>
</div>
<table width="930" height="500" align="center" valign="center">
<tr>
<td colspan="2" align="center" valign="top">
<font size="5">

</font>
</td>


</tr>

</table>

<!-- --><script type="text/javascript" src="/i.js"></script></BODY>

en als allerlaatst natuurlijk nog het mainframe, genaamd main.html.

in dit bestandje heb ik nog geen informatie gezet, maar dat gaat natuurlijk pas komen als ik het dropdown menu werkende heb gekregen.

van het dropdown menu zelf snap ik eigenlijk niet hoe het werkt, maar natuurlijk kan ik wel proberen het menu zelf door het frame te laten breken.
ik ben al een hele tijd aan het zoeken naar een oplossing.

bartwebdesign · 21 nov 2006

Dan moet je achter de frames (voor de >) de name="framenaam" neerzetten.

Dan in de link <a href="test.html" target="framenaam">

cageman · 21 nov 2006

maar dat is niet precies het probleem. Het probleem is dat mijn dropdownmenu stopt bij het frame en er niet overheen kan gaan. Wat wanneer je bijvoorbeeld tabellen gebruikt wel gebeurd.

Johantrax · 21 nov 2006

ik denk niet dat dat mogelijk is met frames, sinds XHTML wordt aangeraden om met div's te werken, alhoewel dat wel wat puzzelwerk kan geven...

cageman · 21 nov 2006

oke ik heb een andere oplossing bedacht alleen ook hier weet ik weer niet hoe het werkt.

hoe kan ik naar een extern html document verwijzen? je zou toch verwachten dat het mogelijk zou zijn, maar ik kan het nergens vinden..

omdat ik vaak deze header ga veranderen zou het erg handig zijn als dit mogelijk is. Anders moet ik het pagina voor pagina gaan bijwerken.

Johantrax · 21 nov 2006

dat kan via include() in php, maar niet in html

als je wil kan je wel de inhoud van elementen via javascript aanpassen met deze structuur

Code:

var nieuwe_inhoud = "bla";
document.getElementById('<een id>').innerHTML = nieuwe_inhoud;

--Johan

dropdown menu in css door frames

cageman

Gebruiker

bartwebdesign

Gebruiker

cageman

Gebruiker

Johantrax

Terugkerende gebruiker

cageman

Gebruiker

Johantrax

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy