• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Slide help

youngkyun

youngkyun

sad but rad
is there a way i can have the words fit under the picture and not spill out?

Code: 
[centerblock=50]
[nobr]
[class=container]
  cursor: pointer;
  display: inline-block;
  position: relative;
  transform: scaleY(-1);
[/class]

[class=cover]
  background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif);
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(-1);
[/class]

[class=content]
  height: 450px;
  transform: scaleY(-1);
  width: 800px;
[/class]

[script class=content on=click]
  slideDown 800 cover
[/script]

[script class=cover on=click]
  slideUp 800
[/script]

[div class=container]
  [div class=content]
  [div=float:center;background-color:white;margin: auto;background-position: 50% 30%;border-radius: 50%;border: 0px solid white;height:100px;width: 100px;overflow:hidden;][IMG]https://78.media.tumblr.com/1ddedc7eee544ce72312eafefd72af39/tumblr_p2tj0i47ks1wfeojto3_400.png[/IMG][/div]
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
[/div]
  [div class=cover]
  [/div]
[/div]
[/nobr][/centerblock]
 
The background-image wasn't sizing to cover everything. I added background-position:center; and background-color: rgb(169,167,168); to keep the image the same size. Alternatively, you can just use background-size: 100%, but you might get cases where the image crops itself if there's not enough room.


[class=container] cursor: pointer; display: inline-block; position: relative; transform: scaleY(-1); position: relative; [/class] [class=cover] background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif); background-repeat: no-repeat; background-position: center; background-color: rgb(169,167,168); bottom: 0; left: 0; position: absolute; right: 0; top: 0; transform: scaleY(-1); [/class] [class=content] height: 450px; transform: scaleY(-1); width: 100%; position: relative; [/class] [script class=content on=click] slideDown 800 cover [/script] [script class=cover on=click] slideUp 800 [/script] [div class=container] [div class=content]
tumblr_p2tj0i47ks1wfeojto3_400.png
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... [/div] [div class=cover] [/div] [/div]


Code: 
[centerblock=50]
[nobr]
[class=container]
  cursor: pointer;
  display: inline-block;
  position: relative;
  transform: scaleY(-1);
  position: relative;
[/class]

[class=cover]
  background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(169,167,168);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(-1);
[/class]

[class=content]
  height: 450px;
  transform: scaleY(-1);
  width: 100%;
  position: relative;
[/class]

[script class=content on=click]
  slideDown 800 cover
[/script]

[script class=cover on=click]
  slideUp 800
[/script]

[div class=container]
  [div class=content]
  [div=float:center;background-color:white;margin: auto;background-position: 50% 30%;border-radius: 50%;border: 0px solid white;height:100px;width: 100px;overflow:hidden;][IMG]https://78.media.tumblr.com/1ddedc7eee544ce72312eafefd72af39/tumblr_p2tj0i47ks1wfeojto3_400.png[/IMG][/div]
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
[/div]
  [div class=cover]
  [/div]
[/div]
[/nobr][/centerblock]
 
Alteras said:
The background-image wasn't sizing to cover everything. I added background-position:center; and background-color: rgb(169,167,168); to keep the image the same size. Alternatively, you can just use background-size: 100%, but you might get cases where the image crops itself if there's not enough room.


[class=container] cursor: pointer; display: inline-block; position: relative; transform: scaleY(-1); position: relative; [/class] [class=cover] background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif); background-repeat: no-repeat; background-position: center; background-color: rgb(169,167,168); bottom: 0; left: 0; position: absolute; right: 0; top: 0; transform: scaleY(-1); [/class] [class=content] height: 450px; transform: scaleY(-1); width: 100%; position: relative; [/class] [script class=content on=click] slideDown 800 cover [/script] [script class=cover on=click] slideUp 800 [/script] [div class=container] [div class=content]
tumblr_p2tj0i47ks1wfeojto3_400.png
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... [/div] [div class=cover] [/div] [/div]


Code: 
[centerblock=50]
[nobr]
[class=container]
  cursor: pointer;
  display: inline-block;
  position: relative;
  transform: scaleY(-1);
  position: relative;
[/class]

[class=cover]
  background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(169,167,168);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(-1);
[/class]

[class=content]
  height: 450px;
  transform: scaleY(-1);
  width: 100%;
  position: relative;
[/class]

[script class=content on=click]
  slideDown 800 cover
[/script]

[script class=cover on=click]
  slideUp 800
[/script]

[div class=container]
  [div class=content]
  [div=float:center;background-color:white;margin: auto;background-position: 50% 30%;border-radius: 50%;border: 0px solid white;height:100px;width: 100px;overflow:hidden;][IMG]https://78.media.tumblr.com/1ddedc7eee544ce72312eafefd72af39/tumblr_p2tj0i47ks1wfeojto3_400.png[/IMG][/div]
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
[/div]
  [div class=cover]
  [/div]
[/div]
[/nobr][/centerblock]
Click to expand...
omg thank you
 
A standard hidden scroll box should work here. Put a div with width:100%, height: 100%, overflow-Y:scroll, and padding-left: 100px or some big number inside the content div.
 
Alteras said:
Code?
Click to expand...
Code: 
[centerblock=50]
[nobr]
[class=container]
  cursor: pointer;
  display: inline-block;
  position: relative;
  transform: scaleY(-1);
  position: relative;
[/class]

[class=cover]
  background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(169,167,168);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(-1);
[/class]

[class=content]
  height: 450px;
  transform: scaleY(-1);
  width: 100%;
  position: relative;
[/class]

[script class=content on=click]
  slideDown 800 cover
[/script]

[script class=cover on=click]
  slideUp 800
[/script]

[div class=container]
  [div class=content]
[div=text-shadow:1px 1px 1px dimgray;font-size:50px;color:white;text-align:center][font=Damion]I'm On The Hellevator[/font][/div] [div=float:center;background-color:white;margin: auto;background-position: 50% 30%;border-radius: 50%;border: 0px solid white;height:100px;width: 100px;overflow:hidden;][IMG]https://78.media.tumblr.com/1ddedc7eee544ce72312eafefd72af39/tumblr_p2tj0i47ks1wfeojto3_400.png[/IMG][/div]
[div=width:100%, height: 100%, overflow-Y:scroll, and padding-left: 100px]Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  [/div]

[/div]
  [div class=cover]
  [/div]
[/div]
[/div][/nobr][div class=container][/div][/centerblock][div class=container][/div]
 
You had to add width: 100% to the container, overflow: hidden to content, and position absolute to the div.


[class=container] cursor: pointer; display: inline-block; position: relative; transform: scaleY(-1); width:100%; [/class] [class=cover] background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif); background-repeat: no-repeat; background-position: center; background-color: rgb(169,167,168); bottom: 0; left: 0; position: absolute; right: 0; top: 0; transform: scaleY(-1); [/class] [class=content] height: 450px; transform: scaleY(-1); width: 100%; position: relative; overflow: hidden; [/class] [script class=content on=click] slideDown 800 cover [/script] [script class=cover on=click] slideUp 800 [/script] [div class=container] [div class=content]
I'm On The Hellevator
tumblr_p2tj0i47ks1wfeojto3_400.png
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...
[/div] [div class=cover] [/div] [/div]

Code: 
[centerblock=50]
[nobr]
[class=container]
  cursor: pointer;
  display: inline-block;
  position: relative;
  transform: scaleY(-1);
  width:100%;
[/class]

[class=cover]
  background-image: url(https://78.media.tumblr.com/501a200f7635420b2646fd270c4915b9/tumblr_p0can5Zoh01r222g9o1_500.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(169,167,168);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(-1);
[/class]

[class=content]
  height: 450px;
  transform: scaleY(-1);
  width: 100%;
  position: relative;
 overflow: hidden;
[/class]

[script class=content on=click]
  slideDown 800 cover
[/script]

[script class=cover on=click]
  slideUp 800
[/script]

[div class=container]
  [div class=content]
[div=text-shadow:1px 1px 1px dimgray;font-size:50px;color:white;text-align:center;][font=Damion]I'm On The Hellevator[/font][/div][div=float:center;background-color:white;margin: auto;background-position: 50% 30%;border-radius: 50%;border: 0px solid white;height:100px;width: 100px;overflow:hidden;][IMG]https://78.media.tumblr.com/1ddedc7eee544ce72312eafefd72af39/tumblr_p2tj0i47ks1wfeojto3_400.png[/IMG][/div]
[div=width:100%; height: calc(100% - 200px); position:absolute; bottom:0; overflow-Y:scroll; padding-right: 100px]Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  
Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words... Some words...  [/div][/div]
  [div class=cover]
  [/div]
[/div][/nobr][/centerblock]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

Martzi
Help So Many Questions
Replies
2
Views
131
Martzi
Martzi
Back
Top