anoniem Geplaatst: 16 augustus 2006 Delen Geplaatst: 16 augustus 2006 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; } Quote Link naar reactie
anoniem Geplaatst: 16 augustus 2006 Auteur Delen Geplaatst: 16 augustus 2006 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"> talstelels</font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </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"> X </a></b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_end"><b> </b></font></td> </tr> <tr> <td class="tekst1"><font size="2"> digitale bouwstenen</font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </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"> X </a></b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b><a href="http://www.timloto.org/interactief/poortschakeling.swf" onFocus="this.blur();" target="_blank"> X </a></b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_end"><b> </b></font></td> </tr> <tr> <td class="tekst1"><font size="2"> combinatorische schakelingen</font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_end"><b> </b></font></td> </tr> <tr> <td class="tekst1"><font size="2"> sequentiële schakelingen</font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </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"> X </a></b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_end"><b> </b></font></td> </tr> <tr> <td class="tekst1"><font size="2"> multiplexing</font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </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"> X </a></b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_end"><b> </b></font></td> </tr> <tr> <td class="tekst1"><font size="2"> processor componenten</font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </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"> X </a></b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_wt"><b> </b></font></td> <td class="keu_gr"><b> </b></font></td> <td class="keu_end"><b> </b></font></td> </tr> </table> </body> </html> [/code:1:11cee07026] Lost dit je probleem op? Groeten Rob[/code] Quote Link naar reactie
anoniem Geplaatst: 17 augustus 2006 Auteur Delen Geplaatst: 17 augustus 2006 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. Quote Link naar reactie
anoniem Geplaatst: 17 augustus 2006 Auteur Delen Geplaatst: 17 augustus 2006 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. Quote Link naar reactie
anoniem Geplaatst: 17 augustus 2006 Auteur Delen Geplaatst: 17 augustus 2006 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/ Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen