Welcome to our forum!

Do you want to become a member of our community? Join our forums now!

Register
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Discussion in 'Suggestions' started by robneng, Feb 17, 2013.

?

Wat vind je van de manier van uitleggen?

  1. Goed

    5 vote(s)
    83.3%
  2. Matig

    1 vote(s)
    16.7%
  3. Slecht

    0 vote(s)
    0.0%
  4. Goed maar... (tip dan in de comments)

    0 vote(s)
    0.0%
Thread Status:
Not open for further replies.
  1. robneng Redstone Miner DRC Player

    Offline
    Joined:
    Oct 23, 2012
    Messages:
    356
    Hallo mensen,
    Ik heb een leuk dingetje voor jullie!
    Een heel simpel navigatie menutje"html in de basis".
    Als je dit wil maken heb je html en css nodig.
    Deze bestanden link je aan mekaar door een html bestand zo te openen.
    Ik ga stap voor stap om je menutje te maken.
    ----------------------------------------------------------------------------------------

    VOORBEREIDING!
    Maak een mapje op je bureaublad met een zelfgekozen naam.
    In dit mapje sla je straks de bestanden op die je maakt.
    ----------------------------------------------------------------------------------------

    STAP 1.
    Open notepad++ textwrangler(alleen voor mac) of dreamweaver.

    STAP 2.
    Typ het volgende in wat je html bestand word.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    </head>

    STAP 3.
    Sla het bestand op als index.html!

    STAP 4.
    Typ het volgende in je html bestand!
    <body>
    <div id="menu">
    <div id="control">
    <ul id="nav">
    <li id="tab-producten"><a href="link naar site of bestand"><b><</b></a></li><p class="menu">vorige pagina | volgende pagina</p></ul>
    <ul id="nav2">
    <li id="tab-producten"><a href="link naar site of bestand"><b>></b></a></li>
    </ul>
    </div>
    </div>
    </body>

    STAP 5.
    Maak een nieuw leeg bestand aan en sla dit op als layout.css.

    STAP 6.
    Typ het volgende in je css bestand!
    body {
    background-color: #39C;
    }

    p.menu {
    width:auto;
    height:auto;
    float:left;
    text-align:center;
    }

    a {
    text-decoration: none;
    }

    #nav a {
    width:auto;
    height:auto;
    float:left;
    display:block;
    padding:5px 10px;
    color:#fff;
    margin:10px;
    text-decoration:none;
    background:#39F url() repeat-x top left;
    }

    #nav a:hover {
    color:#333;
    padding:5px 10px;
    border-color:#666;
    background:#fff url() repeat-x top left;
    }

    #nav {
    list-style:none;
    }

    #nav2 a {
    width:auto;
    height:auto;
    float:left;
    display:block;
    padding:5px 10px;
    color:#fff;
    margin:10px;
    text-decoration:none;
    background:#39F url() repeat-x top left;
    }

    #nav2 a:hover {
    color: #333;
    padding:5px 10px;
    border-color: #666;
    background: #fff url() repeat-x top left;
    }

    #nav2 {
    list-style:none;
    }

    #menu {
    width:700px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    margin-top:10px;
    }

    #control {
    margin-left:auto;
    margin-right:auto;
    width:340px;
    height:40px;
    }

    STAP 7.
    Sla het op en je bent klaar!
    Je kunt nu de html openen met je browser.
    ----------------------------------------------------------------------------------------

    RESULTAAT.
    Schermafbeelding 2013-02-17 om 17.07.05.png

    --------------------------------------------------------------------------------------------------------------------------------
    PS:waar je het bestand aan link mag je zelf weten.
    Maar een site zoals google typ je op de plaats http://google.com
    Maar een link naar een ander html bestand typ je naam.html

    Als iets niet lukt of als je vragen hierover hebt PM me maar of reageer hieronder.

    Ben je te lui om dit te doen dan kun je de site downloaden op de volgende link -->https://mega.co.nz/#!ick2zSxD!YmdQCTi6i0-GfDXqyszFBkQGwTwvgo9zyxtmxtCGDNc<--
     
    #1
  2. Avho Redstone Miner DRC Player

    Offline
    Joined:
    Dec 16, 2012
    Messages:
    404
    super (stomme 3 woorden)
     
    #2
  3. IxDOPExI Nether Explorer DRC Veteran

    Offline
    Joined:
    Sep 30, 2012
    Messages:
    807
    gelukt ofc :D
    [​IMG]
     
    #3
  4. Charliedowns Stone Miner DRC Player

    Offline
    Joined:
    Feb 1, 2013
    Messages:
    148
    :D, dit is soort dingen vindt ik nou leuk om te lezen, stijl en document splitsen is ook mijn kijk op html en css.
    Er zit alleen wel een foutje in jouw html document, je hoort geen symbolen als < of | te gebruiken voor zinnen, want het kan verkeerd worden weergeven op sommige apparaten of oudere browsers. Gebruik liever Html codes als &#92; en &#124; om Symbolen te weergeven.

    Ikzelf heb niet lang genoeg met html gewerkt om een oogverblindende website alleen van de grond af te maken. Maar begrijp wel elke attribuut, zoals
    Code:
    <link href="layout.css" rel="stylesheet" type="text/css">
    <ul>
      <li>Voorbeeld1</li>
      <li>Voorbeeld2</li>
    </ul>
    
    waarin link href naar de stijldoc linkt, rel naar waarvoor het gebruikt moet worden, en type voor het soort document. ul geeft aan dat er een lijst moet komen, li geeft aan dat er balletjes gebruikt worden per lijstitem.
     
    #4
  5. robneng Redstone Miner DRC Player

    Offline
    Joined:
    Oct 23, 2012
    Messages:
    356
    bedankt voor die tip over &#92; en &#124 dat wist in nog niet.
    Weer wat geleerd:)
     
    #5
  6. Charliedowns Stone Miner DRC Player

    Offline
    Joined:
    Feb 1, 2013
    Messages:
    148
    #6
  7. robneng Redstone Miner DRC Player

    Offline
    Joined:
    Oct 23, 2012
    Messages:
    356
    oeh interessant ik heb er al naar gekeken en wist niet dat het bestond.

    Vraagje aan iedereen als ik nou meerdere van dit soort dingen zou maken en posten zouden jullie dat leuk vinden?
     
    #7
  8. Wender Nether Explorer DRC Veteran

    Offline
    Joined:
    Oct 4, 2012
    Messages:
    962
    Oke snap er Niks van ..
    [hoeft ook niet] :p
     
    #8
Thread Status:
Not open for further replies.