You are either not logged in or not registered with our community. Click here to register.
 
December 09, 2016, 09:29:03 AM

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

Click here if you are having problems.
Default Wide Screen Beige Lilac Rainbow Black & Blue October Send us your theme!

Hark!  The Herald!
Holiday Issue 2016

Wiki Blogs Dicebot

Author Topic: Help with aligning pictures and text (Resolved)  (Read 372 times)

0 Members and 1 Guest are viewing this topic.

Online AndronicaTopic starter

Help with aligning pictures and text (Resolved)
« on: May 26, 2016, 06:34:26 AM »
Hey all! I tried to find a solution but I didn't see any threads with this query.

I want to place pictures on both sides of some text where the pictures are flush with one another. I've seen a couple users with this layout in their O/O's but I couldn't quote it for the code, and every time I try to do it, I end up with pictures that aren't on the same line flanking the text.

Is this accomplished with some kind of img alignment wizardry that I simply haven't thought to try yet, or through the use of tables? :/
« Last Edit: May 26, 2016, 11:17:22 AM by Andronica »

Offline Drake Valentine

  • Architect of Worlds
  • Knight
  • Enchanter
  • *
  • Join Date: Jun 2009
  • Location: In the Deepest Depthes of Your Twisted Mind
  • Gender: Male
  • Making Your Darkest of Fantasies a Reality
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 0
Re: Help with aligning pictures and text
« Reply #1 on: May 26, 2016, 07:46:54 AM »
Easiest solution, if you still know where you seen it, is to quote that user's post and copy the format of the coding.

The only thing I can honestly think of is floatleft code on one side for image with floatright code on the other side.

Example

Code: [Select]
[floatleft][img size=whatever]URL[/img][/floatleft] Text for whatever, depending how long or whatnot you can try to [center] it[/center] then [floatright][img height=whatever]IMG[/floatright]

Sometimes it is easier to img align by width so replace height with width.

Edit: Hmm, actually I think you don't have to do even that. You can just floatleft one image, floatright the other, and enter your text. Your text should automatically be centered between the two floating images.
« Last Edit: May 26, 2016, 07:51:16 AM by Drake Valentine »

Online RampantDesires

  • Certified Sass-hat ❣ Tumblr Junkie ❣ Goddess of Code ❣ Least Helpful Helper ❣ Queen of Procrastination
  • Lady Mentor
  • Enchanter
  • *
  • Join Date: Mar 2010
  • Location: Georgia
  • Gender: Female
  • As reason clouds my eyes with splendor fading
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 2
Re: Help with aligning pictures and text
« Reply #2 on: May 26, 2016, 07:53:12 AM »
I'm not sure I fully understand what you're looking for.  Something like this?



  Hey all! I tried to find a solution but I didn't see any threads with this query.

I want to place pictures on both sides of some text where the pictures are flush with one another. I've seen a couple users with this layout in their O/O's but I couldn't quote it for the code, and every time I try to do it, I end up with pictures that aren't on the same line flanking the text.

Is this accomplished with some kind of img alignment wizardry that I simply haven't thought to try yet, or through the use of tables? :/
 
Generating random text because I'm lazy ...Widely wallaby manatee accordingly aardvark emoted egret well that one hello taped pinched labrador the more grimaced where ahead more newt by yikes across.One jeez over emu oh greyhound well fish guilty consoled and unobtrusively became dolphin waspishly dear due one and wow bound more.

As fumblingly and this jauntily after prodigiously certain wildly hamster lucid gosh instead saluted austere jeepers dug woodchuck cow underneath far this selflessly willfully some wolverine laughed awkwardly far wholehearted.Giraffe along underwrote save yet crud jeepers oh swelled goodness rewound some nudged this and crudely scratched jeepers belched bombastic much that darn this.

Next komodo far more less trite along unbound where much sobbed that elegant hot had that satisfactory experimentally thus this and inclusively reran repaid fresh irrespective and more.



Tables are pretty much my favorite thing ever.    You'd have to break up your text which means it might look a bit odd based upon what size screen you made/were viewing it on.

Using the float tags gives similar results without the break in text, but the pictures don't line up across from eachother. 






Hey all! I tried to find a solution but I didn't see any threads with this query.

I want to place pictures on both sides of some text where the pictures are flush with one another. I've seen a couple users with this layout in their O/O's but I couldn't quote it for the code, and every time I try to do it, I end up with pictures that aren't on the same line flanking the text.

Is this accomplished with some kind of img alignment wizardry that I simply haven't thought to try yet, or through the use of tables? :/[

Generating random text because I'm lazy ...Widely wallaby manatee accordingly aardvark emoted egret well that one hello taped pinched labrador the more grimaced where ahead more newt by yikes across.One jeez over emu oh greyhound well fish guilty consoled and unobtrusively became dolphin waspishly dear due one and wow bound more.

As fumblingly and this jauntily after prodigiously certain wildly hamster lucid gosh instead saluted austere jeepers dug woodchuck cow underneath far this selflessly willfully some wolverine laughed awkwardly far wholehearted.Giraffe along underwrote save yet crud jeepers oh swelled goodness rewound some nudged this and crudely scratched jeepers belched bombastic much that darn this.

Next komodo far more less trite along unbound where much sobbed that elegant hot had that satisfactory experimentally thus this and inclusively reran repaid fresh irrespective and more.






Not sure if that helped at all  :-\  I put in padding because I can't stand it when text buts up against a picture, it makes it hard for me to read, but leaving it out does make a nice kind of line of pictures along the side.

Because I'm sure you're tired of looking at this mismash of things



Hey all! I tried to find a solution but I didn't see any threads with this query.

I want to place pictures on both sides of some text where the pictures are flush with one another. I've seen a couple users with this layout in their O/O's but I couldn't quote it for the code, and every time I try to do it, I end up with pictures that aren't on the same line flanking the text.

Is this accomplished with some kind of img alignment wizardry that I simply haven't thought to try yet, or through the use of tables? :/[

Generating random text because I'm lazy ...Widely wallaby manatee accordingly aardvark emoted egret well that one hello taped pinched labrador the more grimaced where ahead more newt by yikes across.One jeez over emu oh greyhound well fish guilty consoled and unobtrusively became dolphin waspishly dear due one and wow bound more.

As fumblingly and this jauntily after prodigiously certain wildly hamster lucid gosh instead saluted austere jeepers dug woodchuck cow underneath far this selflessly willfully some wolverine laughed awkwardly far wholehearted.Giraffe along underwrote save yet crud jeepers oh swelled goodness rewound some nudged this and crudely scratched jeepers belched bombastic much that darn this.

Next komodo far more less trite along unbound where much sobbed that elegant hot had that satisfactory experimentally thus this and inclusively reran repaid fresh irrespective and more.



That's also why there is an extra table cell in between the image and text boxes on my tables. I just do it out of habit out of this point to leave a little bit more room between picture and words O.o  It makes me wonder how many things I just DO without really thinking about. 
« Last Edit: May 26, 2016, 08:01:31 AM by RampantDesires »

Online AndronicaTopic starter

Re: Help with aligning pictures and text
« Reply #3 on: May 26, 2016, 08:13:21 AM »
@Drake - I mentioned in my OP that I can't quote O/O pages, which is why I wasn't able to get the code for that kind of layout. I feel really silly for not experimenting more with the float tags though since that seems to be the solution!

@Rampant - The second version using the float tags and padding is exactly what I meant! I might be able to re-size images to a specific height so they all line up without the break in text. Problem solved. :)
« Last Edit: May 26, 2016, 08:15:51 AM by Andronica »

Online RampantDesires

  • Certified Sass-hat ❣ Tumblr Junkie ❣ Goddess of Code ❣ Least Helpful Helper ❣ Queen of Procrastination
  • Lady Mentor
  • Enchanter
  • *
  • Join Date: Mar 2010
  • Location: Georgia
  • Gender: Female
  • As reason clouds my eyes with splendor fading
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 2
Re: Help with aligning pictures and text
« Reply #4 on: May 26, 2016, 08:16:55 AM »
Awesome sauce. Glad you found something that works for ya :-)

Online RampantDesires

  • Certified Sass-hat ❣ Tumblr Junkie ❣ Goddess of Code ❣ Least Helpful Helper ❣ Queen of Procrastination
  • Lady Mentor
  • Enchanter
  • *
  • Join Date: Mar 2010
  • Location: Georgia
  • Gender: Female
  • As reason clouds my eyes with splendor fading
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 2
Re: Help with aligning pictures and text
« Reply #5 on: May 26, 2016, 08:25:09 AM »
Actually I wonder if you could float things around a table O.o it might solve the space between text but not between pictures problem.

Experiment time



   Hey all! I tried to find a solution but I didn't see any threads with this query.

I want to place pictures on both sides of some text where the pictures are flush with one another. I've seen a couple users with this layout in their O/O's but I couldn't quote it for the code, and every time I try to do it, I end up with pictures that aren't on the same line flanking the text.

Is this accomplished with some kind of img alignment wizardry that I simply haven't thought to try yet, or through the use of tables? :/[

Generating random text because I'm lazy ...Widely wallaby manatee accordingly aardvark emoted egret well that one hello taped pinched labrador the more grimaced where ahead more newt by yikes across.One jeez over emu oh greyhound well fish guilty consoled and unobtrusively became dolphin waspishly dear due one and wow bound more.

As fumblingly and this jauntily after prodigiously certain wildly hamster lucid gosh instead saluted austere jeepers dug woodchuck cow underneath far this selflessly willfully some wolverine laughed awkwardly far wholehearted.Giraffe along underwrote save yet crud jeepers oh swelled goodness rewound some nudged this and crudely scratched jeepers belched bombastic much that darn this.

Next komodo far more less trite along unbound where much sobbed that elegant hot had that satisfactory experimentally thus this and inclusively reran repaid fresh irrespective and more.
   



HOLY HELL YOU CAN!

This has just revolutionized my life.

Sorry I get way too excited about stuff like this.

Offline Davikk

Re: Help with aligning pictures and text (Resolved)
« Reply #6 on: June 12, 2016, 06:52:13 PM »
So tell me, dear Mentor, what's the code/tags for doing all that?

Because I'd like to know :)

Offline Oniya

  • StoreHouse of Useless Trivia
  • Oracle
  • Carnite
  • *
  • Join Date: Sep 2008
  • Location: Just bouncing through. Hi! City of Roses, Pennsylvania
  • Gender: Female
  • One bad Motokifuka. Also cute and FLUFFY!
  • My Role Play Preferences
  • View My Rolls
  • Referrals: 3
Re: Help with aligning pictures and text (Resolved)
« Reply #7 on: June 12, 2016, 07:01:21 PM »
Code: [Select]
[floatleft][img width=100]http://addressofyourleftpicturehere.jpg[/img]
[img width=100]http://addressofyoursecondleftpicturehere.jpg[/img][/floatleft]
[floatright][img width=100]http://addressofyourrightpicturehere.jpg[/img]
[img width=100]http://addressofyoursecondrightpicturehere.jpg[/img][/floatright]
[table][tr][td]   [/td][td]insert text in the center cell of a three-cell row.  The outer cells are empty and serve as padding.[/td][td]   [/td][/tr][/table]

Replace all placeholders with what you want to show up in your layout.

Offline Davikk

Re: Help with aligning pictures and text (Resolved)
« Reply #8 on: June 12, 2016, 07:02:56 PM »
Thank you!