Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Codering.. goed?

None
20 antwoorden
  • Hallo allemaal,

    ben nu een tijdje bezig met divs en vroeg me af of ik het op de juiste manier aanpak…

    hier komt mij code, laat het me alstublieft weten als jullie een betere manier hebben.

    Uitkomst: [img:8ab5398efa]http://img244.imageshack.us/img244/8186/websiteju5.th.jpg[/img:8ab5398efa]




    index.php:

    [code:1:8ab5398efa]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>

    <LINK REL="stylesheet" HREF="opmaak.css" TYPE="text/css">

    </head>

    <body>

    <div id="container">

    <div id="header"></div>

    <div id="menu"><a href="index.php"><img border="0" src="images/homebutton.png" alt="Home"></a><a href="about.php"><img border="0" src="images/aboutbutton.png" alt="About"></a></div>

    <div id="content">

    <div id="content-tekst"><?php include("nieuws.html");?></div>

    </div>

    <div id="copyright"><a href="index.php"><img border="0" src="images/copyright.png" alt="Copyright"></a></div>

    </div>

    </body>

    </html>
    [/code:1:8ab5398efa]

    opmaak.css:

    [code:1:8ab5398efa]
    body
    {
    text-align: center;
    background-image: url("images/achtergrond.jpg")
    }

    #container
    {
    width: 921px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }

    #header
    {
    width: 921px;
    height: 270px;
    background-repeat: no-repeat;
    background-image: url("images/banner.png")
    }

    #menu
    {
    width: 921px;
    height: 75px;
    }

    #content
    {
    width: 921px;
    height: 670px;
    background-repeat: no-repeat;
    background-image: url("images/content.png")
    }

    #content-tekst
    {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    font-size: 90%;
    }

    #copyright
    {
    width: 921px;
    height: 70px;
    }
    [/code:1:8ab5398efa]
  • Handig om te kijken of je HTML en CSS goed is:
    - http://validator.w3.org/ (HTML)
    - http://jigsaw.w3.org/css-validator/ (CSS)

    het hoeft niet per se te betekenen als je fouten krijgt dat het niet goed is, maar andersom is natuurlijk wel meegenomen, hij kan fouten ook verbeteren.

    daarbij is een IE-tab (add-on voor Firefox) ook handig, zo kan je kijken hoe je site bij Firefox en bij IE eruit komt te zien.

    Bas

    PS: als je <title> tags bij je <head> tags zet is alles (HTML en CSS) zonder fouten volgens de validator
  • Bedankt voor je reactie, dit ga ik zeker fftjes bekijken…
    zijn er nog mensen die vinden dat dit een rare manier van coden is? of ik het beter anders kan doen?



    Wouter.
  • Er is niets mis mee, maar er staan nou nog niet echt veel om een mening over te hebben. Je hebt 4 divs onder elkaar met een container div…

    Alleen je menu kan wel op een wat beter manier worden gemaakt door gebruik te maken van een unsorted list, aangezien een menu meestal een [i:9a97568585]lijst[/i:9a97568585] met links is. Dan kan je het plaatje via je css in de achtergrond zetten en gewoon wel het woord "Home" en "About" in je lijst zetten, die kan je dan met een negatieve margin onzichtbaar maken. Dan kunnen mensen die css hebben uitstaan (screen readers) ook je menu lezen, en het is gewoon "good form".
  • achja, maar screenreader kunnen nog steeds lezen omdat er een alt atribuut is meegegeven toch?
  • Jep, maar zet je img's dan in een ul. Daarnaast is dit een plaatje dat onderdeel is van de presentatie, en dat hoort gewoon niet je html. Een plaatje dat onderdeel is van de inhoud hoort in je html, presentatie hoort in je css.
  • hm oke, maar ik krijg nooit zo'n tekst opmaak in de css of wel?… ik bedoel, als ik deze tekst zo wil houden moet ik het wel met images doen, en ik zal de images eens in ul zetten…
  • Het punt van Drewster is dat je anders naar je menu moet kijken, namelijk inhoudelijk. Het menu is inhoudelijk een lijst met navigatie-items. Stel je kunt geen afbeeldingen lezen, zoals een zoekmachine of iemand met een tekstbrowser. Dan wil je weten waar je naartoe kunt navigeren. Het handigste vanuit die bezoekers is dan een tekstuele lijst. (Voor jou is het minder handig, dat klopt.)

    De basis is dus [i:a7017b3e9a]altijd[/i:a7017b3e9a] een tekstuele lijst. [i:a7017b3e9a]Daarna[/i:a7017b3e9a] bedenk je hoe je ervoor zorgt dat het er leuk uitziet, [i:a7017b3e9a]zonder[/i:a7017b3e9a] de tekst uit de HTML te verwijderen.

    Dat zijn wel wat stapjes, want dan moet je weten:[list:a7017b3e9a][*:a7017b3e9a]hoe je een lijst opmaakt, http://css.maxdesign.com.au/listutorial/
    [*:a7017b3e9a]hoe floats werken, http://css.maxdesign.com.au/floatutorial/
    [*:a7017b3e9a]hoe je een afbeelding toont i.pv. tekst, zonder de tekst te verwijderen, http://css-tricks.com/nine-techniques-for-css-image-replacement/[/list:u:a7017b3e9a]Het is in eerste instantie dus nog wat leerwerk, maar uiteindelijk wel de manier om het zo op te lossen… De basis van je pagina is namelijk de tekst, niet de afbeeldingen. Succes :wink:
  • oke, ik begrijp het nu denk ik wel…

    maar het probleem blijft dat ik nooit dezelfde tekst opmaak kan creëren

    (nu is dit een makkelijke tekst opmaak in deze template maar ik heb ook ingewikkeldere tekst designs die echt niet zo te krijgen zijn met css)

    tenzij jullie hier anders over denken?


    anders zet ik het wel gewoon in een ul…



    Bedankt voor jullie reacties…
  • Ik krijg de indruk dat je het nog niet helemaal begrijpt. Je kan best plaatjes gebruiken in je menu, daar is niets mis mee, zolang je het zichtbaar maakt met css. In html doe je iets dergelijks:[code:1:0676d5edd0]<ul>
    <li><a href="iets.html">Home</a></li>
    <li><a href="ietsanders.html">about</a></li>
    </ul>[/code:1:0676d5edd0]Met waar nodig een id of een class. Dan zet je via css het plaatje in de achtergrond van je link, float je de li's, maakt de links block level en de zelfde maat als de plaatjes en verwijder je de tekst door middel van een negatieve [i:0676d5edd0]text-indent[/i:0676d5edd0]. Dat is naar mijn idee de meest voor de hand liggende methode. Dan kan je met css en een tweede plaatje ook nog een hover effect toe voegen…
  • kan je me een soort van voorbeeld geven hoe dit in de index en css moet komen te staan want ik krijg het niet echt voor mekaar…

    (Excuses voor het moeilijk doen :wink: )
  • wat bedoel je met block level? en hoe krijg ik die rondjes weg van li?

    sorrie voor dubbel post…
  • [quote:ef6ab0a0f1="Mr.nuub"] hoe krijg ik die rondjes weg van li?[/quote:ef6ab0a0f1]
    dat staat in de link die boelieboelie gaf: step 2 remove the bullets
    wimb
  • ik heb het geprobeerd met een ander menu, maar dit wil niet echt gaan…
    er staat wel home, maar als ik die probeer te laten verdwijnen zeg maar dan kan ik er ook niet meer op klikken, ook weet ik niet hoe ik em naar de grote van de home afbeelding kan zetten…

    [img:9d2b34ef01]http://img246.imageshack.us/img246/8828/naamloosxr5.th.jpg[/img:9d2b34ef01]

    index.php:



    [code:1:9d2b34ef01]<div id="menu">

    <ul>
    <li id="homebutton"><a href="index.php">Home</a></li>
    </ul>

    </div>[/code:1:9d2b34ef01]

    opmaak.css:

    [code:1:9d2b34ef01]#menu
    {
    width: 830px;
    height: 25px;
    background-repeat: no-repeat;
    background-image: url("images/menu.png")
    }

    #homebutton
    {
    list-style-type: none;
    float: left;
    margin-left: -20px;
    }[/code:1:9d2b34ef01]
  • Ik denk dat dat mijn fout is, je haalt de text uit beeld met een negatieve text-indent en natuurlijk niet met een negatieve margin (natuurlijk wel op de <a> en niet op de <li>;).
  • kun je mijn code met dat stukje aanpassen want ik krijg het niet voor mekaar… ook zij je dat je de grote kan aanpassen naar die van de button, dat heb ik niet kunnen vinden (of ik heb et verkeerd begrepen)…


    Nog bedankt voor je reactie…
  • Okay, kijk maar wat je hier mee kan, je kan het gewoon in notepad kopieren en dan opslaan als iets.html en dan kan je het openen in je browser. [code:1:577cc2cca8]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">

    <html>
    <head>
    <title>Menu voorbeeld</title>
    <style type="text/css">
    #menu ul {
    padding: 0; margin: 0;
    width: 830px;
    height: 25px;
    border: 1px solid red;
    background: url("images/menu.png") no-repeat;
    }

    #menu li {
    padding: 0; margin: 0;
    list-style-type: none;
    float: left;
    }

    #menu ul li a {
    text-indent: -999em;
    display: block;
    height: 23px;
    width: 150px;
    border: 1px solid red;
    background: url(homeplaatje.png) no-repeat;
    }
    #about a {
    background-image: url("aboutplaatje.png");}
    #contact a {
    background-image: url("contactplaatje.png");}
    #sitemap a {
    background-image: url("sitemapplaatje.png");}

    </style>
    </head>
    <body>
    <div id="menu">

    <ul>
    <li id="home"><a href="#">Home</a></li>
    <li id="about"><a href="#">About</a></li>
    <li id="contact"><a href="#">contact</a></li>
    <li id="sitemap"><a href="#">sitemap</a></li>
    </ul>
    </div>
    </body>
    </html>
    [/code:1:577cc2cca8]De borders zitter er alleen in zodat je kan zien waar de elementen zich bevinden. De plaatjes van de afzonderlijke buttons zet je dus als achter grond van links.
  • heel erg bedankt, het is gelukt… nou erger ik me wel heel erg aan deze rode border die firefox geeft als je op de buttons klikt…

    [img:cf476b1c5d]http://img300.imageshack.us/img300/5030/naamloostt9.th.jpg[/img:cf476b1c5d]

    in internet explorer geeft hij dat niet, is hier een oplossing voor? want ik vind het wel lelijk want nu lijkt het net alsof je op 2 buttons tegelijk klikt zeg maar…


    bedankt voor je hulp…


    codering:

    iets.html
    [code:1:cf476b1c5d]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">

    <html>
    <head>
    <title>Menu voorbeeld</title>
    <style type="text/css">
    #menu ul {
    padding: 0; margin: 0;
    width: 830px;
    height: 25px;
    background: url("menu.png") no-repeat;
    }

    #menu li {
    padding: 0; margin: 0;
    list-style-type: none;
    float: left;
    }

    #home a {
    text-indent: -999em;
    display: block;
    height: 25px;
    width: 80px;
    background: url(homebutton.png) no-repeat;
    }
    #about a {
    text-indent: -999em;
    display: block;
    height: 23px;
    width: 80px;
    background: url(aboutbutton.png) no-repeat;
    }

    </style>
    </head>
    <body>
    <div id="menu">

    <ul>
    <li id="home"><a href="iets.html">Home</a></li>
    <li id="about"><a href="iets.html">About</a></li>
    </ul>
    </div>
    </body>
    </html> [/code:1:cf476b1c5d]
  • Die stippel lijntjes doet firefox altijd, je kan alleen wel de kleur veranderen met de css pseudo-classes :link, :visited, :active en :focus en de "color" eigenschap, zie hier voor meer info over pseudo-classes in het algemeen.
  • ja mja goed, hij doet het bij 2 buttons tegelijk als je er op 1 klikt zeg maar en bij m'n andere manier niet :)

    iig bedankt, maar lijkt het jouw dan ook niet mooier het gewoon als image te laden in de html in een lu want dan heb ik het gewoon netjes…

    (ik zie het trouwens ook niet veel zo'n hele lijn om 2 buttons als je alleen op home klikt)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.