Banner
Views: 714,912,936
Time:
11 users online: adakkusu-san, Aeon, chickaDEE Magazine, DPBOX, o Erik, King Boo, mario90, o Noivern, o Sinc-X, Sixcorby, SteebunW - Guests: 40 - Bots: 159Users: 37,325 (1,632 active)
Latest: SteebunW
Not logged in.
I'm having trouble getting my layout to do what I want.
Forum Index - Donut Plains - Computers & Technology - I'm having trouble getting my layout to do what I want.
Pages: « 1 »
Do you see those walking My Little Pony ponies in my new layout? Well, I want them to always be at the lower right corner of the layout. If a line is added or removed, I want the images to still be at the lower right corner. I tried for hours last night to get this behavior by applying style="float: right" attributes to the images, but it might end up looking something like this.



I don't want all that space between the last line of text and the bottom of the layout.

Does anyone know how to make the images always be at the lower right corner of the layout?

Also, I want to shift the images vertically so that the ponies are walking on the same horizontal plane. How do I vertically shift images like that?

--------------------


My Little Pony: Cutie Re-Mark Adventure is on hiatus.
The authors of these 2 My Little Pony fan games have removed their games from the Internet. Download them now. Mirror 2. Spread these links!

Either:

Code
<hr>
<div style="float: right;">
<img src="https://bin.smwcentral.net/u/20977/luna_walk_left.gif">
<img src="https://bin.smwcentral.net/u/20977/walk_left.gif">
</div>
[... rest of your signature goes here ...]

Or:

Code
<hr>
<div style="position: relative; padding-right: 336px;">
<div style="position: absolute; right: 0; bottom: 0;">
<img src="https://bin.smwcentral.net/u/20977/luna_walk_left.gif">
<img src="https://bin.smwcentral.net/u/20977/walk_left.gif">
</div>
[... rest of your signature goes here ...]
</div>

The first option is less tricky to use but it can only align the images against the top-right corner, not the bottom-right corner.

  • float: right; will float an element either directly left or directly right of where it should be. It can only do horizontal alignment, no vertical one.
  • position: absolute; right: 0; bottom: 0; will tell an element to align itself exactly 0px away from the right-most and bottom-most corners of the screen or the last relative-positioned element, if there is one.
  • position: relative; will tell an element to be relative-positioned (you can shift its position).
  • padding-right: 336px; is necessary so your text doesn't end up occupying the space behind the images. It's set to the same width as both your images (144 + 192).

Note that while there is a vertical-align: bottom; rule, it works only under very specific situations, so it ain't gonna work here.

"The quieter you become, the more you are able to hear." --Ram Dass

Well, I don't know how I did it, but I think I did it. Thanks RanAS!#fim{^_^}

--------------------


My Little Pony: Cutie Re-Mark Adventure is on hiatus.
The authors of these 2 My Little Pony fan games have removed their games from the Internet. Download them now. Mirror 2. Spread these links!

Pages: « 1 »
Forum Index - Donut Plains - Computers & Technology - I'm having trouble getting my layout to do what I want.

The purpose of this site is not to distribute copyrighted material, but to honor one of our favourite games.

Copyright © 2005 - 2019 - SMW Central
Legal Information - Privacy Policy - Link To Us


Total queries: 24

Menu

Follow Us On

  • Facebook
  • Twitter
  • YouTube

Affiliates

  • Talkhaus
  • SMBX Community
  • GTx0
  • Super Luigi Bros
  • ROMhacking.net
  • MFGG
  • Gaming Reinvented