login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Top buttons

Offline DrB - 09/02/2007 10:18 (laatste wijziging 09/02/2007 10:42)
Avatar van DrBHTML interesse Goedemorgen,

Ik heb onder mijn header zeven buttons staan die als menu item dienen. Nu heb ik deze buttons per button in een div gezet:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .topmenu {
  2.   position:absolute;
  3.   margin-top : 0px;
  4. }
  5.  
  6. .topmenu a {
  7.   display : none;
  8. }
  9.  
  10. .top_home {
  11.   left :175px;
  12.   width :110px;
  13.   height:62px;
  14.   background-image:url(../img/home.gif);
  15. }


Echter nu wil ik de button linken en een roll over effect meegeven. Ik ben al een tijdje met divs bezig, maar hoe ik dit moet doen, weet ik even niet. Ik hoop dat iemand me kan helpen.

In mijn index staat trouwens het volgende:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="topmenu top_home"></div>


De eerste stap zou denk ik zijn:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="link.php"><div class="topbuttons top_home"></div></a>


Maarja dit is niet valid

?

Of zou ik de buttons beter in een <ul> <li> kunnen zetten?

3 antwoorden

Gesponsorde links
Offline Thomas - 09/02/2007 16:38
Avatar van Thomas Moderator Je kunt geen hyperlink om een div zetten, maar je kunt wel een hyperlink in een div zetten:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="topbuttons top_home"><a href="link.php"></a></div>
Offline Soebam - 09/02/2007 16:47 (laatste wijziging 09/02/2007 16:48)
Avatar van Soebam HTML ver gevorderde
Citaat:
Of zou ik de buttons beter in een <ul> <li> kunnen zetten?


Ja, maak er een lijst van. Deze kan je vervolgens met css helemaal naar wens opmaken. Voorbeeldje (pas maar aan ):

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. <!--
  3. ul
  4.   {
  5.   list-style: none;
  6.   margin: 0px;
  7.   padding: 0px;
  8.   }
  9.  
  10. li
  11.   {
  12.   float: left;
  13.   margin: 0px;
  14.   padding: 0px;
  15.   text-align: center;
  16.   }
  17.  
  18. a
  19.   {
  20.   display: block;
  21.   height: 20px;
  22.   width: 75px;
  23.   }
  24.  
  25. a:hover
  26. 	{
  27. 	background-color: #cccccc;
  28. 	}
  29. -->
  30. </style>
  31.  
  32. <ul>
  33.   <li><a>een</a></li>
  34.   <li><a>twee</a></li>
  35.   <li><a>drie</a></li>
  36. </ul>


Succes! 
Offline Thomas - 09/02/2007 16:52
Avatar van Thomas Moderator Net in een nieuwe layout toegepast.

Beter goed gejat, dan slecht verzonnen eh :].

@Soebam, je kan de text ook verticaal centreren door aan de hyperlink-style een attribuut "line-height" mee te geven die gelijk is aan de hoogte.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s