menu in frames

Status
Niet open voor verdere reacties.
B

Bertal

Gebruiker
Lid geworden
24 okt 2005
Berichten
183
Beste mensen,

Ik gebruik in mijn website nog steeds frames(ik weet dat het ouderwets is). Nou heb ik een uitklap menu, maar als hij zich uitvouwt valt hij niet over het frame heen, waardoor in mijn menu frame groter moet maken, wat lelijk is. Heeft iemand een oplossing?

Ik zit er aan te denken om me hele site om te gooien naar divs. Echter, heb ik hier een aant vragen over:
-kan ik in een div de menu pagina bijvoorbeeld oproepen, waardoor ik niet steeds het menu over moet typen?
-hoe kun je zorgen dat de link die je in de menu div klikt, in de inhoud div weergegeven word,
-en kan een menu de ene div wel overlappen?

Ik hoop dat het duidelijk is.

Bertal
 
voor je eerste vraag heb ik even een voorbeeld nodig (link / code)
Ik zit er aan te denken om me hele site om te gooien naar divs. Echter, heb ik hier een aant vragen over:
-kan ik in een div de menu pagina bijvoorbeeld oproepen, waardoor ik niet steeds het menu over moet typen?
Klik om te vergroten...
je kan hier voor bijvoorbeeld php gebruiken, je server (website) moet dan wel php ondersteuning hebben.
-hoe kun je zorgen dat de link die je in de menu div klikt, in de inhoud div weergegeven word,
Klik om te vergroten...
ook hier voor kun je php gebruiken, of je maakt verschillende gewoon verschillende pagina's waar tussen je link
-en kan een menu de ene div wel overlappen?
Klik om te vergroten...
Ja!

als je wat meer uitleg wilt over hoe je deze dingen met php kunt doen vraag je het maar.

Ecross
 
Laatst bewerkt:
Wat jij eens moet lezen, is de tutorial van CSSHunter. Deze legt precies uit hoe je nou zo'n php site maakt. Zie hier.



Over je eerste vraag: nee, dat kan niet. Het is een frame dus alles wat erin zit, zit erin, en kan er niet uit. Nog een reden om geen frames te gerbuiken!
 
Laatst bewerkt:
Over je eerste vraag: nee, dat kan niet. Het is een frame dus alles wat erin zit, zit erin, en kan er niet uit. Nog een reden om geen frames te gerbuiken!
Klik om te vergroten...
als het menu niet in een frame zit maar de pagina waar hij overheen moet vallen wel, kan het volgens mij wel.
als het menu ook in een frame zit kan het inderdaad niet (zoals bij een frameset)

ik ben het wel met vegras eens dat het geen goed idee is om frames te gebruiken, zie google
 
Laatst bewerkt:
Klopt, frames is aardig achterhaald.
Ik heb hem zelf ook niet in elkaar gezet, maar iemand anders omdat ik het ontwerpen van een site lastig vind. Maar hij komt dus met allemaal frames aanzetten, wat ik dus aardig jammer vind.

In ieder geval bedankt voor jullie energie en tijd, en ik zal die tutorail ff lezen, als ik vragen heb horen jullie het wel;)

Bertal
 
Beste mensen,

Hebben jullie een idee waarom mijn tabel bovenaan helemaal uitelkaar getrokken word?

Code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="nl">
<title>(pagina titel in browser-balk)</title>
<meta name="description" lang="nl" content="(korte pagina-beschrijving)">
<meta name="keywords" lang="nl" content="(trefwoorden, tussen, komma's)">
<!-- basis layout met "Online Page Creator for Dummies (c)" -->
<!-- http://developerscorner.nl/pagecreator/ -->
<!-- overgenomen op basis van Creative Common licentie -->

<style type="text/css">
html {
   height: 101%;
   background: #C0C0C0;
   color: black;
}
/* Attentie: Om de achtergrondkleuren van de menukolom en de inhoud */
/* ========= over de volle hoogte te krijgen (onafhankelijk van wie */
/* ========= van de twee het hoogste is) is gebruik gemaakt van de  */
/* ========= zogenaamde "faux column" (nep-kolom) techniek. Hierbij */
/* ========= wordt de achtergrondkleur van de menukolom niet aan de */
/* ========= menukolom zelf gekoppeld, maar aan de linkerkant als   */
/* ========= achtergrond-figuur ingevoegd in het element.           */
/* ========= De kleur van het inhoud-blok zit ook in de body-style! */
/* Gevolg 1: Voor verandering van de menu-achtergrondkleur moet het */
/* ========= achtergrondplaatje in de body een nieuwe kleur krijgen.*/
/* Gevolg 2: Voor verandering van de inhoud-achtergrondkleur kan de */
/* ========= achtergrondkleur in de body-style aangepast worden.    */
/* Gevolg 3: Een eventueel scheidingslijntje tussen menu en inhoud  */
/* ========= moet ook (aan de rechterkant) in de achtergrondfiguur  */
/* ========= ingetekend worden! Dit gaat dan over de hele hoogte.   */
/* Gevolg 4: Wat ruimte maken tussen de onderkant van de kop en het */
/* ========= begin van dit scheidingslijntje kan: door vlak voor de */
/* ========= menukolom een "overbloesende" lege <div id="menutop">  */
/* ========= plaatsen met in de css voor de #menutop: een bepaalde  */
/* ========= hoogte; als breedte: de breedte van de menukolom; plus */
/* ========= de achtergrondkleur van de menukolom. Zo ontsnapt dit  */
/* ========= strookje aan het lijntje. */

body {
   width: 950px;
   margin: 0 auto;
   padding: 0;
   background: url(images/menu-achtergrondkleur500x100.gif) repeat-y;
   /* achtergrondplaatje van 500px breed: */
   /* staat dan: 500px - 205px breedte menukolom = 295px te ver naar rechts */
   background-position: -295px 0; /* horizontaal verschoven, verticaal niet */
   background-color: #FFFFF;     /* achtergrondkleur van #inhoud */
   color: black;
}

h1, h2, h3, h4, p {
   margin: 0;
   padding: 0;
}
.clearBoth {
   clear: both;
}

/* Attentie: de "kantlijn-afstanden" in de drie blokken zijn     */
/* ========= regelbaar met de padding van de #binnenkant-div's ! */

#kop {
   height: 173px;
   background: #fffff	;
   color: black;
}
#binnenkantKop {
   padding: 10px;  /* aanpasbaar! */
}
#menukolom {
   float: left;
   width: 205px;
}
#binnenkantMenukolom {
   padding: 0 10px;  /* aanpasbaar! */
}
#inhoud {
   height: 500px; /* tijdelijk! */
   margin-left: 205px;  /* gelijk aan breedte #menukolom */
}
#binnenkantInhoud {
   padding: 0 10px;  /* aanpasbaar! */
}
 <style type="text/css">
TABLE { border-collapse: collapse; border-spacing: 0px;
border: 0px }
TD { border: 0px ; text-align: center; }
  </style>
	  <link href="opmaak.css" rel="stylesheet" type="text/css" media="screen">
<!--[if IE]>
<link href="opmaak.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE]>
		<style type="text/css">
			body {
				behavior: url(hover.htc);
			}
			
			div#menu {
				top: 117px;	
			}
		</style>
		<![endif]-->
</style>
</head>
<body>

<div id="kop">
   <div id="binnenkantKop">
      <table style="background-color: rgb(0, 153, 204); width: 100%; height: 173px;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr bgcolor="#0099cc">
      <td style="vertical-align: top; text-align: center; height: 70px; background-color: rgb(255, 255, 255); width: 290px;"><img title="Rehob&ocirc;thkerk" style="width: 292px; height: 71px;" alt="" src="Afbeeldingen/DSC_0026boven.jpg"><br>
      </td>
      <td style="text-align: center; height: 70px; width: 70%; background-color: rgb(0, 153, 204);"></td>
      <td style="text-align: center; background-color: rgb(255, 255, 255); height: 70px; width: 290px;"><img title="Immanu&euml;lkerk" style="width: 292px; height: 71px;" alt="" src="Afbeeldingen/DSC_0022boven.jpg"><br>
      </td>
    </tr>
    <tr bgcolor="#ffffff">
      <td style="vertical-align: top; text-align: center; height: 110px; width: 290px;"><img title="Rehob&ocirc;thkerk" style="width: 292px; height: 110px;" alt="" src="Afbeeldingen/DSC_0026onder.jpg"><br>
      </td>
      <td style="vertical-align: top; text-align: center; height: 110px; width: 438px;"><font color="#dc0030" face="Tahoma"><br>

Hervormde gemeente Nieuweroord-Noordscheschut</font></td>

      <td style="height: 110px; width: 290px;"><img title="Immanu&euml;lkerk" style="width: 292px; height: 112px;" alt="" src="Afbeeldingen/DSC_0022onder.jpg"><br>
      </td>
    </tr>
  </tbody>
</table>
   </div>
</div>

<div id="menu" src="menu.htm">
   <div id="menubinnenkant" src="menu.htm">
    <p>
</p>
<P>
<p></p>
<ul>
  <li class="folder"><a href="home.htm" target="main">Home</a>
 </li>
  <li class="folder"><a href="informatie.htm" target="main">Algemene informatie</a>
    <ul>
      <li><a href="Pagina%27s/ouderlingen.htm" target="main">Ouderlingen</a> </li>
      <li class="folder"><a href="Pagina%27s/kerkrentmeesters.htm" target="main">Kerkrentmeesters</a>
      </li>
      <li><a href="Pagina%27s/diakenen.htm" target="main">Diakenen</a>
      </li>
      <li class="folder"><a href="Pagina%27s/contactgegevens.htm" target="main">Contactgegevens</a>
     </li>
   </ul>
  </li>
  <li class="folder"><a href="activiteiten.htm" target="main">Activiteiten</a>
    <ul>
      <li class="folder"><a href="Pagina%27s/zondagschool.htm" target="main">Zondagschool</a>
      </li>
      <li><a href="Pagina%27s/vrouwendienst.htm" target="main">Vrouwendienst</a> </li>
      <li><a href="Pagina%27s/jeugdraad.htm" target="main">Jeugdraad</a>
      </li>
      <li><a href="Pagina%27s/jeugdclubs.htm" target="main">Jeugdclub</a>
      </li>
    </ul>
  </li>
  <li><a href="agenda.htm" target="main">Agenda</a>
  </li>
 <li class="folder"><a href="meditatie.htm" target="main">Meditatie</a> </li>
  <li class="folder"><a href="links.htm" target="main">Links</a> </li>
</ul>
   </div>
</div>

<div id="inhoud">
   <div id="binnenkantInhoud">
      <h2>inhoud</h2>
   </div>
</div>

<div class="clearBoth"><!-- ! --></div>

</body>
</html>

css code van het menu:

Code: 
#menu 
{
 margin-top: 100px;
 width: 90px;
 display: inline;
 float: left;
 margin-left: 2px;
}

#menu ul 
{
 border-top-color: #0096C9;
 border-top-width: 1px;
 border-top-style: solid;
 margin: 0pt;
 padding: 0pt;
}

#menu ul li 
{
 border-bottom-color: rgb(0, 153, 204);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 margin: 0pt;
 padding: 0pt;
 display: block;
 list-style-type: none;
 list-style-image: none;
 list-style-position: outside;
 font-family: "lucida grande",arial,sans-serif;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: x-small;
 line-height: 2.3em;
 font-size-adjust: none;
 font-stretch: normal;
}

#menu ul li a 
{
 background-position: 2px 50%;
 background-image: url(images/arrow-01.gif);
 background-color: transparent;
 background-repeat: no-repeat;
 background-attachment: scroll;
 display: block;
 width: 138px;
 padding-left: 12px;
 color: rgb(119, 119, 102);
 -moz-background-clip: initial;
 -moz-background-origin: initial;
 -moz-background-inline-policy: initial;
}

#menu ul li a:hover 
{
 border-bottom-width: 0px;
 border-bottom-style: none;
 background-position: 4px 50%;
 background-image: url(images/arrow-01.gif);
 background-color: rgb(244, 244, 239);
 background-repeat: no-repeat;
 background-attachment: scroll;
 -moz-background-clip: initial;
 -moz-background-origin: initial;
 -moz-background-inline-policy: initial;
 color: rgb(68, 68, 51);
}

#menu ul, #menu li 
{
 margin: 0pt;
 padding: 0pt;
 display: block;
}

#menu ul 
{
 padding: 2px;
 list-style-type: none;
 list-style-image: none;
 list-style-position: outside;
 width: 150px;
 background-color: rgb(255, 255, 255);
}

#menu li 
{
 border-bottom-color: rgb(0, 153, 204);
 border-bottom-width: 1px;
 border-bottom-style: solid;
 padding: 1px;
 position: relative;
 background-color: rgb(255, 255, 255);
 z-index: 9;
}

#menu li.folder 
{
 border-right-color: rgb(0, 153, 204);
}

#menu li:hover 
{
 background-color: rgb(244, 244, 239);
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0%;
 -moz-background-clip: initial;
 -moz-background-origin: initial;
 -moz-background-inline-policy: initial;
 z-index: 15;
}

#menu ul ul 
{
 border-color: rgb(0, 153, 204);
 border-width: 1px;
 border-style: solid;
 position: absolute;
 display: none;
 right: -140px;
 top: 4px;
}

#menu li:hover ul ul 
{
 display: none;
}

#menu li:hover ul, #menu li:hover li:hover ul 
{
 display: block;
}

Het wordt namelijk uit elkaar getrokken als ik het menu erbij in gooi, daarvoor was het nog normaal.

Bertal
 
Heb je een online voorbeeld? Dat kijkt een stuk makkelijker...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan