Weergegeven resultaten: 1 t/m 6 van 6

Discussie: website

  1. #1
    Up-to-date  
    Geregistreerd
    11 May 2005
    Locatie
    schoten
    Berichten
    30
    Bedankjes
    2
    Bedankt
    1 keer in 1 post

    website

    hallo, ik wil graag m'n site upgraden en wil de knoppen bovenaan, en veranderen in mouseover buttons, css zodanig als je met een muis over een knop gaat een lijste uitklapt, met links, Ik denk dat dit met css moet, maar ken enkel een beetje html. graag wat meer info iemand die me wil helpen? georges

    gebroken link


    website url toegevoegd

  2. #2
    Erelid   Joga's schermafbeelding
    Geregistreerd
    18 July 2005
    Locatie
    Eeklo
    Berichten
    2.095
    Bedankjes
    1.439
    Bedankt
    1.303 keer in 821 posts
    ik weet het niet zeker maar is dit niet met javascript ?

  3. #3
    PC-Freak   Spoorzoeker's schermafbeelding
    Geregistreerd
    10 May 2005
    Locatie
    in een huis met een dak er op
    Berichten
    1.537
    Bedankjes
    118
    Bedankt
    786 keer in 613 posts
    Dit doe je het beste met dhtml
    De schuld ligt nooit bij jezelf, maar altijd bij een ander.

  4. #4
    Gevorderd  
    Geregistreerd
    22 December 2005
    Berichten
    291
    Bedankjes
    12
    Bedankt
    37 keer in 35 posts
    - Je kan het doen met javascript in combinatie met css, met css alleen is het goed mogelijk, maar het vergt veel werk.
    - Een paar tips voor die hoop afbeeldingen: afbeeldingenmet tekst sla je best op in .gif, afbeeldingen: foto's ed sla je dan wel op in .jpg, .bmp, .png
    - je hebt niet echt css in je site gebruikt, wat dynamiek verhindert..

    ik ken een site waarop een css-menu staat, met een beetje aanpassing, maak je een passend enu ff zoeken

  5. #5
    Gevorderd  
    Geregistreerd
    22 December 2005
    Berichten
    291
    Bedankjes
    12
    Bedankt
    37 keer in 35 posts
    kheb eens iets in elkaar gestoken:
    HTML-code:
    <html>
    <head>
    
    <style type="text/css">
    p {font-family:arial; font-size:12px}
    A:link, A:visited {color:orange}
    A:hover {color:white}
    
    #navigatie {margin: 0px; padding: 0px; height: 22px; z-index: 50}
    #navigatie li {width: 200px; height: 22px; position: absolute; display: block; z-index: 50; list-style: none}
    #navigatie a {width: 200px; height: 22px; display: block; z-index: 50; color:black}
    #navigatie a:hover {width: 200px; height: 22px; display: block; z-index: 50; color:red; background-color:blue; border:0px}
    
    #n1 {left:0}
    #n2 {left:200px}
    #n3 {left:400px}
    #n4 {left:600px}
    #n5 {left:800px}
    #n1,#n2,#n3,#n4,#n5{}
    
    #n1 a {}
    #n2 a {background-position: -200px 0}
    #n3 a {background-position: -400px 0}
    #n4 a {background-position: -600px 0}
    #n5 a {background-position: -800px 0}
    #n1 a,#n2 a,#n3 a,#n4 a,#n5 a{background-color:green; padding:3 0 3 15}
    
    #n1 a:hover {background-position: 0 -22px}
    #n2 a:hover {background-position: -200px -22px}
    #n3 a:hover {background-position: -400px -22px}
    #n4 a:hover {background-position: -600px -22px}
    #n5 a:hover {background-position: -800px -22px}
    #n1 a:hover,#n2 a:hover,#n3 a:hover,#n4 a:hover,#n5 a:hover{background-color:yellow}
    
    #navigatie li ul {visibility: hidden; position: absolute; left: -1px; margin: 0 0 0 5px; padding: 0px; width:200px; border:0px}
    #navigatie #n1 ul,#navigatie #n2 ul,#navigatie #n3 ul,#navigatie #n4 ul,#navigatie #n5 ul {background-color:white}
    #navigatie li ul li, #navigatie li ul li a {width:200px; position: relative; z-index: 56}
    #navigatie li ul li a {padding:3 0 3 15; border:0px}
    #navigatie li:hover>ul {visibility: visible}
    
    </style>
    
    <script language="javascript" type="text/javascript">
    function cssJsMenu(elemId) {
      if (document.getElementById(elemId)) {
        var navroot = document.getElementById(elemId);
        var lis=navroot.getElementsByTagName("LI");
        for (i=0; i<lis.length; i++) {
          for (j=0; j<lis[i].getElementsByTagName("UL").length; j++) {
            lis[i].onmouseover = function() {
              this.getElementsByTagName("UL")[j].style.visibility = 'visible';}
            lis[i].onmouseout = function() {
              this.getElementsByTagName("UL")[j].style.visibility = 'hidden';}}}}}
    </script>
    
    </head>
    <body leftmargin="0px" topmargin="10px" style="background-color:#F0F0F0">
    
      <ul id="navigatie">
        <li id="n1">
          <a href="#">Home</a>
          <ul>
            <li><a href="#">1.1</a></li>
            <li><a href="#">1.2</a></li>
            <li><a href="#">1.3</a></li>
            <li><a href="#">1.4</a></li>
            <li><a href="#">1.5</a></li>
          </ul>
        </li>
        <li id="n2">
          <a href="#">Menu 2</a>
          <ul>
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
            <li><a href="#">2.4</a></li>
            <li><a href="#">2.5</a></li>
          </ul>
        </li>
        <li id="n3">
          <a href="#">Menu 3</a>
          <ul>
            <li><a href="#">3.1</a></li>
            <li><a href="#">3.2</a></li>
            <li><a href="#">3.3</a></li>
            <li><a href="#">3.4</a></li>
            <li><a href="#">3.5</a></li>
          </ul>
        </li>
        <li id="n4">
          <a href="#">Menu 4</a>
          <ul>
            <li><a href="#">4.1</a></li>
            <li><a href="#">4.2</a></li>
            <li><a href="#">4.3</a></li>
            <li><a href="#">4.4</a></li>
            <li><a href="#">4.5</a></li>
          </ul>
        </li>
        <li id="n5">
          <a href="#">Menu 5</a>
          <ul>
            <li><a href="#">5.1</a></li>
            <li><a href="#">5.2</a></li>
            <li><a href="#">5.3</a></li>
            <li><a href="#">5.4</a></li>
            <li><a href="#">5.5</a></li>
          </ul>
        </li>
      </ul>
    
    <script language="javascript" type="text/javascript">cssJsMenu('navigatie');</script>
    </body></html>
    Er komt dus wel javascript voor
    Laatst gewijzigd door zodiac; 26 May 2006 om 20:59

  6. De volgende gebruiker bedankt zodiac voor deze nuttige post:

    karma (29 May 2006)

  7. #6
    Up-to-date  
    Geregistreerd
    11 May 2005
    Locatie
    schoten
    Berichten
    30
    Bedankjes
    2
    Bedankt
    1 keer in 1 post
    nu nog uit proberen op m'n site. dat kan wel ff duren, lang geleden dat ik nog eens iets gedaan heb met html. maar ik heb dit getest en het is net wat ik zocht, heel erg bedankt Zodiac

Discussie informatie

Users Browsing this Thread

Momenteel bekijken 2 gebruikers deze discussie. (0 leden en 2 gasten)

Favorieten/bladwijzers

Favorieten/bladwijzers

Regels voor berichten

  • Je mag geen nieuwe discussies starten
  • Je mag niet reageren op berichten
  • Je mag geen bijlagen versturen
  • Je mag niet je berichten bewerken
  •