Jump to content

Dropdown menu afbeeldingen

NickyHendriks

Door NickyHendriks
in Computer Talk

 Share

Recommended Posts

NickyHendriks Legendary Godfather

NickyHendriks

Geplaatst:
Geplaatst:

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 :)

  1. Hoe kan ik zorgen dat mijn navigatiebalk meescrollt met de persoon en dan altijd onder de balk van de tabbladen (browser) zit?
  2. 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

Link to comment
Delen op andere websites
  • Reacties 48
  • Created
  • Laatste reactie

Top Posters In This Topic

  • NickyHendriks

    26

  • marcootje

    20

  • Jacky-2007

    2

  • Dakendak

    1

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

marcootje
marcootje

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
marcootje

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

marcootje FBI infiltrant

marcootje

Geplaatst:
Geplaatst: (bewerkt)

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 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.

2.

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: door marcootje
Link to comment
Delen op andere websites
NickyHendriks Legendary Godfather

NickyHendriks

Geplaatst:
  • Auteur
Geplaatst: (bewerkt)

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: door Zamg0d1
Link to comment
Delen op andere websites
NickyHendriks Legendary Godfather

NickyHendriks

Geplaatst:
  • Auteur
Geplaatst: (bewerkt)

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: door Zamg0d1
Link to comment
Delen op andere websites
NickyHendriks Legendary Godfather

NickyHendriks

Geplaatst:
  • Auteur
Geplaatst:

Hm heb ik er ook weer iets bij geleerd.

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

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

:7 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" />

Link to comment
Delen op andere websites
marcootje FBI infiltrant

marcootje

Geplaatst:
Geplaatst:

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 :) .

Link to comment
Delen op andere websites
NickyHendriks Legendary Godfather

NickyHendriks

Geplaatst:
  • Auteur
Geplaatst: (bewerkt)

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 :Y En grotendeels moet nog in DIV gezet worden, hier ben ik ook nog mee bezig :Y

Bewerkt: door Zamg0d1
Link to comment
Delen op andere websites
marcootje FBI infiltrant

marcootje

Geplaatst:
Geplaatst: (bewerkt)

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: door marcootje
Link to comment
Delen op andere websites
NickyHendriks Legendary Godfather

NickyHendriks

Geplaatst:
  • Auteur
Geplaatst:

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?

Link to comment
Delen op andere websites

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.

Gast
Op dit onderwerp reageren...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Naar onderwerpenlijst

  • Recent actief   0 leden

    • Er zijn hier geen geregistreerde gebruikers aanwezig.
×
×
  • Create New...