Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Dropdown menu probleem

beronne - 30/12/2010 23:27 (laatste wijziging 02/01/2011 01:06)
Lid		Beste webdesigners, ik zit met een best wel ingewikkeld probleem. Ik heb een website klaar in photoshop en ben hem aan het slicen. maar nu het volgende wat ik aan de hand van plaatjes laat zien. Het menu komt er zo uit te zien: http://i56.tinypic.com/2rp8j2u.jpg Nu als je met de muis er over heen gaat wil ik het volgende krijgen http://i51.tinypic.com/2h4c4go.jpg natuurlijk niet alleen bij het tabblad vereniging maar als ik er 1 heb weet ik ook hoe ik de rest moet doen. ik heb al wat dingen geprobeerd maar ik krijg het niet voorelkaar. kan iemand mij helpen of mij op weg helpen hoe en wat. ik zou u echt heel heel erg dankbaar wezen Met vriendelijke groeten, beronne

4 antwoorden

Gesponsorde links

WouterJ - 30/12/2010 23:33
HTML gevorderde		- Haal (precies zoals op phphulp) die help plz uit je topic. Wij gaan je hier echt niet beter door helpen. - Verdiep je eens in CSS en HTML dropdown menu's.

chth - 31/12/2010 19:17
Lid		misschien ben je hierwat mee: http://www.site...eudo_class

beronne - 02/01/2011 01:06

Lid

ik heb een begin gemaakt met het dropdown menu en geupload naar het volgende adres:
www.rbvhoogeveen.nl/nieuw

ben alleen bezig geweest voor het menu knop home

de html en css code heb ik als volgt

HTML:

php code - Bekijk de code zonder highlighting - Klap code in

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>R.B.V. Hoogeveen</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />    
</head>

<body>
<div id="main-wrapper"> <!-- wrapper om hele site -->

	<div id="bg-image"></div>

	<div id="menu-balk"> <!-- begin menu -->
		<div id="navigatie">
        	
            <ul id="nav">
            	<li><a href="index.php">Home</a>
                	<ul>
                		<li><a href="#">test0</a></li>
                    	<li><a href="#">test1</a></li>
                    	<li><a href="#">test2</a></li>
                        <li><a href="#">test3</a></li>
                        <li><a href="#">test4</a></li>
                        <li><a href="#">test5</a></li>
                        <li><a href="#">test6</a></li>                   
             		</ul>
                </li>
          	</ul>
            
        </div>
	</div> <!-- einde menu -->

</div> <!-- einde main wrapper -->

</body>
</html>
            
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>R.B.V. Hoogeveen</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />    
</head>
 
<body>
<div id="main-wrapper"> <!-- wrapper om hele site -->
 
	<div id="bg-image"></div>
 
	<div id="menu-balk"> <!-- begin menu -->
		<div id="navigatie">
 
            <ul id="nav">
            	<li><a href="index.php">Home</a>
                	<ul>
                		<li><a href="#">test0</a></li>
                    	<li><a href="#">test1</a></li>
                    	<li><a href="#">test2</a></li>
                        <li><a href="#">test3</a></li>
                        <li><a href="#">test4</a></li>
                        <li><a href="#">test5</a></li>
                        <li><a href="#">test6</a></li>                   
             		</ul>
                </li>
          	</ul>
 
        </div>
	</div> <!-- einde menu -->
 
</div> <!-- einde main wrapper -->
 
</body>
</html>
 

CSS:

php code - Bekijk de code zonder highlighting - Klap code in

                #navigatie {
	position: absolute;
	font-size: 16px;
	font-family: Calibri;
	margin-top: 11px;
	margin-left: 20px;
}

#nav, #nav ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

#nav li {
 	float: left;
 	width: 120px;
}

#nav ul {
 	position: absolute;
 	width: 120px;
	left: -1000px;
} 

#nav li:hover ul {
 	left: auto;
	padding: 4px;
	background-image: url(../images/bg-hover.png);
	background-repeat: no-repeat;
}

#nav a {
	display: block;
}


            
#navigatie {
	position: absolute;
	font-size: 16px;
	font-family: Calibri;
	margin-top: 11px;
	margin-left: 20px;
}
 
#nav, #nav ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}
 
#nav li {
 	float: left;
 	width: 120px;
}
 
#nav ul {
 	position: absolute;
 	width: 120px;
	left: -1000px;
} 
 
#nav li:hover ul {
 	left: auto;
	padding: 4px;
	background-image: url(../images/bg-hover.png);
	background-repeat: no-repeat;
}
 
#nav a {
	display: block;
}
 

ik heb de hover nu als hele image gedaan, maar de hover moet mee gaan met het aantal sublinks. hoe krijg ik dit voor
elkaar heb er al best mee zitten kloten als ik dit mag zeggen.

nu zit ik nog met 2 vraagjes:

[img]http://i51.tinypic.com/2h4c4go.jpg[/img]
zoals u op de afbeelding zit moet ik nog een wit vak om de hoofd tekst
heen krijgen die weer mooi moet aansluiten op de hover en nog tussen stukjes per kop vb Home | Vereniging

hou raden jullie mij dit aan om te doen

WouterJ - 02/01/2011 09:11
HTML gevorderde		Ik zou in de subnav onderin een div class='bottom' neerzetten. Daar doe je de ronde hoeken in. De subnav maak je dan gewoon wit. Nu loopt die altijd mee. En bij die witte vlak op de achtergrond van de hoofd nav. zou je gewoon een background url kunnen gebruiken: css code - Bekijk de code zonder highlighting - Klap code in #nav li:hover { /* als er met de muis over wordt gegaan / background: url('image.gif') no-repeat; / Je kan alle background elementen bij elkaar zetten. Dit maakt je code sneller / #nav li:hover { / als er met de muis over wordt gegaan / background: url('image.gif') no-repeat; / Je kan alle background elementen bij elkaar zetten. Dit maakt je code sneller */

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten