Drop down menu (duwt de rest van de pagina weg)

Annodompje · 24 jan 2008

Ik heb een drop down menu gemaakt met de hulp van een tutorial.

http://www.neolooks.co.nr/indextest2.php

nu werkt deze helemaal goed, alleen als nu de linken naar beneden vallen duwen ze de rest van de pagina weg, ik zou willen dat deze gewoon over de rest van de pagina vallen..
ik gebruik van php include.
ik ben helemaal nieuw op dit gebied.. dus ik heb geen idee wat ik eraan kan doen
ik weet niet of jullie de code gewoon van de site kunnen halen of dat ik het er nog even bij moet posten??

alvast bedankt.

Bufnukkel · 24 jan 2008

Zou je de link van de tutorial even willen geven?
Dan kan ik voor je kijken

.

Annodompje · 24 jan 2008

http://tutorials.alsacreations.com/deroulant/

dat was hem.. ik heb hem vrijwel letterlijk overgenomen..

Bufnukkel · 24 jan 2008

Ik zou eens beginnen met het overzichtelijk maken van je broncode!

Een voorbeeld van een goede opbouw is:

HTML:

<html>

  <head>
    <title>Voorbeeld Titel</title>
  </head>

  <body>
     Hier komt bijvoorbeeld tekst.
  </body>

</html>

Dus niet net zoals wat jij doet eerst wat css neerzetten en daarna pas de head-tag openen

.

Annodompje · 24 jan 2008

sorry daarvoor.. ik hoop dat het nu wat beter is?? (ik kan het nu niet meer terug vinden maar ik dacht toch echt dat ik net iets las over mijn div code verplaatsen?? dat heeft niets uitgehaald.. )

Bufnukkel · 24 jan 2008

Nee het staat helaas nog steeds niet goed

.
Je hebt maar één head en één body.

HTML:

<html>

	<head>
 		<title>neolooks.co.nr</title>

  			<style type="text/css" media="screen">
			<!-- 
			body {
			margin: 0;
			padding: 0;
			background: white;
			font: 80% verdana, arial, sans-serif;
			}
			dl, dt, dd, ul, li {
			margin: 0;
			padding: 0;
			list-style-type: none;
			}
			#menu {
			position: relative; /* Menu position that can be changed at will */
			top: 0;
			z-index:100;
			color: #093D7E;
			width: 100%; /* precision for Opera */
			}
			#menu dl {
			float: left;
			width: 12em;
			}
			#menu dt {
			cursor: pointer;
			text-align: center;
			font-weight: bold;
			background: #B3A6B8;
			border: 1px solid #093D7E;
			margin: 1px;
			}
			#menu dd {
			display: none;
			border: 1px solid #093D7E;
			}
			#menu li {
			text-align: center;
			background: #B3A6B8;
			}
			#menu li a, #menu dt a {
			color: #093D7E;
			text-decoration: none;
			display: block;
			height: 100%;
			border: 0 none;
			}
			#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
			background: #d4c0dc;
			}

			.scroll {height: 800px; overflow: auto;z-index:1;}
			-->
			</style>
		
	</head>

Dit eerste stuk heb ik voor je netjes gezet (heb niet naar de werking gekeken!), de rest zal je even zelf moeten proberen. Ik moet nu nog even iets voor school doen namelijk.

Nog even voor de duidelijkheid:
Je hebt in een htmlbestand geen <head></head> dan weer een <body></body>, dan weer een <head></head> en dan weer een <body></body>.
Zo weet de browser niet wat hij met je website moet doen .

En nog een laatste belangrijke tip:
Houd het overzichtelijk voor jezelf! Dit kan je het beste doen door met de tabtoets (naast de letter q op je toetsenbord) te werken.

0backslash0 · 24 jan 2008

post de broncode, nadat je hem hebt opgekuist & geordend.

enkele tips:

Zet al je css code bij elkaar en plaats hem in de head, onder de title tag. (plaats het eventueel in een externe stylesheet)
gebruik correcte inspringen van samenhorende delen
gebruik: een doctype declaratie, één html tag paar, één html tag paar, één body tag paar (open & sluit tags)
probeer de code zo overzichtelijk mogelijk te maken

buffnukkel's voorbeeld is al een goed begin.

Annodompje · 24 jan 2008

oke.. ik hoop dat ik het goed heb gedaan..

dit is van de pagina zelf

HTML:

<html>

<head>


<title>Neolooks.co.nr</title>

<style>
.scroll {height: 800px; overflow: auto;z-index:1;}
</style>

</head>

<body bgcolor="#B3A6B8">

<div align="center">

<table border="0" cellpadding="0" style="border-collapse: collapse" width="800" bordercolor="#000000">
<tr>
<td align="center" valign="top"><?php include("header.php"); ?></td>
</tr>
</table>

</div>
<div align="center">

<table border="0" cellpadding="0" style="border-style:solid; border-width:1px; border-collapse: collapse; " width="960" bordercolor="#000000">
<tr>
<td align="center" width="810" valign="top">  

<div class="scroll">   
<?PHP
$category = "3";
$template = "default";
$number = "3";
include("cutenews/show_news.php");
?> 
</div>
</td>

<td width="150" align="center" valign="top" style="border-style: solid; border-width: 1px">  
<div class="scroll">
<?PHP
$category = "1,2,4,5,6,7,8,9,10,11,12,13";
$template = "Headlines";
$number = "8";
include("cutenews/show_news.php");
?> 
</div>

</td>
</tr>
</table>


</div>


</body>

</html>

Dit is van de header waar het menu in staat..

HTML:

<html>

<head>

<title>Neolooks.co.nr</title>

<script type="text/javascript">
	<!--
	window.onload=show;
	function show(id) {
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
	if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
	if (d) {d.style.display='block';}
	}
		//-->
</script>

<style type="text/css" media="screen">
			<!-- 
			body {
			margin: 0;
			padding: 0;
			background: white;
			font: 80% verdana, arial, sans-serif;
			}
			dl, dt, dd, ul, li {
			margin: 0;
			padding: 0;
			list-style-type: none;
			}
			#menu {
			position: relative; /* Menu position that can be changed at will */
			top: 0;
			z-index:100;
			color: #093D7E;
			width: 100%; /* precision for Opera */
			}
			#menu dl {
			float: left;
			width: 12em;
			}
			#menu dt {
			cursor: pointer;
			text-align: center;
			font-weight: bold;
			background: #B3A6B8;
			border: 1px solid #093D7E;
			margin: 1px;
			}
			#menu dd {
			display: none;
			border: 1px solid #093D7E;
			}
			#menu li {
			text-align: center;
			background: #B3A6B8;
			}
			#menu li a, #menu dt a {
			color: #093D7E;
			text-decoration: none;
			display: block;
			height: 100%;
			border: 0 none;
			}
			#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
			background: #d4c0dc;
			}

			.scroll {height: 800px; overflow: auto;z-index:1;}
			-->
			</style>
</head>

<body style="background-color: #B3A6B8">

<div align="center">

<table border="0" cellpadding="0" style="border-collapse: collapse" width="966" bordercolor="#000000">
<tr>
<td align="center">
<img border="0" src="images/neolooksbanner.png" width="960" height="300">
</td>
</tr>


<tr>
<td width="966" align="center"><div id="menu">

<dl>

<div id="menu">
		
		
<dt onmouseover="javascript:show('smenu1');">Home</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="home.php">Homepage</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="link.htm">Link naar neolooks</a></li>
</ul>
</dd>
</dl>


<dl>	
<dt onmouseover="javascript:show('smenu2');">Staf</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="Staff.htm">Wie is de staf</a></li>
<li><a href="Becomestaff.htm">Wordt staf!</a></li>
<li><a href="cutenews">Staf only</a></li>
</ul>
</dd>
</dl>


<dl>	
<dt onmouseover="javascript:show('smenu3');">Graphics</dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<ul>
<li><a href="glitters.php">Glitters</a></li>
<li><a href="UFA.php">Op voor adoptie</a></li>
<li><a href="Userlookups.php">gebruiksersprofiel</a></li>
<li><a href="Gildeblog.php">Gildelayout blog</a></li>
<li><a href="Gildefull.php">Gildelayout full</a></li>
<li><a href="petlookups.php">Pet lookup</a></li>
<li><a href="petpages.php">Petpages</a></li>
<li><a href="winkelgallerij.php">Winkel blogs</a></li>
<li><a href="winkelgallerij.php">Winkel layout</a></li>
<li><a href="winkelgallerij.php">Galerij layout</a></li>
<li><a href="achtergronden.php">Achtergronden</a></li>
<li><a href="adoptables.php">Adoptables</a></li>
</ul>
</dd>
</dl>

<dl>	
<dt onmouseover="javascript:show('smenu4');">Help</dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
<ul>
<li><a href="userlookuphelp.htm">Help met user lookups</a></li>
<li><a href="petlookuphelp.htm">Help met pet lookups</a></li>
</ul>
</dd>
</dl>


<dl>	
<dt onmouseover="javascript:show('smenu5');">Affiliates</dt>
<dd id="smenu5" onmouseover="javascript:show('smenu5');" onmouseout="javascript:show('');">
<ul>
<li><a target="_blank" href="http://www.duadirdesigns.com"><img src="http://members.lycos.nl/duadirgraphics/ddaffiliatebutton3.gif" border="0"></a></li>
<li><a href="mailto:Neolooks@gmail.com?subject=Affliliate">Wordt affiliate</a></li>
</ul>
</dd>
</dl>

</td>
</tr>
</table>
</div>
</div>




</body>

</html>

Annodompje · 25 jan 2008

Ik wil niet opdringerig doen.. maar is er iemand die mij kan helpen hiermee?? of moet ik het ergens anders gaan zoeken??

.. ik zie namelijk echt niet waar de fout zit in de code dat ie er niet overheen valt..

peter vazed · 25 jan 2008

Weet je wat het probleem is?

Ik wel.

Je hebt gebruik gemaakt van includes voor de diverse onderdelen van je pagina.

Vandaar de diverse body head en title tags.

En je hebt geen doctype.

Dus AL je php pagina's nalopen.
Alleen de head.php moet je een doctype geven, een title en bodytag.

De rest van de pagina's moet je ALLEEN voorzien van de benodigde html codes.

De LAATSTE pagina, de footer of afsluiter
bevat de </body> </html> tag,
eventueel voorafgegaan door de benodigde html code.

Annodompje · 25 jan 2008

oke.. ik denk dat ik wat je zei heb uitgevoerd.. (zoals ik eerder al had gezegd.. ik ben nogal nieuw op dit gebied.. dus merendeel is hocuspocuspraat xD)

ik heb het nu zo:

Header:

HTML:

<!DOCTYPE>
<html>



<title>Neolooks.co.nr</title>

<script type="text/javascript">
	<!--
	window.onload=show;
	function show(id) {
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
	if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
	if (d) {d.style.display='block';}
	}
		//-->
</script>

<style type="text/css" media="screen">
			<!-- 
			body {
			margin: 0;
			padding: 0;
			background: white;
			font: 80% verdana, arial, sans-serif;
			}
			dl, dt, dd, ul, li {
			margin: 0;
			padding: 0;
			list-style-type: none;
			}
			#menu {
			position: relative; /* Menu position that can be changed at will */
			top: 0;
			z-index:100;
			color: #093D7E;
			width: 100%; /* precision for Opera */
			}
			#menu dl {
			float: left;
			width: 12em;
			}
			#menu dt {
			cursor: pointer;
			text-align: center;
			font-weight: bold;
			background: #B3A6B8;
			border: 1px solid #093D7E;
			margin: 1px;
			}
			#menu dd {
			display: none;
			border: 1px solid #093D7E;
			}
			#menu li {
			text-align: center;
			background: #B3A6B8;
			}
			#menu li a, #menu dt a {
			color: #093D7E;
			text-decoration: none;
			display: block;
			height: 100%;
			border: 0 none;
			}
			#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
			background: #d4c0dc;
			}

			.scroll {height: 800px; overflow: auto;z-index:1;}
			-->
			</style>


<body style="background-color: #B3A6B8">

<div align="center">

<table border="0" cellpadding="0" style="border-collapse: collapse" width="966" bordercolor="#000000">
<tr>
<td align="center">
<img border="0" src="images/neolooksbanner.png" width="960" height="300">
</td>
</tr>


<tr>
<td width="966" align="center"><div id="menu">
<dl>
<div id="menu">
<dt onmouseover="javascript:show('smenu1');">Home</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="home.php">Homepage</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="link.htm">Link naar neolooks</a></li>
</ul>
</dd>
</dl>


<dl>	
<dt onmouseover="javascript:show('smenu2');">Staf</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="Staff.htm">Wie is de staf</a></li>
<li><a href="Becomestaff.htm">Wordt staf!</a></li>
<li><a href="cutenews">Staf only</a></li>
</ul>
</dd>
</dl>


<dl>	
<dt onmouseover="javascript:show('smenu3');">Graphics</dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<ul>
<li><a href="glitters.php">Glitters</a></li>
<li><a href="UFA.php">Op voor adoptie</a></li>
<li><a href="Userlookups.php">gebruiksersprofiel</a></li>
<li><a href="Gildeblog.php">Gildelayout blog</a></li>
<li><a href="Gildefull.php">Gildelayout full</a></li>
<li><a href="petlookups.php">Pet lookup</a></li>
<li><a href="petpages.php">Petpages</a></li>
<li><a href="winkelgallerij.php">Winkel blogs</a></li>
<li><a href="winkelgallerij.php">Winkel layout</a></li>
<li><a href="winkelgallerij.php">Galerij layout</a></li>
<li><a href="achtergronden.php">Achtergronden</a></li>
<li><a href="adoptables.php">Adoptables</a></li>
</ul>
</dd>
</dl>

<dl>	
<dt onmouseover="javascript:show('smenu4');">Help</dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
<ul>
<li><a href="userlookuphelp.htm">Help met user lookups</a></li>
<li><a href="petlookuphelp.htm">Help met pet lookups</a></li>
</ul>
</dd>
</dl>


<dl>	
<dt onmouseover="javascript:show('smenu5');">Affiliates</dt>
<dd id="smenu5" onmouseover="javascript:show('smenu5');" onmouseout="javascript:show('');">
<ul>
<li><a target="_blank" href="http://www.duadirdesigns.com"><img src="http://members.lycos.nl/duadirgraphics/ddaffiliatebutton3.gif" border="0"></a></li>
<li><a href="mailto:Neolooks@gmail.com?subject=Affliliate">Wordt affiliate</a></li>
</ul>
</dd>
</dl>

</td>
</tr>
</table>
</div>
</div>

pagina zelf:

HTML:

<div align="center">

<table border="0" cellpadding="0" style="border-collapse: collapse" width="800" bordercolor="#000000">
<tr>
<td align="center" valign="top"><?php include("header.php"); ?></td>
</tr>
</table>

</div>
<div align="center">

<table border="0" cellpadding="0" style="border-style:solid; border-width:1px; border-collapse: collapse; " width="960" bordercolor="#000000">
<tr>
<td align="center" width="810" valign="top">  

<div class="scroll">   
<?PHP
$category = "3";
$template = "default";
$number = "3";
include("cutenews/show_news.php");
?> 
</div>
</td>

<td width="150" align="center" valign="top" style="border-style: solid; border-width: 1px">  
<div class="scroll">
<?PHP
$category = "1,2,4,5,6,7,8,9,10,11,12,13";
$template = "Headlines";
$number = "8";
include("cutenews/show_news.php");
?> 
</div>

</td>
</tr>
</table>


</div>
<?php include("footer.php"); ?>

en tot slot de footer:

HTML:

</body>

</html>

en het resultaat is niets veranderd

..

peter vazed · 26 jan 2008

Nee, neeeeeeeeeeee...

Hierbij een nagekeken txt file.
Save en sla op als html.
Bekijk het in je verkenner/browser.

Ok, als dit goed is ga je splitsen:

vanaf doctype tot en met <body> tag. of wat je wenst
dit stuk sla je op als header.php.
Dan het volgende stuk
en dan het volgende stuk, je weet zelf wel je verdeling.

En dan roep je via includes in je test3.php alle gemaakte php files op.
en in het content gedeelte van de file de tekst voor de aangeklikte link.

Je menu deel heb ik nu zo gemaakt:
#menu {
position: absolute; /* Menu position that can be changed at will */
top:280px ;
left:50px;

Overigens moet je je div-jes nalopen, liggen verschoven in de code.
Kon de misplaatsing zo snel niet vinden.

Annodompje · 26 jan 2008

xD oke.. het is nu gelukt..
de hele fout zat hem in

#menu {
position: relative;

dat moest dus absolute zijn.. nu krijg ik hem alleen niet meer gecentreerd.. in mozilla firefox is het genoeg als ik gewoon left:50 weghaal.. alleen in IE gaat ie dan raar doen..
heeft iemand daar nog leuke ideetjes voor? ik heb er meer dan een twee uur aan zitten proberen.. en heb nogsteeds het zelfde resultaat ¬¬

peter vazed · 26 jan 2008

2 uur?

Zal in de toekomst wel rapper gaan, als je CSS en beetje begrijpt.

hier de volle code:
#menu {
position: absolute; /* Menu position that can be changed at will */
top:280px ;
left:50px;
color: #093D7E;
width: 800px;
margin:auto;
width: 800px; /* precision for Opera */
}

Door
width: 800px; geef je een VASTE breedte aan
en met
margin:auto; geef je aan dat de ruimte automatisch aangepast moet worden.

Hoop dat het nu beter lijkt.

:cool;

Annodompje · 26 jan 2008

dat hoop ik wel ja xD

maar die code werkt niet helemaal zoals ik wil.. ik wil het menu graag centreren (in het midden dus onder het plaatje) met die code staat ie weer 50px van links.. als ik dat weer weg haal heb ik het zelfde probleem xD

peter vazed · 26 jan 2008

Heb je wel mijn code kompleet gebruikt?

Je je eigen originele code zten nog al wat "mistakes".

En waar staat je menu dan met deze code
#menu {
position: absolute; /* Menu position that can be changed at will */
top:380px ;
left:50px;
color: #093D7E;
width: 800px;
margin:auto;
width: 800px; /* precision for Opera */
}

peter vazed · 26 jan 2008

Schiet natuurlijk niet op zo.

ALs je pagina zo begint:
<div align="center">

<table border="0" cellpadding="0" style="border-collapse: collapse" width="800" bordercolor="#000000" height="322">
<tr>
<td align="center" valign="top">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>

<head>

<title>Neolooks.co.nr</title>

En er zitten nog verdwaalde body en style tags in de rest van de pagina.

Annodompje · 26 jan 2008

ik heb nu heel je code gebruikt..
http://www.neolooks.co.nr/indextest3.php
alleen.. het menu staat nog steeds niet in het midden.. dat is alles wat er nog gebeuren moet.. heel erg bedankt dat je me helpt hoor.. maar als ik zo vrij mag zijn.. hoe kan ie ooit in het midden komen als ik een code moet plaatsen die zegt dat ie 50px van de zeikant af moet staan??

peter vazed · 27 jan 2008

Ja, dan haal je de:
left:50px;
er gewoon uit.

Ik had de width op 800px; gezet, je hebt nu 960px; gebruikt.

Het is altijd spelen met de breedte en margin etc.

Bekijk wel je ontwerpen in IE en in Firefox,
omdat sommige dingen net anders door de browsers kunnen worden weergegeven.

Je huidige code is nog niet "validate" correct,
je begint met een <div align="center">
en het doctype volgt pas daarna.

Dus je code optimaliseren.
Maar als het werkt in IE en Firefox ben je natuurlijk al een heel eind.

Overigens komen de meeste pagina's niet ongeschonden door de validatie.

Dus dit voor de html controle
http://validator.w3.org/
en dit
http://jigsaw.w3.org/css-validator/
voor de css controle.

Maak ik een nieuwe site, dan controleer ik het bijtijds, vroeger niet,
en dan zie je je site in IE, dan blijkt het menu verschoven te zijn tov Firefox.

Annodompje · 27 jan 2008

zo.. wel wat foutjes ja xD maken die dingen nu echt uit?? bedoel mijn pagina werkt nu goed in ff,. en na net ook in IE.. maar zal het voor de zekerheid toch nog even veranderen..
maar mijn pagina werkt nu helemaal

.. nu de rest van de pagina's nog aanpassen xD t was maar een test xD
(oh dat left:50 px weghalen hielp alleen in FF in IE ging ie dan heel ver naar rechts.. zover dat je onderin een schuifbalk kreeg.. ik heb nu de tabel ingesteld op align:left en nu doet ie het wel goed..

)..
Heeeeeeeeel erg bedankt voor het helpen

..

Drop down menu (duwt de rest van de pagina weg)

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Meubilair

Gebruiker

Meubilair

Bijlagen

Gebruiker

Meubilair

Gebruiker

Meubilair

Meubilair

Gebruiker

Meubilair

Gebruiker

Wij waarderen jouw privacy