[html] Tekst in tabellen begint niet boven.

[Verwijderd]

Hallo allemaal.

Ik ben al 2 weken bezig om een website te maken voor een stichting hier in lelystad.

Ik kom nu steeds tegen het zelfde probleem.


Ik heb de website gemaakt in tabellen.
Maar als ik in een tabel tekst zet begint het niet links boven maar gewoon in het midden.


Wat doe ik fout?


Eerst ging het wel goed.
Maar toen ik meer tekst erin deed ging het allemaal verkeerd en is de website nu op elke pagina anders.

De nieuwste versie van wat ik heb zet ik zo online.


Linkje komt hier: http://www.yigit.nl/inanc/osmanicamii/yeniwebsite/index1.htm

Ps. Ik ben nog aan het uploaden.


Wat is dus verkeerd:
Als je op de 'anasayfa' klikt dan zie je in een witte vakje links staan: 'Osmanli camisi Websitesine hosgeldiniz...'.
Maar die tekst staat gewoon in het midden i.p.v. boven...

[ Voor 24% gewijzigd door Verwijderd op 12-11-2005 13:19 ]

[TheDane]

code:

<td style="vertical-align: top;">blaat</td>

[Victor]

Zet op die cel eens een "vertical-align: top". Dat zou het probleem oplossen.

Hoewel offtopic, wil ik het toch graag even kwijt:
Probeer deze site eens zonder tabellen te maken, en in plaats daarvan door middel van semantisch correcte HTML en de bijbehorende CSS. En haal alsjeblieft die achtergrondmuziek weg, het maakt de site onnodig zwaar en niemand zit er echt op te wachten.

[André]

www.w3schools.com?

[Verwijderd]

King_Louie schreef op zaterdag 12 november 2005 @ 13:23:
Zet op die cel eens een "vertical-align: top". Dat zou het probleem oplossen.

Hoewel offtopic, wil ik het toch graag even kwijt:
Probeer deze site eens zonder tabellen te maken, en in plaats daarvan door middel van semantisch correcte HTML en de bijbehorende CSS. En haal alsjeblieft die achtergrondmuziek weg, het maakt de site onnodig zwaar en niemand zit er echt op te wachten.

Bedankt voor die 2de tip(ook voor de 1ste)
Maar ik heb nooit met CSS gewerkt.
Ik ben nog een kleine jongen van 15 jaar die al 5 jaar met html aan het knokken is..
Het enige wat ik qua vorm geving kan is div en tabel.

Maar het is gelukt wat mijn probleem was...
Dus probleem is opgelost en slotje graag...

[TRiXeS]

Verwijderd schreef op zaterdag 12 november 2005 @ 13:30:
[...]
Ik ben nog een kleine jongen van 15 jaar die al 5 jaar met html aan het knokken is..
Het enige wat ik qua vorm geving kan is div en tabel.

Aangezien ik zelf ook 15 ben en toch ook al ruim een aantal jaren bezig ben met Photoshop/HTML/CSS/PHP (heb ook een eigen website en maak websites) vind ik niet dat je als excuus kan hebben dat je pas 15 jaar bent.

Het heeft gewoon te maken met de ervaring die opdoet. Het is handig om ook eens te kijken op bijvoorbeeld deze site: http://www.handleidinghtml.nl/. Hier vind je precies wat je in elk HTML-element in kan voeren. De site heeft ook een CSS gedeelte.

[Lawrentium]

King_Louie schreef op zaterdag 12 november 2005 @ 13:23:
Zet op die cel eens een "vertical-align: top". Dat zou het probleem oplossen.

Hoewel offtopic, wil ik het toch graag even kwijt:
Probeer deze site eens zonder tabellen te maken, en in plaats daarvan door middel van semantisch correcte HTML en de bijbehorende CSS. En haal alsjeblieft die achtergrondmuziek weg, het maakt de site onnodig zwaar en niemand zit er echt op te wachten.

Waarom hoor ik dit vaker over tabellen? Ik dacht juist dat een tabel de manier was om een site zijn 'vorm' te geven. Wat zijn de argumenten hier tegen?

[danslo]

Lawrentium schreef op zaterdag 12 november 2005 @ 14:14:
[...]

Waarom hoor ik dit vaker over tabellen? Ik dacht juist dat een tabel de manier was om een site zijn 'vorm' te geven. Wat zijn de argumenten hier tegen?

Tabellen zijn over het algemeen bedoeld om simpel gegevens in een tabel te laten zien als ik me niet vergis. Niet om een layout vorm te geven. Hiervoor gebruik(en) je(we) div's icm css

[Verwijderd]

zie http://www.w3.org/TR/html401/struct/tables.html#h-11.1

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

een table is er gewoon niet voor bedoeld, net zoals je je pagina ook niet "vormgeeft" met alleen maar h1's of div's

lees ook eens: http://www.w3.org/TR/html401/intro/intro.html

[ Voor 8% gewijzigd door Verwijderd op 12-11-2005 14:19 ]

[Verwijderd]

cls schreef op zaterdag 12 november 2005 @ 14:17:

Tabellen zijn over het algemeen bedoeld om simpel gegevens in een tabel te laten zien als ik me niet vergis. Niet om een layout vorm te geven. Hiervoor gebruik(en) je(we) div's icm css

Gewoon HTML elementen dus. Maar wel de elementen die het best beschrijven wat ze voor gegevens bevatten. En dan zijn divs zo ongeveer het minst beschrijvend, en daarom wel geschikt om stukken van de pagina te groeperen, maar niet geschikt om te gebruiken voor specifieke dingen.

Tabellen gebruik je bijvoorbeeld voor een tabel met gegevens, zoals specificaties, eigenschappen, overzichten.

Paragrafen (alinea's) gebruik je voor teksten, nadruk leg je met <em> en <strong>, die helemaal niets met schuingedrukt of vet te maken hebben. Dat zijn toevallig de 2 gekozen standaard manieren om een beetje en veel nadruk te leggen. Had ook gekund met vetgedrukt en rood+vetgedrukt.

HTML heeft eigenlijk weinig te maken met hoe iets weergegeven gaat worden. Dat gebeurt aan de hand van een standaard stylesheet (in de browser ingebouwd), gelinkte stylesheets (door de author) en user stylesheets (van de eindgebruiker). Die laatste komen niet zoveel voor, en daar hoef je ook niet heel veel rekening mee te houden, tenzij je hele gekke dingen gaat doen.

En in die standaard stylesheet staat bijvoorbeeld dat een em schuingedrukt is, een blockqoute is ingesprongen, en een paragraaf een bepaalde marge heeft.

Als je betekenis en weergave in je hoofd uit elkaar kunt houden, kun je dat met HTML ook wel.

En dan zul je meteen moeten concluderen dat het gebruik van tabellen voor het grootste deel van de layout helemaal nergens op slaat. Dat doe je alleen als je heel erg expliciet websites moet bouwen die er in bijna alle browsers (ook hele oude) exact hetzelfde uitziet.

[Victor]

Verwijderd schreef op zaterdag 12 november 2005 @ 13:30:
[...]


Bedankt voor die 2de tip(ook voor de 1ste)
Maar ik heb nooit met CSS gewerkt.
Ik ben nog een kleine jongen van 15 jaar die al 5 jaar met html aan het knokken is..
Het enige wat ik qua vorm geving kan is div en tabel.

Als je nog nooit met CSS gewerkt hebt, dan is dit een mooi moment om daar mee te beginnen

Hieronder zie je een voorbeeld van hoe je de opmaak van jouw pagina in correcte HTML en CSS zou kunnen maken. Hierbij heb ik lists gebruikt om de menu's mee op te maken, en wat eenvoudige CSS om het een en ander op z'n plek te zetten.

Twee puntjes die even wat extra aandacht krijgen:
- Zoals je ziet geef ik als "lang" attribuut van de HTML tag "tr-TR" mee. Dit omdat, als ik me niet vergis, die pagina die je aan het maken bent in het Turks is. Door dit soort informatie mee te geven kunnen bijvoorbeeld zoekmachines jouw pagina beter vinden. Als iemand zoekt naar een pagina in het Turks zal jouw pagina gevonden worden. Maak je ook een Nederlandstalige versie, dan verander je tr-TR in nl-NL.
- Ik heb de stylesheet nu in de pagina zelf gezet, deze zou je normaal gesproken in een los bestand zetten, en koppelen via <link rel="stylesheet" href="url_naar_stylesheet" type="text/css" />. Door het in een los bestand te zetten kun je eenvoudig op één plaats de opmaak van heel je site aanpassen, en bovendien kan een browser dit bestand cachen, waardoor je pagina's sneller zullen laden.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr-TR" lang="tr-TR">

    <head>
        <title>Titel</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            body {
                color: #fff;
                background-color: #048;
                font: small Verdana, Tahoma, Arial, Sans-Serif;
            }
            
            h1 {
                margin: 0px 0px 10px;
            }
            
            h2 {
                margin: 0px;
            }
            
            a {
                color: #fff;
                font-weight: bold;
                text-decoration: none;
            }
            
            a:hover {
                text-decoration: underline;
            }
            
            #wrapper {
                width: 760px;
                margin: 0px auto;
            }
            
            #hoofdmenu {
                margin: 0px;
                padding: 0px;
                list-style-type: none;

            }
            
            #hoofdmenu li {
                width: 150px;
                float: left;
            }            
            
            #submenu {
                width: 150px;
                margin: 20px 0px 0px;
                padding: 0px;
                list-style-type: none;
            }
            
            #submenu li {
                clear: both;
            }
            
            #content {
                width: 600px;
                margin-top: 20px;
                float: right;
                text-align: justify;
            }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <h1>Logo</h1>
            <ul id="hoofdmenu">
                <li><a href="#">Link 1</a>
                    <ul id="submenu">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                        <li><a href="#">Link 5</a></li>
                        <li><a href="#">Link 6</a></li>
                        <li><a href="#">Link 7</a></li>
                        <li><a href="#">Link 8</a></li>
                    </ul>
                </li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
            <div id="content">
                <h2>Voorbeeldtekst</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed mi. Nunc bibendum enim non orci. Quisque dictum, enim non bibendum fermentum, erat magna scelerisque dolor, non faucibus eros nunc sit amet metus. Curabitur dignissim tincidunt lectus. Mauris ac orci id eros malesuada vulputate. Duis eu sem a ante consectetuer sollicitudin. Nulla fermentum dolor et pede. Etiam et sem at elit scelerisque congue. Cras nec neque quis purus pulvinar consectetuer. Nam in lacus. Duis iaculis, nunc nec vulputate pretium, nibh augue sollicitudin nisl, a pharetra turpis est at lectus. Mauris venenatis leo id turpis. Vivamus at arcu. Phasellus posuere, neque ut viverra dictum, dui elit sagittis est, vel nonummy nibh felis nec augue. Duis sed metus. Donec mauris mi, lacinia eget, auctor euismod, blandit id, nisl. Duis sollicitudin, dui non blandit porttitor, tortor sem posuere leo, non facilisis augue justo id dui. Etiam tellus. Sed nibh augue, luctus nec, pharetra vel, consequat et, ligula.</p>
            </div>
        </div>
    </body>
    
</html>

[XangadiX]

nou fijn dat we het allemaal met elkaar eens zijn en dat iedereen vind dat de topic starter eens naar CSS en divjes moet gaan kijken. Het is echter niet de bedoeling dat we hier elkaars site gaan lopen maken, dat kun je beter via de mail doen (hoe lief ik het ook vind )