|
|
| Regel 11: |
Regel 11: |
| | ===== Kolom-uitlijning 'ExtraInfo' bij Linkssectie. ===== | | ===== 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. | + | 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<br /> |
| | + | 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 ===== | | ===== 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. | + | 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<br /> |
| | + | 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,<br /> |
| | + | 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. | | 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. |
| Regel 26: |
Regel 29: |
| | | | |
| | De cellen bleken exact op gelijke hoogte te staan. Dus moest het aan de tekst-uitlijning liggen.<br /> | | De cellen bleken exact op gelijke hoogte te staan. Dus moest het aan de tekst-uitlijning liggen.<br /> |
| − | 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). | + | 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<br /> |
| − | 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. | + | 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. |
| | | | |
| | <pre> | | <pre> |
| | | style="font-size: 90%; valign:top; border: 1px solid darkgray;"| | | | style="font-size: 90%; valign:top; border: 1px solid darkgray;"| |
| | * [http://carendt.com Tekst uitlijning test] | | * [http://carendt.com Tekst uitlijning test] |
| − | {{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray; border-top:solid 3px darkgray;" {{!}} {{{ExtraInfo}}} |}} | + | {{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray; border-top:solid 2px darkgray;" {{!}} {{{ExtraInfo}}} |}} |
| | |- | | |- |
| | </pre> | | </pre> |
| | | | |
| − | Door daarna in het betreffende test-Sjabloon de overbodige Borders weer te verwijderen en de kleur op 'White' 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). | + | 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<br /> |
| | + | 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). |
| | | | |
| | <pre> | | <pre> |
| | | style="font-size: 90%; valign:top; border: 1px solid white;"| | | | style="font-size: 90%; valign:top; border: 1px solid white;"| |
| | * [http://carendt.com Tekst uitlijning test] | | * [http://carendt.com Tekst uitlijning test] |
| − | {{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border-top:solid 3px white;" {{!}} {{{ExtraInfo}}} |}} | + | {{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border-top:solid 2px transparant;" {{!}} {{{ExtraInfo}}} |}} |
| | |- | | |- |
| | </pre> | | </pre> |
| Regel 47: |
Regel 51: |
| | Kortom, door het simpele toevoegen van | | Kortom, door het simpele toevoegen van |
| | <pre> | | <pre> |
| − | border-top:solid 3px white | + | border-top:solid 2px transparant; |
| | </pre> | | </pre> |
| | aan de Sjablonen, was het uitlijningsprobleem uit de wereld. | | aan de Sjablonen, was het uitlijningsprobleem uit de wereld. |
Onder redactie van: BeneluxSpoor.net / Auteur: Redactie
Oplossing van probleem met de uitlijning van externe links in de encyclopedie
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
