|
|
Testpagina Uitlijning Externe linksUit BeneluxSpoor.net - Encyclopedie
Onder redactie van: BeneluxSpoor.net / Auteur: Redactie
Oplossing van probleem met de uitlijning van externe links in de encyclopedieKolom-uitlijning 'ExtraInfo' bij de Linkssectie.We hadden al vanaf het begin het probleem dat de ExtaInfo-tekst niet goed verticaal uitgelijnd was met de er voor staande link-tekst. Heb destijds (medio 2013) in de sjablonen de 'valign' aangepast. Toen was het probleem wel minder geworden, maar helemaal wegkrijgen lukte niet. Blijkbaar beïnvloeden de interne- en externe link instellingen elkaar. Opnieuw hetzelfde probleem bij de nieuwe Externe Links-methodeBij de nieuwe methode om Externe links te plaatsen (sinds 15-11-2015), trad ook hetzelfde probleem met de verticale uitlijning op. Door in de nieuwe Sjabloon de valign van de link op 'top' te zetten en de valign van de ExtraInfo-tekst op 'bottom', was het hoogteverschil bijna nihil in het 'Bewerking ter controle bekijken'-scherm. Wanneer je echter op 'Opslaan' klikte, bleek echter dat de ExtraInfo-tekst toch weer iets naar boven verschoven was. Ik besloot om de rand om de tabel-cellen zichtbaar te maken, om te zien of het probleem eventueel door niet gelijk staande tabel-cellen veroorzaakt werd.
| style="font-size: 90%; valign:top; border: 1px solid darkgray;"|
* [http://carendt.com Tekst uitlijning test]
{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray;" {{!}} {{{ExtraInfo}}} |}}
|-
De cellen bleken exact op gelijke hoogte te staan. Dus moest het aan de tekst-uitlijning liggen. Heb het vermoeden dat het vierkantje, links van de blauwe link, roet in het eten gooit. Duidelijk te zien is, dat de link, ondanks valign: 'top', lager in de cel staat (zie onder). Ik kwam op het idee om de bovenste rand om de rechter tabel-cel iets breder te maken, om zodoende de ExtraInfo-tekst te dwingen om iets lager in de tabel-cel te gaan staan.
| style="font-size: 90%; valign:top; border: 1px solid darkgray;"|
* [http://carendt.com Tekst uitlijning test]
{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray; border-top:solid 2px darkgray;" {{!}} {{{ExtraInfo}}} |}}
|-
Door daarna in het betreffende test-Sjabloon de overbodige Borders weer te verwijderen en de kleur op 'Transparant' (=achtergrondkleur) in te stellen, was de bredere Border aan de bovenzijde niet meer zichtbaar. De ExtraInfo-teksten achter de links stonden nu op de juiste plaats (en zijn eventueel later nog anders in te stellen).
| style="font-size: 90%; valign:top; border: 1px solid white;"|
* [http://carendt.com Tekst uitlijning test]
{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border-top:solid 2px transparant;" {{!}} {{{ExtraInfo}}} |}}
|-
Kortom, door het simpele toevoegen van border-top:solid 2px transparant; aan de Sjablonen, was het uitlijningsprobleem uit de wereld. Meer informatie
|
|||||||||||||||||
