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)

Cellen met links breder dan cellen zonder links met css?

None
5 antwoorden
  • Hallo,

    Ik heb 2 vraagjes met betrekking tot css:

    [b:96a0fc72bf]Mijn eerste vraag[/b:96a0fc72bf]
    Op een internetpagina heb ik verscheidene links staan naar overige pagina's op mijn site, deze pagina is hier te vinden:

    http://www.timloto.org/nl/matrix_test.html

    In de pagina worden de cellen van de tabel met behulp van css als links gebruikt.
    De bovenste 2 cellen (in de rij talstelsels) zijn met css zodanig aangepast dat de cellen als links worden gebruikt en daarnaast ook van kleur wijzigen bij een mouse-over.

    Nou wil het geval dat de cellen welke als link werken smaller zijn dan de cellen welke niet als link werken (terwijl ze ook met dezelfde css-code werken, allemaal 35px breed)
    Ik heb al van alles geprobeerd maar kom er niet uit.

    Heeft iemand enig idee hoe ik dit op kan lossen dat alle cellen dezelfde breedte krijgen ongeacht of er een link in de cel staat.


    [b:96a0fc72bf]Mijn tweede vraag:[/b:96a0fc72bf]
    De links (blauwe kruisjes) krijg ik ook niet verticaal uitgelijnd met css.
    Iemand enig idee?


    Een deel van de css-code (welke ervoor zorgt dat een cel als link werkt) heb ik hieronder afgebeeld:

    td.keu_gr_l a
    {
    width:35px;
    font-size:11pt;
    height=35px;
    vertical-align:middle;
    text-align: center;
    background-color:#d9d9d9;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    padding-right: 0px;
    }
  • Wanneer ik een stukje uit je code knip en dit in een apart html bestand plak, dan werkt het wel goed. Je gebruikt echter bij de rij talstelsels andere css klassen als bij de overige rijen. Als ik deze aanpas en de pagina laadt, dan werkt het wel. HIeronder de losse html-file dit ik even in elkaar geklust heb.

    [code:1:11cee07026]
    <html>
    <link href="style.css" type="text/css" rel=StyleSheet>
    <head>
    <title>TEST</title>

    </head>

    <body>
    <table width=100% border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="tekst1"><font size="2">&nbsp;&nbsp;talstelels</font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b><a href="http://www.timloto.org/download/pdf_lesbrieven/digitaal/talstelsels2.pdf" onFocus="this.blur();" target="_blank">X</a></b></font></td>
    <td class="keu_wt" align="center"><b><a href="http://www.timloto.org/pictures/deltapress/semester7b/index.html#hoofdstuk8" onFocus="this.blur();" target="_blank">&nbsp;&nbsp;X&nbsp;&nbsp;</a></b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_end"><b>&nbsp;</b></font></td>
    </tr>
    <tr>
    <td class="tekst1"><font size="2">&nbsp;&nbsp;digitale bouwstenen</font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt" align="center"><b><a href="http://www.timloto.org/pictures/deltapress/semester7b/index.html#hoofdstuk1" onFocus="this.blur();" target="_blank">&nbsp;&nbsp;X&nbsp;&nbsp;</a></b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b><a href="http://www.timloto.org/interactief/poortschakeling.swf" onFocus="this.blur();" target="_blank">&nbsp;&nbsp;X&nbsp;&nbsp;</a></b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_end"><b>&nbsp;</b></font></td>
    </tr>
    <tr>
    <td class="tekst1"><font size="2">&nbsp;&nbsp;combinatorische schakelingen</font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_end"><b>&nbsp;</b></font></td>
    </tr>
    <tr>
    <td class="tekst1"><font size="2">&nbsp;&nbsp;sequenti&euml;le schakelingen</font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt" align="center"><b><a href="http://www.timloto.org/pictures/deltapress/semester7b/index.html#hoofdstuk2" onFocus="this.blur();" target="_blank">&nbsp;&nbsp;X&nbsp;&nbsp;</a></b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_end"><b>&nbsp;</b></font></td>
    </tr>
    <tr>
    <td class="tekst1"><font size="2">&nbsp;&nbsp;multiplexing</font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt" align="center"><b><a href="http://www.timloto.org/pictures/deltapress/semester7b/index.html#hoofdstuk4" onFocus="this.blur();" target="_blank">&nbsp;&nbsp;X&nbsp;&nbsp;</a></b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_end"><b>&nbsp;</b></font></td>
    </tr>
    <tr>
    <td class="tekst1"><font size="2">&nbsp;&nbsp;processor componenten</font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt" align="center"><b><a href="http://www.timloto.org/pictures/deltapress/semester7b/index.html#hoofdstuk7" onFocus="this.blur();" target="_blank">&nbsp;&nbsp;X&nbsp;&nbsp;</a></b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_wt"><b>&nbsp;</b></font></td>
    <td class="keu_gr"><b>&nbsp;</b></font></td>
    <td class="keu_end"><b>&nbsp;</b></font></td>
    </tr>
    </table>

    </body>
    </html>
    [/code:1:11cee07026]

    Lost dit je probleem op?

    Groeten Rob
  • Hallo Rob,

    Hartelijk dank voor je antwoord.

    Het gaat echter om de bovenste 2 links (rechts naast talstelsels) welke niet goed werken.
    De overige links (kruisjes) heb ik nog niet aangepast.

    Maar zoals te zien bij de bovenste 2 links is de wisseling van de achtergrondkleur goed alleen zijn de cellen smaller geworden. Dit komt doordat ik alleen de bovenste 2 cellen volledig als links laat werken met css.
  • eerste vraag:
    Is voor mij lastig te beantwoorden, zonder in de code te duiken. En om eerlijk te zijn, heb ik daar niet veel zin in als ik naar je code kijk. Dat is namelijk een grote bende. Alles in tables, font-tags (die ook nog eens af en toe alleen worden afgesloten), rowspans van 100 (uit de lucht gegrepen waarde). Dus daar valt weinig eer te behalen.
    Ik denk dat je beter af bent als je de matrix in een aparte table plaatst en [b:2cb7154bb3][u:2cb7154bb3]alle[/u:2cb7154bb3][/b:2cb7154bb3] opmaak via css regelt. Dus ook de non-breaking spaces die je gebruikt voor padding, weglaten.

    vraag twee:
    Je kan een TD een vertical-align: middle geven.
  • Tutorials over hoe je een tabel kunt vormgeven:
    http://icant.co.uk/csstablegallery/tutorials.php

    Online tool om een tabellen te produceren:
    www.accessify.com/tools-and-wizards/accessibility-tools/table-builder/

Beantwoord deze vraag

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