Wat is de web 2.0 variant hiervan?

[Onbekend]

Ik heb een kleine website gemaakt met daarin een menu.

code:

<div class="MenuItems">
    <table ><tr>
        <td>
            <a class="MenuChoise" href="index.php?Page=MenuItem1">
                <img class="MenuButton" src="images/MenuItem1.gif" alt="MenuItem1">
            </a><br>MenuItem1
        </td><td>
            <a class="MenuChoise" href="index.php?Page=MenuItem2">
                <img class="MenuButton" src="images/MenuItem2.gif" alt="MenuItem2">
            </a><br>MenuItem2
        </td><td>
            <a class="MenuChoise" href="index.php?Page=MenuItem3">
                <img class="MenuButton" src="images/MenuItem3.gif" alt="MenuItem3">
            </a><br>MenuItem3
        </td>
    </tr></table>
</div>

Ik heb hier in het voorbeeld het aantal items verkort tot drie. De plaatjes hebben een grootte van 66x66 pixels.

Dit is de bijbehorende css:

code:

div.MenuItems {
position:                           absolute; 
    width:                                  768px;  
    margin:                                 64px auto auto 32px;
    padding:                                8px; 
    background-color:           #FFFFFF; 
    font-size:                          small;
    font-family:                        "times";
    text-align:                         center;
}

a.MenuChoise {
    position:                               relative;
    margin-left:                        28px; 
    margin-top:                         8px;    
    margin-right:                       28px; 
    margin-bottom:                  8px; 
    text-decoration:                none;
    border-width:                   0px;
}

img.MenuButton {
    margin:                                 0px; 
    padding:                                0px;
    border-width:                   0px;
    vertical-align:                 top;
}

table {
    margin:                                 0px;
    padding:                                0px;
    border-width:                   0px; 
}

td {
    margin:                                 0px;
    padding:                                0px;
}

Nu is het gebruik van tables een beetje achterhaald, en ik had gehoopt dat ik dit ook met <div>-tags kon doen.
Alleen de plaatjes of juist alleen de teksten naast elkaar neerzetten lukte mij nog wel. Maar als ik er teksten onder die plaatjes zette ging de uitlijning helemaal de mist in. Het plaatje van volgende menu item werd op de hoogte van de vorige tekst gezet, met als gevolg dat het menu een soort trappetje leek. Dit gebeurde zowel in FF3 als in IE7, dus het had waarschijnlijk met mijn code te maken.
Ik heb verder geen website gevonden die zo'n soort menu heeft en geen gebruik van tabel maakte.

Is het überhaupt wel mogelijk om zo'n menu netjes uit te lijnen zonder <table>-tags?

[Juup]

van tables naar divs is semantisch gezien geen vooruitgang.
Gebruik dan bijvoorbeeld seen <ul/> ofzo.

Als je dat trappetjes effect krijgt komt dat meestal door gebruik van float. Niet doen dus.

Heb je een compleet (online) voorbeeld van wat er mis gaat?

[posttoast]

Juup schreef op zondag 30 november 2008 @ 15:11:
van tables naar divs is semantisch gezien geen vooruitgang.
Gebruik dan bijvoorbeeld seen <ul/> ofzo.

Als je dat trappetjes effect krijgt komt dat meestal door gebruik van float. Niet doen dus.

Heb je een compleet (online) voorbeeld van wat er mis gaat?

Het is semantisch gezien wel een heel klein beetje een vooruitgang natuurlijk. Tables zeggen iets over de data wat niet klopt (het is geen tabeldata), <div>'s hebben überhaupt geen semantische waarde.

Maar inderdaad, een unordered list is hier de beste oplossing.

[Noork]

Wat is jouw definitie van 'web 2.0'?

[posttoast]

Hiermee kom je een eind denk ik: http://h-master.net/web2.0/

[Zakkenwasser]

Lees wat boeken over web2.0 en je weet pas echt hoe je je site klaarstoomt voor web2.0

succes!

[Verwijderd]

Waarom nog met web2.0 bezig blijven als web2.5 er al binnen een paar maanden aankomt?

[Onbekend]

Bedankt voor de reacties. Na wat experimenteer-en testwerk heb ik het dankzij de unordered list toch voor elkaar gekregen. Ik kwam er ook achter dat een <br> in een <a>-tag ook niet altijd helemaal lekker werkt.

De goede code voor de liefhebbers:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    
    <style type="text/css">
    .menu ul {
    list-style: none;
    padding:        0px;
    }
    
    .menu ul li {
    float:left;
    }
    
    .menu ul li a {
    display:        block;
    text-align: center;
    }
    
    .menu li {
        padding:    2px;
        margin:     2px;
    }

    .menu {
        margin:         0px auto 0px auto;
        width:                                  400px; 
        background-color:           #DDDDDD; 
    }   

    body {
        margin:                                 0px; 
        width:                                  800px;
        background-color:           #EEEEEE; 
    }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="index.php?Page=MenuItem1"><img class="MenuButton" src="MenuItem.gif" alt="MenuItem1"></a>Menu Item 1</li>
            <li><a href="index.php?Page=MenuItem2"><img class="MenuButton" src="MenuItem.gif" alt="MenuItem2"></a>Menu Item 2</li>  
            <li><a href="index.php?Page=MenuItem3"><img class="MenuButton" src="MenuItem.gif" alt="MenuItem3"></a>Menu Item 3</li>  
        </ul>
    </div>
</body>

Noork schreef op zondag 30 november 2008 @ 15:48:
Wat is jouw definitie van 'web 2.0'?

Web 2.0 code is dus geen tables gebruiken voor de lay-out.

Verwijderd schreef op zondag 30 november 2008 @ 17:28:
Waarom nog met web2.0 bezig blijven als web2.5 er al binnen een paar maanden aankomt?

Waarom een website een paar maanden lang uitstellen terwijl het met een iets andere code meteen online gezet kan worden?

[posttoast]

Onbekend schreef op zondag 30 november 2008 @ 17:57:
Bedankt voor de reacties. Na wat experimenteer-en testwerk heb ik het dankzij de unordered list toch voor elkaar gekregen. Ik kwam er ook achter dat een <br> in een <a>-tag ook niet altijd helemaal lekker werkt.

Het is wel goed om hier even wat leeswerk over te verrichten. Een <a>-element is niet blocklevel (net zoals een hoop andere elementen dat niet zijn). Dat betekent inderdaad dat een <br> (of een <h1>, <hr>, enz.) daar niet in mag.

[DoubleJ]

Web 2.0 is een buzzword, de term waar jij naar op zoek bent is semantiek.

[Onbekend]

posttoast schreef op zondag 30 november 2008 @ 18:06:
[...]

Het is wel goed om hier even wat leeswerk over te verrichten. Een <a>-element is niet blocklevel (net zoals een hoop andere elementen dat niet zijn). Dat betekent inderdaad dat een <br> (of een <h1>, <hr>, enz.) daar niet in mag.

Ik had er eigenlijk nooit bij stilgestaan dat een linebreak een block-element is, maar nu je het zegt klink het helemaal niet zo vreemd.

[Zakkenwasser]

Verwijderd schreef op zondag 30 november 2008 @ 17:28:
Waarom nog met web2.0 bezig blijven als web2.5 er al binnen een paar maanden aankomt?

is web2.0 dan niet bedoeld om semantiek correct geschreven te worden?
of heet dat dan toch wel web2.5

[Cubix]

Ik ken de inhoud van die knop-plaatjes niet, maar je zou kunnen overwegen deze als background op het a-element te zetten wanneer deze afbeelding voor alle knoppen gelijk is.

Wanneer die afbeeldingen specifiek zijn voor elke knop is de gebruikte methode de beste.

[Verwijderd]

Vanuit de gedachte "content en semantiek (html) scheiden van opmaak (css)" gebruik je ook het beste externe stylesheets i.p.v. de css in de head te plaatsen. Dit maakt je html-code compacter, doordat de css slechts eenmalig wordt gedownload wordt je site sneller.

[Herko_ter_Horst]

MrJey schreef op maandag 01 december 2008 @ 10:00:
is web2.0 dan niet bedoeld om semantiek correct geschreven te worden?
of heet dat dan toch wel web2.5

Even los van het feit dat "Web 1.0", "Web 2.0" en "Web 3.0" m.i. loze kreten zijn: "semantisch" correcte HTML is gewoon Web 1.0, namelijk HTML zoals HTML bedoeld is.

"Web 2.0" is vanuit technisch oogpunt vooral het meer op een "gewone" applicatie laten lijken van een web applicatie (d.m.v. technieken als bijv. AJAX). Vanuit functioneel oogpunt zijn het vooral "social networking" en "user generated content" die het verschil maken met het "statische" Web 1.0.

"Web 3.0" is gerelateerd aan het Semantic Web (wat overigens niets te maken heeft met "semantische" HTML), dat de geautomatiseerde interactie tussen applicaties wil bevorderen door semantiek in de vorm van metadata toe te voegen.

[Verwijderd]

Mijns inziens draait Web 2.0 vooral om het betrekken van internetgebruikers bij de invulling van websites, dus tweerichtingsverkeer. Daarvoor hoef je niet per se AJAX of semantische HTML voor te gebruiken.

Maar dit is allemaal behoorlijk offtopic.

[xzaz]

Verwijderd schreef op zondag 30 november 2008 @ 17:28:
Waarom nog met web2.0 bezig blijven als web2.5 er al binnen een paar maanden aankomt?

Is er tegenwoordig ook al release date vaan een nieuwe web versie?

[BtM909]

Modbreak:

En klaar met de onzinnige grappig bedoelde opmerkingen
offtopic gaat gewoon lekker op IRC of via DM.

[Janoz]

Onbekend schreef op zondag 30 november 2008 @ 17:57:
De goede code voor de liefhebbers:
...

Waarom heb je die div er nog omheen staan? Je kunt je ul natuurlijk ook gewoon de class menu geven.

[Onbekend]

Cubix schreef op maandag 01 december 2008 @ 10:03:
Ik ken de inhoud van die knop-plaatjes niet, maar je zou kunnen overwegen deze als background op het a-element te zetten wanneer deze afbeelding voor alle knoppen gelijk is.

Wanneer die afbeeldingen specifiek zijn voor elke knop is de gebruikte methode de beste.

Ze zijn allemaal verschillend. Maar om te testen en als voorbeeld had ik even het zelfde plaatje gebruikt.

Verwijderd schreef op maandag 01 december 2008 @ 10:10:
Vanuit de gedachte "content en semantiek (html) scheiden van opmaak (css)" gebruik je ook het beste externe stylesheets i.p.v. de css in de head te plaatsen. Dit maakt je html-code compacter, doordat de css slechts eenmalig wordt gedownload wordt je site sneller.

Klopt. Op de website zelf doe ik dat ook. Maar om te testen had ik het even in de html gezet.
De complete css code is vele malen groter en dan verlies je ook een beetje het overzicht.

Janoz schreef op maandag 01 december 2008 @ 14:32:
[...]

Waarom heb je die div er nog omheen staan? Je kunt je ul natuurlijk ook gewoon de class menu geven.

Die div gebruik ik voor de uitlijning op de website zelf. In deze code is dat niet per se nodig en kan het ook zonder div.