What's new

Help using div's to image float?

AliceNWeb

Drunken Tom-boy with an okay-jawline
#1
I'm attempting to use Divs to get the same imagefloat effect. Basically I just want a full image on the left with text to the right with a padding of about 20 px and text below as well separated by a divider.

I don't know how to script yet - however, here is the code I've written up:
Code:
[nobr][div=background-color: #b1bed3; padding: 20px;]
[div=background-image: url(https://i.imgur.com/3QINL8O.png); background-repeat: no-repeat; align-left;]
[/div]test[/nobr]
I'm sure you can see what I'm trying to do. Basically make the image appear on the left and then write text to the right of it. But the image doesn't show unless there is text inside the div.
 

Fyuri

積ん読
Administrator
Supporter
#2
Since you set the image to a background image it will only show as much as the div background actually is. So if you only post one line of text it'll only show that much.

Or you set the div with the bg image with a set width and height, but this may not make is mobile friendly.

I am on my phone so can't really do a example code well enough with the small space.
 

AliceNWeb

Drunken Tom-boy with an okay-jawline
#3
Since you set the image to a background image it will only show as much as the div background actually is. So if you only post one line of text it'll only show that much.

Or you set the div with the bg image with a set width and height, but this may not make is mobile friendly.

I am on my phone so can't really do a example code well enough with the small space.
I have figured that much out - I think I attempted to manually set the width and height to 100% but I feel that would make it cover the entire div that the image div is inside... so instead of posting it as a background image should I just use the imagefloat? My understanding of the Div's is that they give you more control over the end result; and I would like to keep it as close to the same for every device as possible.

Essentially I am attempting to create a pseudo "document" type template or character sheet - something similar to what you may find when you're called in for jury duty; just something "official" looking.

Float image on the left of the character, float image on the right for the Beaureu's emblem, and then small headers that sit on top of dividers with text beneath the dividers. Nothing interactive or any crazy animations. Just trying to get an idea of how to do it so that it will look relatively the same with all devices :)
 

Uxie

ニャー
#4
there's actually a bbcode+ function called " float:left" that kind of does the same thing as imagefloat ! to have your background show up you will have to set a fixed value of dimensions for it, but to keep it as close as possible on each device you'd have to become familiar on making codes mobile-friendly !! maybe check out sugarvine's snippets. i think they might help a tad.

otherwise using the normal [imagefloat] and [heightrestrict] should be enough to code i think?

i put a little bit before of how i'd change your code to at least look how i thought you wanted it (?) ! ! i hope this helps you at least a little !!


Code:
[nobr][div=background-color: #b1bed3; padding: 20px;]
[div=background-image: url(https://i.imgur.com/3QINL8O.png); background-repeat: no-repeat; align-left;height:180px;width:150px;background-size:100%;float:left;][/div]
test[/div][/nobr]
test
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top