Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
Dane
Experienced
Topic Author
Posts: 121
Joined: 04 Dec 2020, 15:05

Question about the using of block-grids

03 Jun 2023, 13:07

Hi,

i inserted in my text a block-grid with 4 images:
2023-06-03 19_01_51-Window.png
2023-06-03 19_01_51-Window.png (464.21 KiB) Viewed 13862 times
I also work with the p align formatting to align the text. 
Code
<ul class='small-block-grid-2'>
<li>Links oben<a href="{{path}}1685804076721.png" data-popup><img src="{{path}}1685804076721.png" alt="" /></a></li>
<li><p align="right">Rechts oben<a href="{{path}}1685804115993.png" data-popup><img src="{{path}}1685804115993.png" alt="" /></a></p></li>
<li><a href="{{path}}1685804186027.png" data-popup><img src="{{path}}1685804186027.png" alt="" /></a>Links unten</li>
<li><a href="{{path}}1685804146400.png" data-popup><img src="{{path}}1685804146400.png" alt="" /></a><p align="right">Rechts unten</p></li>
</ul>
But how can I make the horizontal column smaller in the middle so that it is as wide as the vertical one?

Thanks in advance for any help. 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13997
Joined: 30 Sep 2006, 03:37

Re: Question about the using of block-grids

03 Jun 2023, 22:42

Do you have a test link? It's a bit difficult to see from the code why there is additional vertical margin between the grid items ... As it works in the X3 gallery, 2x margin is provided below each item, because 1x margin is on each side of all items.

Image
 
User avatar
Dane
Experienced
Topic Author
Posts: 121
Joined: 04 Dec 2020, 15:05

Re: Question about the using of block-grids

04 Jun 2023, 10:43

 
User avatar
mjau-mjau
X3 Wizard
Posts: 13997
Joined: 30 Sep 2006, 03:37

Re: Question about the using of block-grids

04 Jun 2023, 12:22

The reason is that in the 2nd <li>, you have wrapped the entire <a> link inside <p align="right"> ... <p> (paragraphs) have natural margin below them (that's why they are paragraphs), and therefore the entire block gets additional margin below. I'm pretty sure you meant to only add the text "Rechts oben" inside <p>Rechts oben</p> and not the entire link? I see in the last <li> you have wrapped only the text inside <p>.

You shouldn't really be using <p> at all, unless you want to use margin from <p>. To style text without using <p>, you should instead use <span> or <div>, which does not have any natural styles or margins by default.
Code
<div style="text-align: right">Rechts oben</div>
 
User avatar
Dane
Experienced
Topic Author
Posts: 121
Joined: 04 Dec 2020, 15:05

Re: Question about the using of block-grids

04 Jun 2023, 15:03

Hi Karl,

thank you so much for the help, you solution works fine.
2023-06-04 21_00_07-Tri-Bahtinovmaske am Schmidt Cassegrain Celestron C11 EdgeHD.png
2023-06-04 21_00_07-Tri-Bahtinovmaske am Schmidt Cassegrain Celestron C11 EdgeHD.png (462.81 KiB) Viewed 13849 times