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 5.9k
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: 17 december 200915 jaren

comment_1550865

Voor die eerste vraag zijn er voor zover ik weet 2 manieren:

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 deze balk 20px hoog is, positioneer je de website even 20px naar beneden, zodat de website in eerste instantie onder de balk komt, en als je naar beneden scrolt gewoon onder de menubalk door gaat als het ware.

Je zet weer de hele website in een div, en de menubalk in een andere div, maar dit keer geef je een vaste hoogte aan de div met de website, en een scroll:auto;. Enig minpuntje: de hoogte van het scherm berekenen is nogal lastig.

Ik zou dus die 1e doen, die heb ik ook een keer gemaakt en werkte goed.

Voor die tweede vraag moet je denk ik zelf maar even zoeken op dropdown-menu of zo.

Het basisprincipe van een dropdown-menu in css is het volgende:

DE CSS:
span.link div.imgdiv {
   display: none;
}

span.link:hover div.imgdiv {
   display: inline;
}

DE HTML:
<span class="link">
   <a href="pag.php"><img src="img.png" alt="img"></a>
   <div class="imgdiv">
       dit is de dropdown
   </div>
</span>

volgens mij moet zoiets werken. op het internet staan natuurlijk veel uitgebreidere voorbeelden.

Dat andere plaatje kan overigens ook met css, met die :hover, of met javascript (onmouseover, onmouseout). google weet er meer over .

Bewerkt: 17 december 200915 jaren door marcootje

Reageren

Geplaatst: 19 december 200915 jaren

Auteur

comment_1552069

OnMouseOver hoeft niet persé, en dat meescrollen ook niet... Tenzij het werkt met jou code Maar aan de code die je gepost hebt, hoef ik daar niks meer aan te bewerken? Of alleen bij 'dit is de dropdown' nog iets te doen? Want de code snap ik zo ongeveer, maar dat wat er nu gepost is werkt volgens mij maar voor één afbeelding.

Ik heb nu ook een tutorial gevonden: http://sceneone.nl/tips_tricks/drop_down_menu.php, kan ik hier ook afbeeldingen gebruiken ipv tekst?- kan gewoon

Codes verwijderd ivm nieuwe layout

Bewerkt: 21 december 200915 jaren door Zamg0d1

Reageren

Geplaatst: 22 december 200915 jaren

Auteur

comment_1553956

Bedankt voor je hulp marcootje Maar aangezien ik een nieuwe layout heb http://www.gaming-freak.nl/Dark/index.html heb ik de codes niet meer nodig. Alleen weet iemand hoe ik die twitter button http://www.grafpedia.com/tutorials/create-clean-hosting-layout hier kan namaken maar dan met drie andere icoontjes (Hyves, Twitter, Facebook)?

Bewerkt: 23 december 200915 jaren door Zamg0d1

Reageren

Geplaatst: 23 december 200915 jaren

Auteur

comment_1554968

Weet iemand hoe ik die twitter button http://www.grafpedia.com/tutorials/create-clean-hosting-layout hier kan namaken maar dan met drie andere icoontjes (Hyves, Twitter, Facebook)?

Bump :engel:

Reageren

Geplaatst: 23 december 200915 jaren

comment_1555367

iets als dit?

position: fixed;
right: 0px;
top: 200px;

Reageren

Geplaatst: 23 december 200915 jaren

Auteur

comment_1555437

Ja het werkt

http://gaming-freak.nl/Dark/index.html

Reageren

Geplaatst: 24 december 200915 jaren

comment_1555528

Hm heb ik er ook weer iets bij geleerd.

Ik wist niet eens dat je .ico ook in een <img> kon gebruiken :puh: .

Reageren

Geplaatst: 24 december 200915 jaren

Auteur

comment_1555541

Hm heb ik er ook weer iets bij geleerd.

Ik wist niet eens dat je .ico ook in een <img> kon gebruiken .

Ik wel, .ico is ook afbeelding, en waarom zou dat niet in <img> kunnen? :puh:

Reageren

Geplaatst: 24 december 200915 jaren

comment_1555542

Hm heb ik er ook weer iets bij geleerd.

Ik wist niet eens dat je .ico ook in een <img> kon gebruiken .

Ik wel, .ico is ook afbeelding, en waarom zou dat niet in <img> kunnen?

Werkt <ico> eigenlijk?

Reageren

Geplaatst: 24 december 200915 jaren

Auteur

comment_1555545

Hm heb ik er ook weer iets bij geleerd.

Ik wist niet eens dat je .ico ook in een <img> kon gebruiken .

Ik wel, .ico is ook afbeelding, en waarom zou dat niet in <img> kunnen?

Werkt <ico> eigenlijk?

<ico> is geen HTML-code voor zover ik weet... Wil je een favicon? Dan moet je de volgende code gebruiken:

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

Reageren

Geplaatst: 24 december 200915 jaren

comment_1555672

voor die favicon zijn volgens mij betere codes te vinden, zoals op deze wikipedia-pagina:

http://nl.wikipedia.org/wiki/Favicon

Verder wist ik wel dat .ico ook een plaatje was, maar ik dacht dat het alleen als icon gebruikt kon worden, en niet als plaatje. Ik wist ook niet dat je .png en .gif ook als favicon kon gebruiken, zoals op wikipedia wel staat. Weer iets geleerd vandaag .

Reageren

Geplaatst: 24 december 200915 jaren

Auteur

comment_1555763

Ik heb nog een vraag, is het mogelijk om - nu ik een design heb - het zo te maken dat in elke pagina die ik aanmaak de body automatisch die hele layout toepast, dat scheelt mij steeds deze hele code:

<!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" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#535650" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<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">
		<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>

<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>
</body>
</html>

Of is dit niet mogelijk? Alleen images/Dark-Layout_16.png images/Dark-Layout_17.png en images/Dark-Layout_18.png moet ik steeds van grootte kunnen wijzigen, nouja, hoogte.

Ohja, de code ziet er zo uit omdat het uit Photoshop komt En grotendeels moet nog in DIV gezet worden, hier ben ik ook nog mee bezig

Bewerkt: 24 december 200915 jaren door Zamg0d1

Reageren

Geplaatst: 24 december 200915 jaren

comment_1555784

ehm ik weet niet precies wat je bedoeld, maar je kan wel de hele layout toepassen op de hele site.

Je maakt dan een header.php en footer.php, in header.php zet je wat je voor/boven de content wilt, in footer.php zet je wat je na/onder de content wilt.

Dan doe je:

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

Al denk ik dat je iets anders bedoelt?

Bewerkt: 24 december 200915 jaren door marcootje

Reageren

Geplaatst: 24 december 200915 jaren

Auteur

comment_1555800

Zoiets is wat ik bedoelde En kan ik dan bv. een table maken met daarin de includes?

<table>
<tr><td><?php
include_once("header.php");
?></td></tr>
<tr>inhoud</tr>
<tr><td><?php
include_once("footer.php");
?></td></tr></table>

Of werkt dit niet?

Reageren

Geplaatst: 24 december 200915 jaren

comment_1555863

Probeer het zou ik zeggen, het zal ongetwijfeld iets doen :puh: .

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 5.9k
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