First off I am new....just subscribed and I am learning. I created a simple list of images that are also links on my main page (easy enough). The issue I am having is I want them all on one line....they currently appear in a vertical list and I would like horizontal across the page. I tried tables and spans but it did not work. Any ideas? Thank you in advance for your help
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Do you have a link to the page in question? How big are these images? If they are more than half the width of the page for instance, they will display in a column even if you have set everything else up correctly. If they aren't massive in size, then you can probably fix by way of the 'display' CSS property.
- Kallak
Well I think I figured it out using base htm...I was hoping I could use the Textile langauge...here is what I did...using divs a few styles. I am looking add my own styles for the column and the row..but not sure I can?
<div style="display:flex;">
<div style="flex: 33.33%; padding: 5px;">
<a href="https://ironfanginvasion-21.obsidianportal.com/wikis/the-history-of-the-region">
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990219/Tome.jpg?1563819267" alt="History of the Region" style="width:100%">
</a>
</div>
<div style="flex: 33.33%; padding: 5px;">
<a href="https://ironfanginvasion-21.obsidianportal.com/wikis/nirmathas">
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990208/Nirmathas_Sheild_and_Title.jpg?1563814850" alt="Nirmathas" style="width:100%">
</a>
</div>
<div style="flex: 33.33%; padding: 5px;">
<a href="https://ironfanginvasion-21.obsidianportal.com/wikis/molthune">
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990253/Molthune_Sheild_and_Title.jpg?1563826352" alt="Nirmathas" style="width:100%">
</a>
</a>
</div>
</div>
Sure that worked!! I am learning....so I added this under the common CSS area in the advanced tab
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
Then cleaned up the page to look like this
<div class="row">
<div class="column">
<a href="https://ironfanginvasion-21.obsidianportal.com/wikis/the-history-of-the-region">
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990219/Tome.jpg?1563819267" alt="History of the Region" style="width:100%">
</a>
</div>
<div class="column">
<a href="https://ironfanginvasion-21.obsidianportal.com/wikis/nirmathas">
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990208/Nirmathas_Sheild_and_Title.jpg?1563814850" alt="Nirmathas" style="width:100%">
</a>
</div>
<div class="column">
<a href="https://ironfanginvasion-21.obsidianportal.com/wikis/molthune">
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990253/Molthune_Sheild_and_Title.jpg?1563826352" alt="Nirmathas" style="width:100%">
</a>
</a>
</div>
</div>
I wish the editor had formating option in this...it would make it much easier.
Is there a way to do this with Textile?
@CraigSteinhoff, the synxtax for that sort of thing that you're wanting to do looks like so:
div(div-class). !(img-class){img-style}img_src(alt-value)!:hyperlink-url
So this:
- - - -
<div class="column">
<a href="https://ironfanginvasion-21.obsidianportal.com/wikis/nirmathas">;
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990208/Nirmathas_Sheild_and_Title.jpg?1563814850"; alt="Nirmathas" style="width:100%">
</a>
</div>
- - - -
Turns into this:
- - - -
div(column). !{width:100%}https://db4sgowjqfwig.cloudfront.net/campaigns/226331/assets/990208/Nirmathas_Sheild_and_Title.jpg?1563814850(Nirmathas)!:https://ironfanginvasion-21.obsidianportal.com/wikis/nirmathas
- - - -
I'm not 100% about nesting the divs (I'll have to play around with it), but in this case you can just add the "row" div around your textile image entries. Also, I personally would swap the img styling with an image classname and set the width in the custom CSS field.
Hopefully this at least gets you started though.
- Kallak