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:
|
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:
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>
|
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
|
𝕵𝖔𝖘𝖊𝖕𝖍✧𝕵𝖔𝖊𝖘𝖙★r #92025 |