Skip to main content
Main Content

Help needed with image/text alignment and padding

Help needed with image/text alignment and padding
Posted 2021-01-22 11:50:16

Hello! I need help with formatting the text and images in my den header... I tried, but clearly I need some padding to make the text breathe and I don't know how to do that.

I'm a total noob with CSS and I can do some basic html, but I just really don't know what is needed here.

Could someone help me improve this? I'd like the second image to be lined up with the bottom of the first, and the text to have a little more space around it (and the art credits to be aligned to the right).


Any help would be greatly appreciated!


Iona
#22199

Posted 2021-01-22 16:44:02

You can set a specific height/width for your images and text. A specific height for the text will push the 2nd image down. Setting a width for your images will give a little space next to the words or, optionally, you can just add padding to that side. For aligning the credits:

<div style="text-align: right;">Art by Fella (#31536)</div>


fireflii
#757

Posted 2021-01-22 16:47:45

Thanks so much for your input! I was trying to align in the editor but it was not working ^^'

Do you know what the code is to set the height and width for the text, and to add padding on the side?


Iona
#22199

Posted 2021-01-22 17:08:31

Yeah, the preview view is kinda broken with some codes. I always use the code view, but that only works if you know some basic coding. lol

Setting height/width depends. You can do it different ways. For HTML, which is what you're using right now, this is the simplest way:

<p style="height: 100px; width: 300px;">Your text here.</p>

So what that does is it takes everything in that paragraph tag and confines it to 100px height and 300px width. If the text goes over that size, there are various things you can do (hide it, scroll, etc.) but on Wolvden, that requires CSS. Your text is short enough that it won't go past the height of your images, so that's not something you need to worry about unless you make it much longer.

Anyway, it's pretty simple code, so I just wrote it up for you here so you can copy/paste it for ease (but I put the above explanation in case you ever wanted that information for some other thing):

<div style="float: left; padding-right: 10px;"><img src="https://i.postimg.cc/mDhBfPHJ/Sparrowhawk-Eye-v1.png"></div><p style="height: 119px; width: 100%;">Welcome to the Oakenstream Pack! Mostly consisting of realistic monochrome wolves, with exceptions made for special Muted/Warm specimens with interesting shading and markings.</p>

<div style="float: right; padding-left: 10px;"><img src="https://i.postimg.cc/GpXd5FHv/Silver-Lining-Eye-v1.png"></div><p style="height:150px;width:100%;">I breed TIIIs, and my final goal is to have the Argent, Chromium, Flint and Slate bases. For now my stud is a gorgeous frosted pastel Lily, don't hesitate to send in a breeding request!</p>

<div style="text-align: right;">Art by Fella (#31536)<div>

fireflii
#757

Posted 2021-01-23 03:53:13

Ah thank you, you're the best! I think I understand it better between your explanation and the fully done example, that is so helpful! hopefully with this I'll be able to do it myself in the future if I decide to add pictures/text. :)


Iona
#22199

Posted 2022-10-08 14:15:50
how do i change the size of an image im importing

𝕵𝖔𝖘𝖊𝖕𝖍✧𝕵𝖔𝖊𝖘𝖙★r
#92025

Search Topic