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)

[CSS] Linker tabel boven in zetten

Anoniem
None
13 antwoorden
  • Hey luitjes!

    Ik ben een standaard (zeer simpele) website in elkaar aan het zetten voor school. Nu heb ik de lay-out via een in-document css gemaakt. (weinig pagina's, vind ik op deze manier wel handig) Maar ik stuit nu op een probleem. De linkertabel zit in het midden, en wat ik ook probeer, hij blijft in het midden zitten. Ik weet niet hoe ik het moet oplossen. Hieronder post ik de broncode.

    [quote:e3d3760876]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!– ©2008 Wellinga Kantoorpartners BV. Design & code by: Robert Arends –>
    <html>
    <head>
    <title>Default</title>
    <style type="text/css">
    <!–

    TH.een {
    background-color: #DDDDDD;
    text-align: center;
    font-weight: bold;
    border: ridge 2pt
    } /* adds background color to the appointed cells with text alignment, sets font to bold, and adds a border */

    TH.twee {
    background-color: #DDDDDD;
    text-align: center;
    font-weight: normal;
    font-size: 14px;
    empty-cells: hide;
    border: ridge 2pt;
    vertical-align: middle
    } /* gives background color to the main header cells and adds a border */

    TABLE {
    border-collapse: collapse;
    empty-cells: none;
    margin-left: auto;
    margin-right: auto;
    position: static;
    vertical-align:top
    }

    TH {
    vertical-align: baseline
    }

    TD.one {
    background-color:#DDDDDD;
    vertical-align: middle;
    border: ridge 2pt
    }

    TD.two {
    vertical-align: middle;
    background-color: #999999;
    margin-top: 0px;
    }

    CAPTION {
    border-collapse: collapse;
    empty-cells: show;
    background-color:#DDDDDD;
    vertical-align: middle;
    border: ridge 2pt
    }

    body {
    margin: 2em
    }

    img {
    float:left
    }

    body, p, img {
    margin: 2em
    }

    a:link {
    color:#0033FF
    } /*unvisited link */

    a:visited {
    color:#006666
    } /*visited link */

    a:hover {
    color:#CC6633
    } /*link changes color when mouse over */
    a:active {
    color:#FF0000
    } /*active link */

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color:#990000
    }
    h1.rood {
    color:#FF3300;
    font-style: normal;
    font-size: 16pt;
    text-align: center
    }

    h2.italic {
    color:#FF3300;
    font-style: italic;
    font-size: 16pt
    }

    p.kop1 {
    font-family: Arial, serif;
    font-weight: bold;
    font-size: 10pt;
    font-style: normal
    }

    p.kop2 {font-family:Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12pt;
    font-style: normal
    }

    p.hyperlink {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size: 10pt;
    font-style: normal
    }

    –>
    </style>
    </head>

    <body>

    <TABLE width="939" align="center">
    <CAPTION><h1 class="rood">
    Welkom op de site</h1>
    </CAPTION>
    <tr>

    <td width="142">
    <TABLE width="132" border=0>
    <tr>
    <TH width="126" class="een">cell 1</TH>
    </tr>
    <tr>
    <TH class="twee">"cell 1</TH>
    </tr>
    <tr>
    <TH class="twee">Cell2</TH>
    </tr>
    <tr>
    <TH class="twee">Tekst</TH>
    </tr>
    <tr>
    <TH class="twee">Tekst</TH>
    </tr>
    <tr>
    <TH class="twee">Tekst</TH>
    </tr>
    <tr>
    <TH class="twee">Tekst</TH>
    </tr>
    <tr>
    <TH class="twee">Tekst</TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    <tr>
    <TH class="twee"></TH>
    </tr>
    </TABLE>
    </td>


    <td width="776">
    <TABLE width="806" height="508">
    <tr>
    <TD width="939" class="two">Cell2</TD>
    </tr>
    </TABLE>
    </td>

    </tr>
    </table>
    </div>
    </body>
    </html>
    [/quote:e3d3760876]

    Alvast bedankt voor de hulp.
  • Dan moet je de cel waar je die tabel in hebt gezet een valign="top" geven (valign staat voor vertical align).

    Dus:
    [code:1:08aa9b9736]<td valign="top" width="142">
    <TABLE width="132" border=0>

    [/code:1:08aa9b9736]

    Overigens ben ik meer een voorstander van divisions dan van tabellen. Op die manier kun je heel die plaatsing van dit soort dingen ook met CSS regelen.
  • Hey harstikke bedankt. Ik weet dat div'jes beter zijn, maar dit is voor school. en vanwege mijn (op dit moment nog) gebrekkige kennis los ik het maar op deze manier op. Iig bedankt, het was precies wat ik nodig had.
  • Nog gemakkelijker is om "vertical-align:top" op te nemen in je stylesheet bij TD.
  • Ik heb nu nog een ander probleem. Ik start de webpagina in IE, en vervolgens in FF. Er zit in de beide browsers een groot verschil in de randen van de tabellen. Ik weet niet hoe ik dit moet oplossen. :o Help aub
  • "Groot verschil" is nogal vaag… Hoe bedoel je precies? Heb je misschien een linkje, zodat we zelf kunnen kijken?
  • http://home.hccnet.nl
    obertarends/Screen_1.PNG

    http://home.hccnet.nl
    obertarends/untitled_2.PNG


    Hier zijn de links naar screenshots van de pagina's.
  • Het probleem is dat IE de lijn op de laatste pixel binnen de tabel tekent en FF de lijn op de eerste pixel buiten de tabel tekent.

    Waarschijnlijk is dit op te lossen door er een extra tabel omheen te zetten (ja I know.. lelijk.. maarjah). Ik zou het niet zeker weten aangezien je de laatste code niet hebt geplaatst.
  • Ik zou de border van de tabel uit zetten en er met CSS een nieuwe border omheen maken. Dan zien ze er wel hetzelfde uit.
  • [quote:d6ffd3054a="Gooly"]Ik zou de border van de tabel uit zetten en er met CSS een nieuwe border omheen maken. Dan zien ze er wel hetzelfde uit.[/quote:d6ffd3054a]

    Dat is niet waar.

    Zoals ik eerder al geschreven heb tekenen IE en FF de border op een andere plek (ook wanneer deze in CSS is gedefineerd).

    Ik heb even een voorbeelde gemaakt om het verschil te demonstreren. Ik heb divjes gebruikt maar dezelfde teken-regels worden gebruikt voor tables.

    [code:1:d6ffd3054a]
    <html>

    <head>
    <title>Border Example</title>
    <style>
    .div1
    {
    width: 100px;
    background-color: red;
    }
    .div2
    {
    width: 100px;
    background-color: green;
    border-left: 1px solid blue;
    border-right: 1px solid blue;
    }
    </style>
    </head>

    <body>
    <div class="div1">divje 1</div>
    <div class="div2">divje 2</div>
    </body>

    </html>
    [/code:1:d6ffd3054a]

    Voorbeeld pagina getekend in IE:
    [img:d6ffd3054a]http://img181.imageshack.us/img181/1408/ieqv2.png[/img:d6ffd3054a]

    Voorbeeld pagina getekend in FF:
    [img:d6ffd3054a]http://img240.imageshack.us/img240/3076/ffce4.png[/img:d6ffd3054a]

    Wanneer je deze bekijkt in IE en FF zul je opmerken dat ze verschillend getekend zijn. Conclusie: De CSS borders worden NIET hetzelfde getekend en dit is dus geen oplossing.

    Zoals ik eerder al gezegd heb lijkt me de beste oplossing om beide tabellen uit elkaar te drukken door het gebruik van een extra tabel.. of om voor IE en FF een andere css te gebruiken.
  • De gebruikte code is geen eerlijke vergelijking, je hoort natuurlijk ook een goede doctype boven je document gebruiken zodat IE en FF hetzelfde box model gebruiken. Makkelijker en ook nog eens netter dan een tabel voor layout. :roll:

    - Bas
  • Hoe kan ik dan de doctype aangeven? Ik heb wel rondgekeken, maar nergens staat het duidelijk aangegeven.
  • Fix Your Site With the Right DOCTYPE!

    - Bas

Beantwoord deze vraag

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