Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

link wordt verder naar rechts geplaatst: padding probleem

8 antwoorden
  • Hi Allemaal, ik hoop dat iemand hier me kan helpen. Ik heb de volgende CSS: [code:1:2cc4f1cc3e]td {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:none; padding: 1px 2px 1px 2px;} td a:link {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:underline; padding: 1px 2px 1px 2px;} td a:visited {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:underline; padding: 1px 2px 1px 2px;} td a:hover {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:underline; padding: 1px 2px 1px 2px; background-color:#a1ba25;}[/code:1:2cc4f1cc3e] En de volgende html tabel: [code:1:2cc4f1cc3e] <table> <tr><td>This is standard text</td></tr> <tr><td><a href="">This is a link</a></td></tr> </table> [/code:1:2cc4f1cc3e] Mijn probleem is dat de link nu net iets verder naar rechts wordt geplaatst dan de gewone tekst. Zodra ik de padding in de CSS verwijder (of alleen de laatste variabele op 0 zet) dan werkt het, maar zodra er voor padding links een waarde wordt ingevuld gaat het mis. Wie weet hoe dit komt en hoe ik dit oplos. Alvast bedankt voor de reacties.
  • Eerst even de reden dat het iets verder naar rechts gezet wordt: [code:1:e260d155dd] td {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:none; padding: 1px 2px 1px 2px;} td a:link {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:underline; padding: 1px 2px 1px 2px;} [/code:1:e260d155dd] Voor de normale tekst geldt de bovenste regel. Deze heeft dus 2px padding aan de linker kant. Voor de link geldt zowel de eerste als tweede regel. Deze heeft dus 4px padding. Dan nu de oplossing. Het lijkt me onwaarschijnlijk dat je bedoeling is om een link 2px padding te geven. Daarom zou je volgens mij de padding-left weg moeten halen van de a:link. Dan zou je dus krijgen: [code:1:e260d155dd] td {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:none; padding: 1px 2px 1px 0px;} td a:link {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:underline; padding: 1px 2px 1px 2px;} td a:visited {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:underline; padding: 1px 2px 1px 0px;} td a:hover {font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; text-decoration:underline; padding: 1px 2px 1px 2px; background-color:#a1ba25;} [/code:1:e260d155dd]
  • Yendis, bedankt voor je reactie. Ik snap nu in ieder geval waar het probleem zit, ik heb alleen nog twee kleine problemen met de oplossing. Ten eerste: zou ik dan ook niet de rechts, boven en onder op 0 moeten zetten in de andere gevallen? Ten tweede: In de a:hover wil ik een achtergrondkleur die net iets buiten mijn tekst uitsteekt (anders geeft het bij bijvoorbeeld een M of een D zo'n raar gezicht. In de a:hover heb ik daarom de padding nodig om deze background ook te naar buiten te brengen (hij neemt dit niet over van de td padding). Hoe kan ik nu de standaard td en de td a:hover toch gelijk zetten?
  • Het is me niet helemaal duidelijk wat de bedoeling is met die padding rechts, maar kun je de hele padding niet gewoon in je td declaratie regelen en in de "A's" de padding gewoon achterwege laten? Die A's volgen qua padding de declaratie van de td wel. En waar je een uitzondering wilt (b.v. blijkbaar wil je iets anders in je hover), dan regel je daar de padding voor dat ene element, waarbij je rekening houdt met de padding die al in de td staat. (is dat 2 en je wilt er daar drie, dan doe je er een padding van 1 bij)
  • Het idee van de padding rondom is dat de background-color van de a:hover enigszins buiten de tekst valt, zodat bij beginletters als M en D de rand van de kleur niet gelijk valt met de buitenste lijn van de letter. Als ik bij td de padding instel en bij de rest niet dan wordt alles wel netjes opgeschoven als in de td gegeven, maar wordt de kleur niet wijder. Dat gebeurt alleen als ik de a:hover ook een padding geef. Of die ik dan toch ergens iets fout?
  • Als ik het goed begrijp is dit wat je wilt: 1. De opmaak van de tekst in de td (link of niet) is altijd gelijk. 2. Bij een hover krijgt de link een gekleurde achtergrond, die aan alle kanten iets buiten de tekst valt. Om te zorgen dat de tekst niet gaat schuiven bij een hover, moet je zorgen dat de ruimte voor het gekleurde "hover"-vak al aanwezig is. Je kan twee dingen doen: - Je kan het effect bereiken door met de hover-class van de td aan de gang te gaan. Dus iets als td:hover { background-color: green; }, maar dat wordt niet ondersteund door IE. - Wil je het cross-browser, dan heb je een extra div nodig per td. Als het een link is gebruik je <a href="">link</a> , anders gebruik je <div class="tablecontent">tekst</div>. Zoals dit dus: [code:1:1015407209] <table> <tr><td><div class="tablecontent">This is normal text</div></td></tr> <tr><td><a href="">This is a link</a></td></tr> </table> [/code:1:1015407209] Gebruik daarna deze CSS (ik heb jouw CSS iets ingekort, door dubbele declaraties te verwijderen): [code:1:1015407209] td, td a:link, td a:visited { font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; } td a:hover { color: #525252; background-color:#a1ba25; } td a, td .tablecontent { padding: 1px 2px 1px 2px; display: block; } [/code:1:1015407209] Het gebruik van de extra div is niet heel elegant, wie weet is er nog een mooiere manier. Maar dit lijkt me de voor de hand liggende methode en het doet volgens mij wat je vraagt.
  • Kjell, bedankt voor het antwoord. Dat werkt idd wel. Alleen geen elegante oplossing. Zijn er misschien anderen die nog een idee hebben hoe dit eleganter op te lossen?
  • Nou, je kan natuurlijk ook dit doen: [code:1:045c3026a1] td, td a:link, td a:visited { font-family: Tahoma; font-size:10pt; color: #525252; font-weight:normal; } td { padding: 1px 2px 1px 2px; } td a:hover { position: relative; padding: 1px 2px 1px 2px; /* grootte van het "hover"-vak */ left: -2px; /* stel gelijk aan padding-left */ color: #525252; background-color:#a1ba25; } [/code:1:045c3026a1] Dan ga je de verplaatsing van de padding tegen met een even grote verplaatsing via een position: relative. Geen divs meer nodig in de HTML-code. Bovendien kun je het "hover"-vak precies de afmetingen geven die je wilt.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

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