login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Navigatiebalk

Offline Frederic - 07/10/2005 20:31
Avatar van FredericPHP ver gevorderde Kan iemand me eventjes advies geven om menubalkje te maken? Zoals ik het nu heb (bovenaan op de tekening) zou eigenlijk zoals onderaan op de tekening moeten worden.

Dit heb ik al:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menubalk">
  2. 		<ul>
  3. 			<li class="navigatie"><a href="http://www.gfd">Element A</a></li>
  4. 			<li class="navigatie"><a href="http://www.gfd">Element B</a></li>
  5. 			<li class="navigatie"><a href="http://www.gfd">Element C</a></li>
  6. 		</ul>
  7. 	</div>

php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.menubalk {
  2. 	background: url(../afbeeldingen/menubalk.gif);
  3. 	font-size: 10px;
  4. 	height: 22px;
  5. 	color: #AAAAAA;
  6. 	padding: 0 24px 0 18px;
  7. }
  8. li.navigatie {
  9. 	display: block;
  10. 	width: 83px;
  11. 	height: 22px;
  12. }

Ik had gehoopt/gedacht dat die display:block genoeg ging zijn, maar blijkbaar niet?
http://users.pa...amloos.bmp

10 antwoorden

Gesponsorde links
Offline Ultimatum - 07/10/2005 20:35
Avatar van Ultimatum PHP expert in html moet je de regel afbreken een enter is niet genoeg, je kan het <br> doen of <br /> om het xhtml correct te krijge (zelfde effect) dus word het zo ;)

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menubalk">
  2.         <ul>
  3.             <li class="navigatie"><a href="http://www.gfd">Element A</a></li><br />
  4.             <li class="navigatie"><a href="http://www.gfd">Element B</a></li><br />
  5.             <li class="navigatie"><a href="http://www.gfd">Element C</a></li>
  6.         </ul>
  7.     </div>
Offline Frederic - 07/10/2005 20:38
Avatar van Frederic PHP ver gevorderde Dan krijg ik enkel meer witregels ertussen he piwi Ik wil dat het mooi in blokken komt...
Offline nathanael - 07/10/2005 20:52
Avatar van nathanael Gouden medaille

HTML gevorderde		 Je moet niet de optie <ul></ul> gebruiken, dan krijg je namelijk een opsommingslijst 
Offline Frederic - 07/10/2005 20:57
Avatar van Frederic PHP ver gevorderde jawel, het zijn gegevens die langs elkaar zijn en dezelfde opmaak hebben
=>lijsten gebruiken...
Offline Ultimatum - 07/10/2005 21:14
Avatar van Ultimatum PHP expert jah maar <ul></ul> is voor lijsten onder elkaar
Offline Frederic - 07/10/2005 21:29
Avatar van Frederic PHP ver gevorderde Dat zou me echt enorm spijten hoor als je daarmee geen vertikale balk mag bouwen... Mjah, ik ben zeker dat het gaat, het lukt me alleen niet
Offline Ultimatum - 07/10/2005 21:53
Avatar van Ultimatum PHP expert wrom doe je niet gwoon zonder <ul></ul> en zet je een plaatje van een punt oid voor de naam, net zo makkelijk, dus zo (voor duidelijkheid -))

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menubalk">
  2.                     <li class="navigatie"><a href="http://www.gfd">Element A</a></li>
  3.             <li class="navigatie"><a href="http://www.gfd"><img src="link naar plaatje met punt oid">Element B</a></li>
  4. .......
  5.     </div>
Offline stenno - 07/10/2005 22:49
Avatar van stenno PHP interesse
bedoel je zoiets ???


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <style type="text/css">
  5. <!--
  6. div.menubalk {
  7. 		position:relative;
  8. 		background: #000000;
  9. 		font-size: 15px;
  10.     height: 24px;
  11.     color: #AAAAAA;
  12. 		width: 550px ;
  13. 		vertical-align: middle;
  14.     }
  15. .float1 {
  16. border: 1px solid;
  17. background: #F0F8FF;
  18. position:absolute;
  19. left:100px; top:0px;
  20. width: 125px;
  21. vertical-align: middle;
  22. }
  23. .float2 {
  24. border: 1px solid;
  25. background: #F0F8FF;
  26. position:absolute;
  27. left:224px; top:0px;
  28. width: 125px;
  29. vertical-align: middle;
  30. }
  31. .float3 {
  32. border: 1px solid;
  33. background: #F0F8FF;
  34. position:absolute;
  35. left: 348px; top:0px;
  36. width: 125px;
  37. vertical-align: middle;
  38. }
  39. li.navigatie {
  40.     display: block;
  41.     width: 83px;
  42.     height: 22px;
  43. }
  44.  
  45. a:link {color: blue;text-decoration: none;}
  46. a:visited { color: blue; text-decoration: none;}
  47. a:hover { color: blue;text-decoration: none; }
  48. a:active { color: blue;text-decoration: none; }
  49. -->
  50. </style>
  51.  
  52. </head>
  53. <body>
  54.    <div class="menubalk">
  55.             <div valign="middle"align="center" class="float1"><li class="navigatie"><a href="http://www.gfd">Element A</a></li></div>
  56.             <div valign="middle"align="center"class="float2"><li class="navigatie"><a href="http://www.gfd">Element B</a></li></div>
  57.             <div valign="middle" align="center"class="float3"><li class="navigatie"><a href="http://www.gfd">Element C</a></li></div>
  58.  	 </div>
  59.  
  60. </body>
  61. </html>
Offline Frederic - 07/10/2005 22:57 (laatste wijziging 08/10/2005 21:11)
Avatar van Frederic PHP ver gevorderde Ik heb volgende code voor mijn navigatiebalk:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menubalk">
  2.  <ul class="menu-navigatie" style="margin: 0px;padding: 0px;list-style-type: none;">
  3.   <li><a href="/">Hoofdpagina</a></li>
  4.   <li><a href="?Pagina=rss">RSS</a></li>
  5.   <li><a href="g">Test</a></li>
  6.  </ul>
  7. </div>

En dit is de CSS code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.menubalk {
  2. 	color: #AAAAAA;
  3. 	margin: 5px;
  4. 	background: url(../afbeeldingen/menubalk.gif);
  5. 	font-size: 10px;
  6. 	height: 22px;
  7. 	margin-top: 0px;
  8. 	color: #AAAAAA;
  9. 	padding: 0 24px 0 18px;
  10. 	margin-left: 0px;
  11. 	margin-bottom: 0px;
  12. }
  13.  
  14. ul.menu-navigatie a, ul.menu-navigatie a:hover {
  15. 	float: left;
  16. 	display: block;
  17. 	padding: 1px 1px 1px 2px;
  18. 	width: 130px;
  19. 	font-size: 10px;
  20. 	height: 20px;
  21. 	text-decoration: none;
  22. 	text-align: center;
  23. 	font-size: 13px;
  24. }
  25.  
  26. ul.menu-navigatie a:hover {
  27. 	color: #CC0000;
  28. 	border: 1px solid #DDDDDD;
  29. 	padding: 0px 0px 0px 1px;
  30. 	background: url(../afbeeldingen/menubalk-actief.gif);
  31. }

Nu, in firefox is de code goed, maar in IE komen ze niet langs elkaar:

http://www.fadetolife.be/naamloos.bmp
Offline Ontani - 08/10/2005 22:36
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 ge moet uw li elementen nog instellen als display: inline;
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.27s