Ga naar inhoud

Cellen met links breder dan cellen zonder links met css?


anoniem

Aanbevolen berichten

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; }
Link naar reactie
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[/code]
Link naar reactie
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.
Link naar reactie
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.
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...