Posting Table Code?

[Novaskyi]

Once again I come seeking your help because my brain will not allow me to figure out things from Google as to what I want to do.

Okay so I want a posting table with an image faded down into a colour where the text will be and have a scroll bar for the overflow text. But for some reason my coding is seemingly wrong and I don't know what I have done wrong, as it was a pre-made.

Here is the table I am working with; mephrpg.boards.net/post/18
My issue with it is that the scroll bar is not showing up on top of the image. There is already enough text for an overflow and it does scroll, but because the srollbar is not showing it makes the thread look misleading.

Can someone help with this?

- Nova.

[Todge]

Jan 28, 2018 8:12:55 GMT -8 Novaskyi said:

Once again I come seeking your help because my brain will not allow me to figure out things from Google as to what I want to do.

Okay so I want a posting table with an image faded down into a colour where the text will be and have a scroll bar for the overflow text. But for some reason my coding is seemingly wrong and I don't know what I have done wrong, as it was a pre-made.

Here is the table I am working with; mephrpg.boards.net/post/18
My issue with it is that the scroll bar is not showing up on top of the image. There is already enough text for an overflow and it does scroll, but because the srollbar is not showing it makes the thread look misleading.

Can someone help with this?

- Nova.

Give this a go....

[div align="center"]
[div style="width:500px;height:1040px;background-image:url(https://i.imgur.com/CsnrN4l.png);"]
[div style="width:480px;height:680px;"][/div]
[div style="width:480px;height:280px;padding:10px;text-align:justify;overflow:auto;color:#000000;font-family:georgia;font-size:10px;"]
Proin vel sollicitudin lorem. Nulla sit amet iaculis leo. Vivamus molestie dolor et turpis pharetra, eget pellentesque neque auctor. Phasellus suscipit non arcu nec faucibus. Fusce in viverra mi, at porttitor neque. Etiam aliquet condimentum suscipit. Curabitur dignissim mattis tortor. Duis fringilla urna enim, sed ullamcorper dui porttitor non. Integer at leo at diam euismod molestie. Sed ornare fringilla nunc. Integer a facilisis diam.

Vivamus nec mollis leo, quis maximus eros. Phasellus vel leo quam. Suspendisse eget metus dolor. Aenean et consectetur augue. Quisque sed nunc sed tortor bibendum accumsan. Mauris pulvinar maximus nisi non feugiat. Donec at vehicula orci, tempor volutpat tortor. Donec porttitor vel metus nec vulputate. Donec in condimentum magna, vitae imperdiet felis. Nullam imperdiet lobortis malesuada. Curabitur eget nisi maximus, placerat quam id, eleifend augue. Donec est tellus, hendrerit non neque ut, tincidunt auctor mauris. Integer vel orci tempor, porta elit quis, cursus massa. Praesent feugiat ante urna, maximus rhoncus ligula aliquet non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse aliquet efficitur lobortis.

Praesent vitae leo vitae est ornare aliquam ac sit amet nisl. In eleifend nibh eget urna luctus placerat. Nulla volutpat justo quis dignissim scelerisque. Etiam magna enim, euismod vel tincidunt et, volutpat at enim. In nec porttitor eros, ut lacinia neque. Sed a consectetur risus. Phasellus ligula urna, egestas vel nibh ut, hendrerit fermentum enim. Aenean tellus ligula, facilisis non rutrum condimentum, vulputate ac lorem. Donec dictum finibus nisi vel rutrum.

Nulla quis enim ut leo cursus dictum. Vestibulum ut egestas enim, non vulputate libero. Maecenas iaculis vulputate elit vel porta. Praesent dolor orci, tincidunt lacinia odio at, eleifend ullamcorper quam. Pellentesque ornare ipsum sit amet lacus varius finibus. Etiam vulputate convallis dictum. Donec tristique nunc in nisl dapibus placerat. Fusce eget pretium eros, ac vulputate eros. Morbi eu sem id ante lobortis fermentum ac vitae nunc. Ut in sodales nisl, non porttitor tellus. Nam tincidunt ex semper suscipit auctor. Etiam sollicitudin at nibh in tristique. Ut neque neque, dictum dapibus mauris id, congue vulputate turpis.


Aliquam molestie luctus massa, non sollicitudin ex tempor ut. Phasellus sed convallis velit. Curabitur sed mi a lectus gravida suscipit. Suspendisse iaculis tempor elit sed feugiat. Vivamus sed tempor elit. Suspendisse sed accumsan ligula. In sed pulvinar arcu, vel scelerisque mi. Aenean varius purus eget magna facilisis, quis congue nibh gravida. Duis luctus arcu eu eros dignissim, non congue justo finibus. Nam magna justo, finibus quis sollicitudin at, placerat eget magna. Aenean eleifend sed eros eu lobortis. Duis placerat felis vitae sapien hendrerit, eget molestie risus sollicitudin.
[/div]
[/div]
[/div]

[Novaskyi]

OMG YES! Thank you so much.; Todge .
What did I have wrong in the coding? and if I wanted to change the position of the text area to the top as in this image, which bit would I need to edit?

[Todge]

Here's the current code with EVERYTHING that may need changing highlighted...

[div align="center"]
[div style="width:500px;height:1040px;background-image:url(i.imgur.com/CsnrN4l.png);"]
[div style="width:480px;height:680px;"][/div]
[div style="width:480px;height:280px;padding:10px;text-align:justify;overflow:auto;color:#000000;font-family:georgia;font-size:10px;"]
Proin vel sollicitudin lorem. Nulla sit amet iaculis leo. Vivamus molestie dolor et turpis pharetra, eget pellentesque neque auctor. Phasellus suscipit non arcu nec faucibus. Fusce in viverra mi, at porttitor neque. Etiam aliquet condimentum suscipit. Curabitur dignissim mattis tortor. Duis fringilla urna enim, sed ullamcorper dui porttitor non. Integer at leo at diam euismod molestie. Sed ornare fringilla nunc. Integer a facilisis diam.

Vivamus nec mollis leo, quis maximus eros. Phasellus vel leo quam. Suspendisse eget metus dolor. Aenean et consectetur augue. Quisque sed nunc sed tortor bibendum accumsan. Mauris pulvinar maximus nisi non feugiat. Donec at vehicula orci, tempor volutpat tortor. Donec porttitor vel metus nec vulputate. Donec in condimentum magna, vitae imperdiet felis. Nullam imperdiet lobortis malesuada. Curabitur eget nisi maximus, placerat quam id, eleifend augue. Donec est tellus, hendrerit non neque ut, tincidunt auctor mauris. Integer vel orci tempor, porta elit quis, cursus massa. Praesent feugiat ante urna, maximus rhoncus ligula aliquet non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse aliquet efficitur lobortis.

Praesent vitae leo vitae est ornare aliquam ac sit amet nisl. In eleifend nibh eget urna luctus placerat. Nulla volutpat justo quis dignissim scelerisque. Etiam magna enim, euismod vel tincidunt et, volutpat at enim. In nec porttitor eros, ut lacinia neque. Sed a consectetur risus. Phasellus ligula urna, egestas vel nibh ut, hendrerit fermentum enim. Aenean tellus ligula, facilisis non rutrum condimentum, vulputate ac lorem. Donec dictum finibus nisi vel rutrum.

Nulla quis enim ut leo cursus dictum. Vestibulum ut egestas enim, non vulputate libero. Maecenas iaculis vulputate elit vel porta. Praesent dolor orci, tincidunt lacinia odio at, eleifend ullamcorper quam. Pellentesque ornare ipsum sit amet lacus varius finibus. Etiam vulputate convallis dictum. Donec tristique nunc in nisl dapibus placerat. Fusce eget pretium eros, ac vulputate eros. Morbi eu sem id ante lobortis fermentum ac vitae nunc. Ut in sodales nisl, non porttitor tellus. Nam tincidunt ex semper suscipit auctor. Etiam sollicitudin at nibh in tristique. Ut neque neque, dictum dapibus mauris id, congue vulputate turpis.


Aliquam molestie luctus massa, non sollicitudin ex tempor ut. Phasellus sed convallis velit. Curabitur sed mi a lectus gravida suscipit. Suspendisse iaculis tempor elit sed feugiat. Vivamus sed tempor elit. Suspendisse sed accumsan ligula. In sed pulvinar arcu, vel scelerisque mi. Aenean varius purus eget magna facilisis, quis congue nibh gravida. Duis luctus arcu eu eros dignissim, non congue justo finibus. Nam magna justo, finibus quis sollicitudin at, placerat eget magna. Aenean eleifend sed eros eu lobortis. Duis placerat felis vitae sapien hendrerit, eget molestie risus sollicitudin.
[/div]
[/div]
[/div]

I'm sure you know most of it, but I've added everything just for clarification, and in case of questions later..

Red is the dimensions of your image.

Purple is the URL of your image.

Gold is the dimensions of the spacer cell. The width of this cell must be no more than the image width, though it can be less. The height is the distance from the top of the image where you'd like the text to start.

Blue is the dimensions of the text cell.

So, with this in mind, heres the code you'd use for your new image...

[div align="center"]
[div style="width:500px;height:1040px;background-image:url(orig00.deviantart.net/05c1/f/2018/011/2/9/29b29ae1dbe1dd7e582a8e521e511a6a-dbznpw9.png);"]
[div style="width:480px;height:0px;"][/div]
[div style="width:480px;height:280px;padding:10px;text-align:justify;overflow:auto;color:#000000;font-family:georgia;font-size:10px;"]
Proin vel sollicitudin lorem. Nulla sit amet iaculis leo. Vivamus molestie dolor et turpis pharetra, eget pellentesque neque auctor. Phasellus suscipit non arcu nec faucibus. Fusce in viverra mi, at porttitor neque. Etiam aliquet condimentum suscipit. Curabitur dignissim mattis tortor. Duis fringilla urna enim, sed ullamcorper dui porttitor non. Integer at leo at diam euismod molestie. Sed ornare fringilla nunc. Integer a facilisis diam.

Vivamus nec mollis leo, quis maximus eros. Phasellus vel leo quam. Suspendisse eget metus dolor. Aenean et consectetur augue. Quisque sed nunc sed tortor bibendum accumsan. Mauris pulvinar maximus nisi non feugiat. Donec at vehicula orci, tempor volutpat tortor. Donec porttitor vel metus nec vulputate. Donec in condimentum magna, vitae imperdiet felis. Nullam imperdiet lobortis malesuada. Curabitur eget nisi maximus, placerat quam id, eleifend augue. Donec est tellus, hendrerit non neque ut, tincidunt auctor mauris. Integer vel orci tempor, porta elit quis, cursus massa. Praesent feugiat ante urna, maximus rhoncus ligula aliquet non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse aliquet efficitur lobortis.

Praesent vitae leo vitae est ornare aliquam ac sit amet nisl. In eleifend nibh eget urna luctus placerat. Nulla volutpat justo quis dignissim scelerisque. Etiam magna enim, euismod vel tincidunt et, volutpat at enim. In nec porttitor eros, ut lacinia neque. Sed a consectetur risus. Phasellus ligula urna, egestas vel nibh ut, hendrerit fermentum enim. Aenean tellus ligula, facilisis non rutrum condimentum, vulputate ac lorem. Donec dictum finibus nisi vel rutrum.

Nulla quis enim ut leo cursus dictum. Vestibulum ut egestas enim, non vulputate libero. Maecenas iaculis vulputate elit vel porta. Praesent dolor orci, tincidunt lacinia odio at, eleifend ullamcorper quam. Pellentesque ornare ipsum sit amet lacus varius finibus. Etiam vulputate convallis dictum. Donec tristique nunc in nisl dapibus placerat. Fusce eget pretium eros, ac vulputate eros. Morbi eu sem id ante lobortis fermentum ac vitae nunc. Ut in sodales nisl, non porttitor tellus. Nam tincidunt ex semper suscipit auctor. Etiam sollicitudin at nibh in tristique. Ut neque neque, dictum dapibus mauris id, congue vulputate turpis.


Aliquam molestie luctus massa, non sollicitudin ex tempor ut. Phasellus sed convallis velit. Curabitur sed mi a lectus gravida suscipit. Suspendisse iaculis tempor elit sed feugiat. Vivamus sed tempor elit. Suspendisse sed accumsan ligula. In sed pulvinar arcu, vel scelerisque mi. Aenean varius purus eget magna facilisis, quis congue nibh gravida. Duis luctus arcu eu eros dignissim, non congue justo finibus. Nam magna justo, finibus quis sollicitudin at, placerat eget magna. Aenean eleifend sed eros eu lobortis. Duis placerat felis vitae sapien hendrerit, eget molestie risus sollicitudin.
[/div]
[/div]
[/div]

Which should give you this....

Proin vel sollicitudin lorem. Nulla sit amet iaculis leo. Vivamus molestie dolor et turpis pharetra, eget pellentesque neque auctor. Phasellus suscipit non arcu nec faucibus. Fusce in viverra mi, at porttitor neque. Etiam aliquet condimentum suscipit. Curabitur dignissim mattis tortor. Duis fringilla urna enim, sed ullamcorper dui porttitor non. Integer at leo at diam euismod molestie. Sed ornare fringilla nunc. Integer a facilisis diam.

Vivamus nec mollis leo, quis maximus eros. Phasellus vel leo quam. Suspendisse eget metus dolor. Aenean et consectetur augue. Quisque sed nunc sed tortor bibendum accumsan. Mauris pulvinar maximus nisi non feugiat. Donec at vehicula orci, tempor volutpat tortor. Donec porttitor vel metus nec vulputate. Donec in condimentum magna, vitae imperdiet felis. Nullam imperdiet lobortis malesuada. Curabitur eget nisi maximus, placerat quam id, eleifend augue. Donec est tellus, hendrerit non neque ut, tincidunt auctor mauris. Integer vel orci tempor, porta elit quis, cursus massa. Praesent feugiat ante urna, maximus rhoncus ligula aliquet non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse aliquet efficitur lobortis.

Praesent vitae leo vitae est ornare aliquam ac sit amet nisl. In eleifend nibh eget urna luctus placerat. Nulla volutpat justo quis dignissim scelerisque. Etiam magna enim, euismod vel tincidunt et, volutpat at enim. In nec porttitor eros, ut lacinia neque. Sed a consectetur risus. Phasellus ligula urna, egestas vel nibh ut, hendrerit fermentum enim. Aenean tellus ligula, facilisis non rutrum condimentum, vulputate ac lorem. Donec dictum finibus nisi vel rutrum.

Nulla quis enim ut leo cursus dictum. Vestibulum ut egestas enim, non vulputate libero. Maecenas iaculis vulputate elit vel porta. Praesent dolor orci, tincidunt lacinia odio at, eleifend ullamcorper quam. Pellentesque ornare ipsum sit amet lacus varius finibus. Etiam vulputate convallis dictum. Donec tristique nunc in nisl dapibus placerat. Fusce eget pretium eros, ac vulputate eros. Morbi eu sem id ante lobortis fermentum ac vitae nunc. Ut in sodales nisl, non porttitor tellus. Nam tincidunt ex semper suscipit auctor. Etiam sollicitudin at nibh in tristique. Ut neque neque, dictum dapibus mauris id, congue vulputate turpis.


Aliquam molestie luctus massa, non sollicitudin ex tempor ut. Phasellus sed convallis velit. Curabitur sed mi a lectus gravida suscipit. Suspendisse iaculis tempor elit sed feugiat. Vivamus sed tempor elit. Suspendisse sed accumsan ligula. In sed pulvinar arcu, vel scelerisque mi. Aenean varius purus eget magna facilisis, quis congue nibh gravida. Duis luctus arcu eu eros dignissim, non congue justo finibus. Nam magna justo, finibus quis sollicitudin at, placerat eget magna. Aenean eleifend sed eros eu lobortis. Duis placerat felis vitae sapien hendrerit, eget molestie risus sollicitudin.