Dropdown menu afbeeldingen

Geplaatst: 17 december 200915 jaren

Hallo,

Ik wil dus een site met een nav-bar maken en dan wil ik die navigatiebalk boven aan de pagina maken en dan indien mogelijk dat die altijd meescrollt. Maar nou zijn er een paar elementen die ik erin wil zetten Alleen zou ik zelf niet weten hoe ik dit doe, ik ben de lay-out nu aan het maken maar ik wil toch wel weten hoe ik dit kan doen

Hoe kan ik zorgen dat mijn navigatiebalk meescrollt met de persoon en dan altijd onder de balk van de tabbladen (browser) zit?
Hoe kan ik het maken dat als ik mijn muis op een afbeelding zit, bijvoorbeeld Contact dat er een ander plaatje te zien is en er een dropdown ontstaat met twee andere afbeeldingen erin 'Webmaster' en 'Sitemaster' (voorbeeld)

Graag hulp

Zamg0d1

Reageren

Reacties 48
Bezichtigingen 6k
Created 15 jaren15 jaren
Laatste reactie 15 jaren15 jaren

Popular Days

Most Popular Posts

marcootje

17 december 200915 jaren

Voor die eerste vraag zijn er voor zover ik weet 2 manieren: 1. Je zet de hele website in een div, en de menubalk in een andere div. Deze menubalk zet je op een position:fixed bovenaan. Stel dat dez
marcootje

23 december 200915 jaren

iets als dit? position: fixed; right: 0px; top: 200px;

Geplaatst: 26 december 200915 jaren

Auteur

comment_1556841

Ik heb het geprobeerd maar dan ziet de hele layout er maf uit De afbeeldingen zijn verspreid over de hele webpagina waardoor het niet meer klopt :

En dan onderaan word er niets weergegeven De link etc. klopt gewoon

Bewerkt: 26 december 200915 jaren door Zamg0d1

Reageren

Geplaatst: 26 december 200915 jaren

comment_1556874

heb je een online voorbeeld en/of code?

Bewerkt: 26 december 200915 jaren door marcootje

Reageren

Geplaatst: 26 december 200915 jaren

Auteur

comment_1556945

heb je een online voorbeeld en/of code?

index.php:

<!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>
<title>Hillway Band</title>
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#535650" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Dark Layout.psd) -->
<center>
<table id="Table_01" width="860" height="1501" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="13">
		<img src="images/Dark-Layout_01.png" width="860" height="3" alt=""></td>
</tr>
<tr>
	<td colspan="3" rowspan="2">
		<img src="images/Dark-Layout_02.png" width="193" height="132" alt=""></td>
	<td colspan="8">
		<img src="images/Dark-Layout_03.png" width="472" height="92" alt=""></td>
	<td colspan="2" rowspan="2">
		<img src="images/Dark-Layout_04.png" width="196" height="132" alt=""></td>
</tr>
<tr>
	<td colspan="8">
		<div id="navbar"><ul id="nav">
		<li><a href="index.html"><IMG src="button/home.png" al="Home"></a></li>

<li><IMG src="button/scape.png" al="" width="24"></li>

<li><IMG src="button/band.png" al="Band"></li>
<li><IMG src="button/scape.png" al="" width="24"></li>
<li><IMG src="button/about.png" al="About"></li>
<li><IMG src="button/scape.png" al="" width="24"></li>
<li><IMG src="button/contact.png" al="Contact"></li>
</ul></div></td>
</tr>
<tr>
	<td colspan="13">
		<img src="images/Dark-Layout_06.png" width="861" height="52" alt=""></td>
</tr>
<tr>
	<td colspan="2">
		<img src="images/Dark-Layout_07.png" width="17" height="2" alt=""></td>
	<td colspan="5" rowspan="2">
		<img src="images/Dark-Layout_08.png" width="500" height="240" alt=""></td>
	<td colspan="6">
		<img src="images/Dark-Layout_09.png" width="343" height="2" alt=""></td>
</tr>
<tr>
	<td colspan="2">
		<img src="images/Dark-Layout_10.png" width="17" height="238" alt=""></td>
	<td>
		<img src="images/Dark-Layout_11.png" width="35" height="238" alt=""></td>
	<td colspan="4">
		<img src="images/Dark-Layout_12.png" width="300" height="238" alt=""></td>
	<td>
		<img src="images/Dark-Layout_13.png" width="8" height="238" alt=""></td>
</tr>
<tr>
	<td colspan="13">
		<img src="images/Dark-Layout_14.png" width="861" height="53" alt=""></td>
</tr>
<tr>
	<td colspan="2" rowspan="2">
		<img src="images/Dark-Layout_15.png" width="17" height="864" alt=""></td>
	<td colspan="4">
		<img src="images/Dark-Layout_16.png" width="499" height="819" alt=""></td>
	<td colspan="2">
		<img src="images/Dark-Layout_17.png" width="37" height="819" alt=""></td>
	<td colspan="4">
		<img src="images/Dark-Layout_18.png" width="300" height="819" alt=""></td>
	<td rowspan="2">
		<img src="images/Dark-Layout_19.png" width="8" height="864" alt=""></td>
</tr>
<tr>
	<td colspan="10">
		<?php
		include_once("footer.php");
		?>
	</td>
</tr>
</table></center>

<div id="twitter"><center><table bgcolor="#30322e" width="20">
<tr>
	<td>
		<img src="http://www.hyves.nl/favicon.ico" width="16" height="16" alt=""></td>
</tr>
<tr>
	<td>
		<img src="http://twitter.com/favicon.ico" width="16" height="16" alt=""></td>
</tr>
<tr>
	<td>
		<img src="http://facebook.com/favicon.ico" width="16" height="16" alt=""></td>
</tr>	
<tr>
	<td>
		<img src="http://myspace.com/favicon.ico" width="16" height="16" alt=""></td>
</tr>
</table></center></div>
<!-- End Save for Web Slices -->
</body>
</html>

footer.php:

<table id="Table_01" width="860" border="0">
<tr>
	<td colspan="10">
		<img src="images/Dark-Layout_20.png" width="836" height="45" alt=""></td>
</tr>
<tr>
	<td>
		<img src="images/Dark-Layout_21.png" width="6" height="102" alt=""></td>
	<td colspan="3">
		<img src="images/Dark-Layout_22.png" width="263" height="102" alt=""></td>
	<td>
		<img src="images/Dark-Layout_23.png" width="32" height="102" alt=""></td>
	<td colspan="4">
		<img src="images/Dark-Layout_24.png" width="269" height="102" alt=""></td>
	<td>
		<img src="images/Dark-Layout_25.png" width="23" height="102" alt=""></td>
	<td colspan="2">
		<img src="images/Dark-Layout_26.png" width="260" height="102" alt=""></td>
	<td>
		<img src="images/Dark-Layout_27.png" width="8" height="102" alt=""></td>
</tr>
<tr>
	<td colspan="13">
		<img src="images/Dark-Layout_28.png" width="861" height="54" alt=""></td>
</tr>
<tr>
	<td>
		<img src="images/spacer.gif" width="6" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="11" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="176" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="76" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="32" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="214" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="2" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="35" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="17" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="23" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="72" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="188" height="1" alt=""></td>
	<td>
		<img src="images/spacer.gif" width="8" height="1" alt=""></td>
</tr>
</table></center>

Alle links etc. moeten gewoon kloppen

Reageren

Geplaatst: 26 december 200915 jaren

comment_1556987

Hm.. even cheaten; wat gebeurd er als je

<?php
include_once("footer.php");
?>

vervangt door de code in footer.php?

Reageren

Geplaatst: 26 december 200915 jaren

Auteur

comment_1557066

Hetzelfde

Reageren

Geplaatst: 26 december 200915 jaren

comment_1557084

dat gokte ik al.. oftewel je hebt het verkeerd gekopieerd

ga even terug naar wat je eerst had, en doe dan het volgende:

Pak een pagina, zoals home. Deze ziet er ongeveer zo uit, laten we zeggen home.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<div id="website">
<div id="header">
	<span class="titel">
		titeltje
	</span>
</div>
<div id="inhoud">
	haha dit is inhoud
</div>
<div id="footer">
	© bla bla bla
</div>
</div>
</body>
</html>

Nu pakken we het gedeelte boven de inhoud, dat zetten we in header.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<div id="website">
<div id="header">
	<span class="titel">
		titeltje
	</span>
</div>
<div id="inhoud">

We pakken ook het gedeelte onder de inhoud, dat zetten we in footer.php:

</div>
<div id="footer">
	© bla bla bla
</div>
</div>
</body>
</html>

Deze includen we nu in home.php:

<?php
include_once("header.php");
?>
	haha dit is inhoud
<?php
include_once("footer.php");
?>

Een beetje herschreven:

<?php
include_once("header.php");
?>

haha dit is inhoud

<?php
include_once("footer.php");
?>

Dat is het idee .

Reageren

Geplaatst: 26 december 200915 jaren

Auteur

comment_1557096

Maf, maar hij pakt ze alsnog niet Kun jij misschien kijken? Ik heb de ZIP in de bijlage zitten

Bewerkt: 26 december 200915 jaren door Zamg0d1

Reageren

Geplaatst: 26 december 200915 jaren

comment_1557194

bij mij zien de index.php en index.html van de zip er hetzelfde uit, en ook hetzelfde als http://www.gaming-freak.nl/Dark/index.html, dus volgens mij is het wel goed?

Reageren

Geplaatst: 26 december 200915 jaren

Auteur

comment_1557211

bij mij zien de index.php en index.html van de zip er hetzelfde uit, en ook hetzelfde als http://www.gaming-freak.nl/Dark/index.html, dus volgens mij is het wel goed?

Maf... Als ik ze online zet werkt het wel correct maar als ik het uitprobeer op localhost dan werkt het niet

Bewerkt: 26 december 200915 jaren door Zamg0d1

Reageren

Geplaatst: 27 december 200915 jaren

comment_1557576

roep je niet index.html aan ipv index.php of zo??? (als je de standaard aanroept, dus bijvoorbeeld met www.website.nl/map/nogiets/, zonder bestandsaanduiding, neemt hij eerst de html, dan pas de php.)

Bewerkt: 27 december 200915 jaren door marcootje

Reageren

Geplaatst: 27 december 200915 jaren

Auteur

comment_1557580

roep je niet index.html aan ipv index.php of zo??? (als je de standaard aanroept, dus bijvoorbeeld met www.website.nl/map/nogiets/, zonder bestandsaanduiding, neemt hij eerst de html, dan pas de php.)

k roep de index.php op

Maar nu even een andere vraag, het grote content-vlak zal op elke pagina een andere grootte zal hebben, moet ik dus tekst op die afbeelding zien te krijgen, niet erboven of eronder maar echt erop floaten Hoe doe ik dit? DIV word moeilijk omdat ie op elke pagina een andere grootte zal krijgen.

Reageren

Geplaatst: 27 december 200915 jaren

comment_1557837

Je moet je code herschrijven met divs en css denk ik, of dat is in ieder geval wat ik zou doen.

Het kan nu ook met de table, moet je op de plaats van je content de plaatjes in een background-image zetten.

De tekst kun je er dan overheen plaatsen. In hoeverre dit gaat werken, weet ik niet.

Kijk maar hoe je het doet, het kan waarschijnlijk allebei .

Reageren

Geplaatst: 27 december 200915 jaren

Auteur

comment_1557924

Okee, het is mij gelukt Maar hoe stel ik dan de grootte van de afbeelding in? Anders kan ik alsnog steeds een CSS code gebruiken Of is het ook mogelijk om bijvoorbeeld in alleen de page.php een STYLE code te maken? Dan kan ik op elke pagina gewoon steeds een eigen CSS bit zetten, dan staat die niet in de HEAD-Tag Of kan ik ook een main.css maken voor dat vak?

Reageren

Geplaatst: 27 december 200915 jaren

comment_1557954

waarom zou je een hoogte willen instellen?

Naja, dit kan op meer manieren:

1)Voordat je header.php aanroept maak je een variabele $hoogte, waarna je deze ergens bij die height echo't in header.php.

2)Je maakt in je css-bestand verschillende klassen aan voor de verschillende pagina's, een geeft die klasse (apart voor elke pagina) door aan de div.

3)Er zullen nog wel meer manieren zijn :puh: .

Reageren

Geplaatst: 27 december 200915 jaren

Auteur

comment_1557959

waarom zou je een hoogte willen instellen?

Ik wil de hoogte instellen omdat die op elke pagina verschillend is, zo heeft bijvoorbeeld de index minder tekst dan de band-info.

En nog één klein vraagje en dan regel ik de rest zelf wel :

Hoe kan ik zorgen dat alles als index.php?=index word weergegeven? Dan verwijder ik de index.php waardoor het word: domein.com/?index. Hoe kan ik dit doen?

Bewerkt: 28 december 200915 jaren door Zamg0d1

Reageren

Een reactie plaatsen

Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

https://gtagames.nl/topic/107403-dropdown-menu-afbeeldingen/

Volgers

Naar onderwerpenlijst

Er zijn hier geen geregistreerde gebruikers aanwezig.

Reacties 48
Bezichtigingen 6k
Created 15 jaren15 jaren
Laatste reactie 15 jaren15 jaren

Inloggen

Dropdown menu afbeeldingen

Top Posters In This Topic

Popular Days

Most Popular Posts

marcootje

marcootje

Featured Replies

Een reactie plaatsen

Recent actief 0

Top Posters In This Topic

Popular Days

Most Popular Posts

marcootje

marcootje

Account

Navigation

Zoeken