HELOVIA || The Way to the Sun › Out of Character › Player Resources › Growth Center v ⇒ Help me make my table work outside of Tryit Editor ;-;
the Rift


Help me make my table work outside of Tryit Editor ;-;

Ashamin the Clovenheart Posts: 426
Outcast atk: 8 | def: 11.5 | dam: 5.5
Stallion :: Unicorn :: 15.2 HH :: 5 [Frostfall] HP: 79 | Buff: NUMB
Lochan :: Plain Cerndyr :: Dark Mist & Rakt :: Common Cerndyr :: Starpast Jen
#1
05-17-2015, 07:25 PM
Hey there guys...

So this works perfectly in a tryit editor which means it's something conflicting with the site. I don't know how the site's coding works so much, sadly. If I had the energy I could maybe figure this out but I'm just... exhausted. I've been working on this for hours. I suspect my problem is with the first div, since that image for some reason isn't even picking up on the border I've given it. I'm not really sure, though.

Many thanks to any who can help me out. <3

Code:
<head><link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/65635665/beautyisperception.css"></head>

<div class="beautyisperceptiontablebg">    
  <img src="http://i888.photobucket.com/albums/ac90/Adeaz_OMG/beautcropped.png~original" alt="" / border="5px" border color="#000000"></div>
  <div class="beautyisperceptiontablepoem" class="scrollbar" id="style-beautyisperception"><font size=3>
<center><br><div class="hrbeautyisperception">TITLE</div></center><br>
    This text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the image</font>
  </div>

<div class="beautyisperceptiontabletext class="scrollbar" id="style-beautyisperception">
<font size=3>
<br><center><div class="hrbeautyisperception">ASHAMIN<br><font size=4>BEAUTY IS PERCEPTION</font></div></center><br>    
Walking here <div class="beautyspeech"> Talking here </div> This text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the image</font></div>
<center><a href="http://theartlex.deviantart.com/art/Beauty-is-perception-533014939">Beauty is Perception by FoxyFireWings</a>



This includes a linked stylesheet. My stylesheet code looks like this, sorry it is a little messy:
Code:
div.beautyisperceptiontablebg {position:relative}

div.beautyisperceptiontablepoem {
background: url(http://i888.photobucket.com/albums/ac90/Adeaz_OMG/transparentbg.png~original) repeat;
    position:absolute;
left:35;
top:25;
width:160px;
height:440px;
padding:5px 5px 5px 5px;
overflow:scroll;
overflow-y: scroll;
overflow-x: hidden;
text-align: justify;
color: #0A1742;
font-family: "poor richard","Palatino Linotype", "Book Antiqua", Palatino, serif}

div.hrbeautyisperception{
color:#ffffff; font-size:20pt; letter-spacing:5pt; line-height:7pt; text-shadow: 0px 0px 5px #000000;}

beautyspeech{
color:#ffffff; font-size:10pt; letter-spacing:2pt; line-height:5pt; text-shadow: 0px 0px 5px #000000;}

#style-beautyisperception::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    
}

#style-beautyisperception::-webkit-scrollbar
{
    width: 1px;

}

#style-beautyisperception::-webkit-scrollbar-thumb
{
    background-color: #BDD2D9;
    border: 0px solid #555555;
}

div.beautyisperceptiontabletext {
background: url(http://i888.photobucket.com/albums/ac90/Adeaz_OMG/transparentbg.png~original) repeat;
position:absolute;
left:230;
top:25;
width:345px;
height:310px;
padding:5px 5px 5px 5px;
overflow:scroll;
overflow-y: scroll;
overflow-x: hidden;
text-align: justify;
color: #0A1742;
font-family: "poor richard", "Palatino Linotype", "Book Antiqua", Palatino, serif}


See Ashamin's profile for more information about Lochan, Rakt, and his various items.
All magic and force allowed, barring death and permanent injury.
Do not tag me, please message on skype instead
Find

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#2
05-17-2015, 07:28 PM
By setting the top as a relative position, you are putting it relative to the site :) you would have do set it as a background image and essentially re-code how you've set it up
Find

Ashamin the Clovenheart Posts: 426
Outcast atk: 8 | def: 11.5 | dam: 5.5
Stallion :: Unicorn :: 15.2 HH :: 5 [Frostfall] HP: 79 | Buff: NUMB
Lochan :: Plain Cerndyr :: Dark Mist & Rakt :: Common Cerndyr :: Starpast Jen
#3
05-17-2015, 07:31 PM
Poop! So I've gotta start again, basically?

I tried figuring out how to do it as a BG image and I couldn't get it to work with float and the image wouldn't be the size I wanted, hence deciding to work with relative. Could you help me out/give me any advice?

Thanks @[Tamme] <3


See Ashamin's profile for more information about Lochan, Rakt, and his various items.
All magic and force allowed, barring death and permanent injury.
Do not tag me, please message on skype instead
Find

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#4
05-17-2015, 07:43 PM
Eerrrr lemme try putting it in jsfiddle and seeing what it was supposed to look like and then I'll see how to fix it. It may be that you can bound it all by an expanding table code and remove the relative position bit.

Otherwise, maybe just using margins

I'll take a look!
Find

Ashamin the Clovenheart Posts: 426
Outcast atk: 8 | def: 11.5 | dam: 5.5
Stallion :: Unicorn :: 15.2 HH :: 5 [Frostfall] HP: 79 | Buff: NUMB
Lochan :: Plain Cerndyr :: Dark Mist & Rakt :: Common Cerndyr :: Starpast Jen
#5
05-17-2015, 07:47 PM
Thanks Tamme. <3

I wasn't using JS Fiddle, I was using Try-it-editor. Apparently it doesn't work in JS but it does work in Tryit so you can see how it should have looked.


See Ashamin's profile for more information about Lochan, Rakt, and his various items.
All magic and force allowed, barring death and permanent injury.
Do not tag me, please message on skype instead
Find

Ashamin the Clovenheart Posts: 426
Outcast atk: 8 | def: 11.5 | dam: 5.5
Stallion :: Unicorn :: 15.2 HH :: 5 [Frostfall] HP: 79 | Buff: NUMB
Lochan :: Plain Cerndyr :: Dark Mist & Rakt :: Common Cerndyr :: Starpast Jen
#6
05-17-2015, 09:29 PM (This post was last modified: 05-17-2015, 09:36 PM by Ashamin.)
@[Serenity] YOU ARE AMAZING ;-;.

I gave you credit. <3



Title

This text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the image

ASHAMIN
BEAUTY IS PERCEPTION
Walking here
Talking here
This text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the imageThis text is on top of the image
Beauty is Perception by FoxyFireWings
Table by Jen, with help from Avis


See Ashamin's profile for more information about Lochan, Rakt, and his various items.
All magic and force allowed, barring death and permanent injury.
Do not tag me, please message on skype instead
Find

Time the Dice Queen Posts: 144
OOC Account atk: 50 | def: 50 | dam: 50
Mare :: Other :: 5'7 :: 22 HP: 5050 | Buff: DROPKICK
Time
#7
05-17-2015, 09:32 PM
EEEE LOOK AT THAT 8D
Find


Forum Jump:


RPGfix Equi-venture