login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Links positioneren

Offline DrB - 15/08/2006 17:10 (laatste wijziging 15/08/2006 17:11)
Avatar van DrBHTML interesse Beste leden,

Het is waarschijnlijk erg simpel, maar ik kom er niet uit. Ik wil dus met CSS links maken met ruimtes er tussen. Dus bijvoorbeeld:

Home ------ Nieuws ------ Diensten ------ enz

Dit moet horizontaal staan. De streepjes zijn spaties ;) Welke eigenschappen geef je dan aan de link? a.class2 in dit geval.

Mvg,

DrB

8 antwoorden

Gesponsorde links
Offline Nation - 15/08/2006 17:13
Avatar van Nation PHP interesse als je gewoon een cel hebt ofzo, en je zet links erin:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <td width="100%">
  2. <a href="#"> Home </a>
  3.  --- 
  4. <a href="#"> Nieuws </a>
  5.  --- 
  6. <a href="#"> Diensten </a>
  7.  --- 
  8. </td>

dan staan ze toch horizontaal, of wat bedoel je?
Offline CDNC - 15/08/2006 17:14 (laatste wijziging 15/08/2006 17:15)
Avatar van CDNC PHP ver gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .class66 a, .class66 a:hover,  .class66 a:active, .class66 a:visited{
  2.   display: block;
  3.   width: 100px;
  4.   height: 18px;
  5. }
  6.  
  7. <a href="iets" class="class66">iets anders</a>
  8. <a href="iets" class="class66">iets anders</a>
  9. <a href="iets" class="class66">iets anders</a>
  10. <a href="iets" class="class66">iets anders</a>
Offline DrB - 15/08/2006 17:32 (laatste wijziging 15/08/2006 17:34)
Avatar van DrB HTML interesse Bedankt CDNC ga er even mee aan de slag. Nation ook bedankt, maar ik gebruik geen tabellen ;)

//edit

De CSS werkt niet. De links komen gewoon achter elkaar te staan, zonder spaces ertussen.
Offline CDNC - 15/08/2006 17:44 (laatste wijziging 15/08/2006 17:45)
Avatar van CDNC PHP ver gevorderde http://scripts.smoerijf.be/scripts/hier.htm < nu werkt het wel

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5. 	<style>
  6.  
  7. 	.class66 a, .class66 a:hover,  .class66 a:active, .class66 a:visited{
  8. 	  display: block;
  9. 	  width: 200px;
  10. 	  height: 18px;
  11. 	  float:left;
  12. 	  text-align:center;
  13. 	}
  14.  
  15. 	</style>
  16.  
  17. </head>
  18. <body>
  19.  
  20.  
  21. 	<div class="class66"><a href="#1" >iets anders1</a></div>
  22. 	<div class="class66"><a href="#2" >iets anders2</a></div>
  23. 	<div class="class66"><a href="#3" >iets anders3</a></div>
  24. 	<div class="class66"><a href="#4" >iets anders4</a></div>
  25.  
  26. </body>
  27. </html>
Offline DrB - 15/08/2006 18:33
Avatar van DrB HTML interesse Dat van jou werkt inderdaad, maar niet perfect 
Ik heb toch zelf nog wat geprobeerd wat lukt:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a class="class2" href="index.php" alt="" title="Beginpagina">Beginpagina</a>
  2. 		<a class="class2" href="index.php" alt="" title="Pagina2">Pagina2</a>
  3. 		<a class="class2" href="index.php" alt="" title="Pagina3">Pagina 3</a>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. a.class2 {
  2. 	margin-top:15px;
  3. 	margin-left:30px;
  4.     text-align:left;
  5. 	text-decoration:none;
  6. 	font-weight:bold
  7.   }


Nu laat hij het goed zien, alleen wil ik het ietsie naar beneden hebben. Alleen hij verschuift niet naar onder met margin-top.

Het staat in deze div:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu {
  2. 	float:left;
  3. 	width:780px;
  4. 	height:25px;
  5. 	border-bottom: 1px dashed #000;
  6. 	background:url("afbeeldingen/menu.jpg") no-repeat;
  7. }
Offline Riny - 15/08/2006 21:54
Avatar van Riny Nieuw lid Menu's zijn opsommingen mensen 

Oftewel lists:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2.      <li><a href="#">Link</a></li>
  3.      <li><a href="#">Link</a></li>
  4.      <li><a href="#">Link</a></li>
  5.      <li><a href="#">Link</a></li>
  6. </ul>


Dan kun je in de css bijvoorbeeld zoiets doen:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. ul {
  2.      margin: 0;
  3.      padding: 0;
  4. }
  5. li {
  6.      list-style: none;
  7.      float: left;
  8.      width: 100px;
  9.      height: 20px;
  10. }
  11. li a {
  12.      display: block;
  13.      width: 100%;
  14.      height: 100%;
  15.      text-align: center;
  16. }


Bijvoorbeeld natuurlijk .. *Code niet getest heb hem even moeten schrijven in dit textvakje *
Offline CDNC - 15/08/2006 23:00
Avatar van CDNC PHP ver gevorderde hij wil een horisontaal menu, dan ben je met ul, ol, li's nix...
Offline Ontani - 16/08/2006 00:32
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 tuurlijk wel, zelfde manier.
uw LI's worden blocks die ge met float: left; langs elkaar zet.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.255s