Testpagina Uitlijning Externe links

Hoofdpagina  Categorie-index  Index  Menu

Vorige | Volgende

---

Onder redactie van: BeneluxSpoor.net / Auteur: Redactie

---

Oplossing van het probleem met de uitlijning van de externe links in de encyclopedie

Kolom-uitlijning 'ExtraInfo' bij 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-methode

Bij 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

Externe website:
Uitlijning-test	Deze tekst is beter uitgelijnd door een truuk met de border.
Conrad.nl	Deze tekst staat nu goed.
floodland.nl/aim	Deze tekst staat nu goed
stationsweb.nl	Veel informatie over stations.

---

Hoofdpagina  Categorie-index  Index  Menu

Vorige | Volgende

Contact met de redactie:

---