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)

<table>naar <div>

None
37 antwoorden
  • Ik heb eigenlijk altijd mijn website-layouts met <table> opgezet. Werkte allemaal harstikke leuk en aardig, maar nu hoor ik ineens een nieuw fenomeen: <div>. Ik wist wel dat ze bestonden, maar wat ze deden?? :wink: Dus ik ga wat googlen, maar de meeste resultaten komen van mensen die wel weten hoe div's werken, en er allemaal moeilijke dingen mee willen doen. Ik wil echter gewoon weten hoe je een <table> layout 'omzet' (niet letterlijk natuurlijk, wel aangepast aan de <div>-regeltjes etc) naar een <div> layout. Kan iemand mij hiermee helpen?
    Ik bedoel een layout als bijv heel simpel:
    [code:1:2f23a53278]
    <table>
    <tr>
    <td colspan=2>Headertje</td>
    </tr>
    <tr>
    <td>Navigatiemenuutje</td>
    <td>Main paginatje</td>
    <tr>
    <tr>
    <td colspan>onderkantje</td>
    <tr>
    </table>[/code:1:2f23a53278]
    Ik kan css dus dat is niet het probleem.
  • Verstandig besluit, tabellen zouden niet voor layout gebruikt moeten worden.
    Antwoord op je vraag is lastiger, vooral omdat je zelf het antwoord eigenlijk al geeft: CSS.

    Als je je layout met blocklevel elements gaat regelen (zoals div) dan ontkom je niet aan CSS want daarmee positioneer je je elementen op de plek waar je ze wilt hebben. Dus je vraag zou meer moeten zijn: hoe gebruik ik CSS om mijn layout te regelen. En dat is niet in twee regels uit te leggen.

    Je zal veel gebruik gaan maken van float, om een element de goeie kant op te sturen, width en eventueel height om ze een afmeting te geven en padding en margin om de juiste onderlinge afstanden in acht te nemen.

    Verder is het belangrijk dat je een goeie doctype boven je pagina zet, zo voorkom je (o.a.) dat CSS anders geinterpreteerd wordt in verschillende browsers.

    Kijke hier eens hoe ze het daar hebben gedaan:
    http://www.code-sucks.com/css%20layouts/
  • ah beetje kloten helpt goed! het werkt nu eigenlijk zoals ik het wil :D
    http://sanchises.x10hosting.com/Type/index.php
    http://sanchises.x10hosting.com/Type/index.css
    Ik denk dat ik er zo wel uitkom, als dat niet zo blijkt te zijn vraag ik nog wel eventjes.
    Toch bedankt! :wink:
  • Als je besluit om je table layouts de deur uit te gooien in het ook handig om naar semantisch gebruik van je html elementen te kijken. Hier staat er wel een mooi artikel over, al meer dan 4 jaar oud maar nog heel bij de tijd.
  • Anne van Kesteren hoort sowieso in je bookmarks te staan als je je bezig houdt met webdesign ;-)
  • Hij heeft idd een interessant weblog, maar een beetje te diepgravend voor iemand met maar een zijdelingse interesse…
  • wat heeft dat semantische structurering van toepassing op mijn site? Voor zover ik weet staat er alleen nog een lipsumpje op… maar ik ben inderdaad niet altijd even semantisch bezig (altijd even niet… :wink: ) maar hoe je dat weet…..
    edit: en wat houdt display: inline; in?
  • [quote:f1eba7d9e5="sanchises"]wat heeft dat semantische structurering van toepassing op mijn site? Voor zover ik weet staat er alleen nog een lipsumpje op… maar ik ben inderdaad niet altijd even semantisch bezig (altijd even niet… :wink: ) maar hoe je dat weet…..[/quote:f1eba7d9e5]
    Je hebt er b.v. alleen maar divs in staan. De tekst 'Webdesign en scripting' zou je b.v. in een <H1> kunnen zetten ipv op een afbeelding. Verder staat er inderdaad nog niet veel. Je kunt met <p> paragrafen maken ipv met <br /> en als je subkopjes maakt zou ik daar <h2> of <h3> voor gebruiken. Dit om maar een paar dingen te noemen
    [quote:f1eba7d9e5]
    edit: en wat houdt display: inline; in?[/quote:f1eba7d9e5]
    The element will be displayed as an inline element, with no line break before or after the element
  • [quote:8741bbb3a8="sanchises"]wat heeft dat semantische structurering van toepassing op mijn site? [/quote:8741bbb3a8]Nou ja, het gebruik van een table voor layout kan natuurlijk niet als je html semantisch gebruikt…dat was eigenlijk de eerste aanwijzing, en zoals Gooly zei heb je in de kleine hoeveelheid dat er al stond geen enkel sementisch element gebruikt. Daarnaast zijn mensen die tables voor layout gebruiken vaak ook niet al te veel bezig met semantiek… en als ze dan overstappen naar div's gaan ze eigenlijk alleen maar heel veel div's gebruiken waar veel van die div's vervangen zouden kunnen worden door elementen die semantische informatie geven.
  • Let ook op het verschil tussen [i:e1e17e0ccc]syntax[/i:e1e17e0ccc] en [i:e1e17e0ccc]semantiek[/i:e1e17e0ccc]. Eerstgenoemde is niets meer en niets minder dan dat je geldig html schrijft. Belangrijk, absoluut! Maar niet wat de doorslag geeft in (met name) zoekmachines. De semantiek (of betekenis) van de code is iets wat door veel zoekmachines geïnterpreteerd en benaderd wordt. Slechte semantiek leidt dan ook onherroepelijk tot slechtere resultaten in zoekmachines.

    - Bas
  • ja zover was ik al wel :wink: maar verder dan <h1> en <p> kom je toch niet? Of is er een vergelijkbare tag als <div> die je voor headers moet gebruiken? etc etc.
  • [quote:a193800d6f="sanchises"]ja zover was ik al wel :wink: maar verder dan <h1> en <p> kom je toch niet?[/quote:a193800d6f]Ehm, en zo ongeveer alle andere html-tags… ;) [quote:a193800d6f="sanchises"]Of is er een vergelijkbare tag als <div> die je voor headers moet gebruiken? etc etc.[/quote:a193800d6f]Nee, dat is niet helemaal het punt. Het gaat er eigenlijk meer om dat je het gebruik van div en span zo veel mogelijk moet vermijden, probeer je uiterlijk te regelen door CSS toe te passen op de standaard html-tags met een id of class. Pas als dat niet mogelijk blijkt of te ingewikkeld wordt, dán ga je tags groeperen mbv div of span. Schoolvoorbeelden hiervan zijn container-divs voor de hele pagina, voor een menu en voor de inhoud. Div's zijn een hulpmiddel om iets te bereiken, het gebruik ervan is geen doel op zichzelf.

    - Bas
  • dus kan ik zoiets als dit doen:

    index.php:
    [code:1:f4ac1dde74]
    <h1 class="headertje"></h1>
    [/code:1:f4ac1dde74]
    index.css:
    [code:1:f4ac1dde74]
    .headertje{
    width=600px;
    height=100px;
    background-image:url("/img/header.jpg")
    }[/code:1:f4ac1dde74]
  • Ja.

    - Bas
  • Yup, of
    [code:1:0c69520d5f]
    h1.headertje{ …
    [/code:1:0c69520d5f]
    of
    [code:1:0c69520d5f]
    .mainmenu li {
    margin: 0px;
    padding: 0px;
    list-style-type:none;
    display:block;
    float:left;
    }

    [/code:1:0c69520d5f]
    en ik heb (m.b.v. enkelen van dit forum) zelfs rollovers gemaakt met CSS (dus zonder javascript)
    [code:1:0c69520d5f]
    a.reiziger:hover {
    background-image: url(images/sprite_reiziger.jpg);
    background-position: 96px 0px;
    text-decoration: none;
    width:96px;
    height:96px;
    margin: -22px -22px;
    z-index:2;
    }
    [/code:1:0c69520d5f]

    Overigens zit je wel op de goeie weg hoor. In het begin maakte ik ook mijn layouts met tabellen. Toen dacht ik "Nee, ik moet CSS gebruiken" dus ik ging alles in DIV's gooien en vervolgens met CSS kijken hoe ik het goed kon krijgen.
    Tegenwoordig doe ik gewoon mijn HTML ding en bekijk dan later welke CSS ik nodig heb om het er uit te laten zien zoals ik wil.
  • [quote:5e8ac883eb][code:1:5e8ac883eb].mainmenu li {
    margin: 0px;
    padding: 0px;
    list-style-type:none;
    display:block;
    float:left;
    } {[/code:1:5e8ac883eb][/quote:5e8ac883eb]
    wat staat voor?
    de margin, padding, float en display snap ik, maa rdie list-style-type en mainmenu li?
  • [quote:fbf47dc003="sanchises"]
    wat staat voor?
    de margin, padding, float en display snap ik, maa rdie list-style-type en mainmenu li?[/quote:fbf47dc003]
    .maimenu is maar de label van een class die ik zelf heb verzonnen, het gaat om de li (list item)
    met list-style-type regel je het uiterlijk van de bullets in een unordered list. In dit geval: none. Geen bullets dus.
  • dus ipv h1.classje{ schrijf je classje h1, bedoel je dat?
  • [quote:1c7eb9fcd8="sanchises"]dus ipv h1.classje{ schrijf je classje h1, bedoel je dat?[/quote:1c7eb9fcd8]
    Ja en nee. Het is beide goeie CSS, maar het zijn wel twee verschillende dingen

    h1.classje {bla;}
    Is de stijl voor een h1 element dat je als classje aanmerkt
    <h1 class="classje"></h1>

    .classje h1 {bla;}
    Is de stijl voor een h1 element die in een sectie voorkomt die als classje is aangemerkt.
    <div class="classje">
    <h1></h1>
    </div>
  • nog een vraag: wat is span?

Beantwoord deze vraag

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