Vertical Text Help

options
Vertical Text Help written Jun 2, 2020 6:09:10 GMT
Rodent King
aliasditz
pronounsMale
1,755written posts
Mouseearned bits
offlinecurrently
Mouse
Part of the Furniture
Mouse Avatar
where fears and lies melt away.
I'm currently working on a proboards template and I'd like to get a word to run along the side of it vertically. At the moment I'm using tables to accomplish, but as you'll see below it's leaving a huge gap between two sections of the template. Is there a better way to do this or am I just missing something? I'd really appreciate someone's help in trying to figure this out.
options
Vertical Text Help written Jun 2, 2020 6:09:22 GMT
Rodent King
aliasditz
pronounsMale
1,755written posts
Mouseearned bits
offlinecurrently
Mouse
Part of the Furniture
Mouse Avatar
where fears and lies melt away.
R
A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis nibh arcu, id rutrum magna varius non. Praesent nec maximus sapien, id consectetur nunc. Curabitur porta mauris ipsum, at faucibus diam malesuada in. Pellentesque hendrerit, metus sed accumsan malesuada, arcu eros feugiat est, eget volutpat mauris ex non mi. Pellentesque consectetur sed lacus vitae posuere. Praesent consequat dui non porta luctus. Duis aliquet varius quam, congue consectetur enim. Nunc at dictum leo. Duis mollis scelerisque lacus eu iaculis. Vivamus ultricies orci quis mauris gravida convallis.

Vivamus ac ex augue. Fusce ultricies diam enim, sit amet lobortis libero rutrum ut. Aenean vitae nisi purus. Vestibulum quis tellus leo. Integer dignissim justo augue, nec porta ante iaculis ut. Donec a fermentum urna, tincidunt malesuada arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin condimentum velit lorem, vitae vehicula erat eleifend ac. Nullam eu justo sit amet erat gravida venenatis vitae et turpis. Suspendisse a lorem bibendum, blandit ex et, convallis lorem.

Pellentesque pulvinar ipsum eros, ac venenatis eros accumsan ac. Vivamus sit amet enim elit. Integer rhoncus hendrerit neque ut pharetra. Quisque commodo velit id rhoncus egestas. Praesent interdum pretium ligula, sit amet malesuada neque sagittis id. Aenean consectetur orci orci, nec maximus magna lobortis ac. Donec viverra justo et mi consequat vulputate. Mauris viverra nunc in sapien fermentum dapibus. Etiam quis maximus velit.

Phasellus a mauris ut nulla feugiat scelerisque. Donec vitae commodo dui. Integer non orci ligula. Nullam id nunc nulla. Nunc vitae diam aliquam, consectetur metus quis, mollis est. Ut lacus leo, semper sit amet tellus sit amet, ultricies suscipit augue. Nam dictum mi id dui eleifend, eu dictum elit cursus. Fusce dapibus metus nulla, sed suscipit mi rhoncus feugiat. Maecenas tellus lectus, auctor eu tempus eget, rutrum nec magna. Vestibulum fermentum risus a dolor viverra congue.

Ut ut ipsum facilisis, ornare dui sit amet, lobortis erat. Aliquam non leo quis est ultricies pharetra non ac risus. Donec nec dui purus. Phasellus sed ultrices urna. Vivamus ut sem sit amet turpis hendrerit lobortis. Integer faucibus orci lorem, at faucibus dui volutpat eu. Phasellus id mollis odio. Maecenas tincidunt placerat egestas. Sed pretium massa vitae lectus mollis, in aliquam mauris semper. Suspendisse neque arcu, elementum quis ante at, interdum commodo felis. Donec quis diam ut dolor laoreet feugiat quis nec ex. In viverra quam vel enim vestibulum, eget porttitor nulla consectetur.

Aliquam tincidunt, mauris et convallis ultrices, ex dolor placerat lorem, eget lacinia tellus nulla eu lorem. Duis maximus risus at tortor faucibus auctor. Phasellus vulputate venenatis nulla, eget viverra felis fermentum at. Vestibulum nisi ante, porta eu blandit et, consequat eget nisl. Vestibulum mi orci, lobortis at urna nec, sollicitudin pulvinar nisi. Nunc volutpat, sem nec consectetur sollicitudin, arcu libero pulvinar lectus, sit amet semper justo mi quis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet placerat sapien.
options
Vertical Text Help written Jun 2, 2020 6:45:34 GMT
stultifera navis
aliasnines
pronounsshe/her
583written posts
ninelieearned bits
offlinecurrently
ninelie
Part of the Furniture
ninelie Avatar
VOLITION [Medium: Success]
You're probably better off giving that table containing the letters 'RA' with a 'position:relative;'. Remove the negative left margin. Then, go to the td containing the 'RA' letters and then give it 'position:absolute;'. Reposition it's spot with 'left:-60px;' or something.


I'm assuming this is what you want to create, correct?

TL;DR Make the parent container/div have the 'position:relative;' property. You can then declare child elements with 'position:absolute;' so that it will be 'float' on top of the content, relative to the parent container's dimensions. Position its coordinates with top/left with pixel values.
options
Vertical Text Help written Jun 2, 2020 15:53:06 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
Was there any particular reason you only used table for the vertical words, but regular divs for the other parts? I think for consistency's sake it'd be easier to either have them all in one table or all in divs. If you put the whole thing in tables, you could then structure it as a 2x2 table, but with the first cell spanning 2 rows, like so:

R
A
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis nibh arcu, id rutrum magna varius non. Praesent nec maximus sapien, id consectetur nunc. Curabitur porta mauris ipsum, at faucibus diam malesuada in. Pellentesque hendrerit, metus sed accumsan malesuada, arcu eros feugiat est, eget volutpat mauris ex non mi. Pellentesque consectetur sed lacus vitae posuere. Praesent consequat dui non porta luctus. Duis aliquet varius quam, congue consectetur enim. Nunc at dictum leo. Duis mollis scelerisque lacus eu iaculis. Vivamus ultricies orci quis mauris gravida convallis.

Vivamus ac ex augue. Fusce ultricies diam enim, sit amet lobortis libero rutrum ut. Aenean vitae nisi purus. Vestibulum quis tellus leo. Integer dignissim justo augue, nec porta ante iaculis ut. Donec a fermentum urna, tincidunt malesuada arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin condimentum velit lorem, vitae vehicula erat eleifend ac. Nullam eu justo sit amet erat gravida venenatis vitae et turpis. Suspendisse a lorem bibendum, blandit ex et, convallis lorem.

Pellentesque pulvinar ipsum eros, ac venenatis eros accumsan ac. Vivamus sit amet enim elit. Integer rhoncus hendrerit neque ut pharetra. Quisque commodo velit id rhoncus egestas. Praesent interdum pretium ligula, sit amet malesuada neque sagittis id. Aenean consectetur orci orci, nec maximus magna lobortis ac. Donec viverra justo et mi consequat vulputate. Mauris viverra nunc in sapien fermentum dapibus. Etiam quis maximus velit.

Phasellus a mauris ut nulla feugiat scelerisque. Donec vitae commodo dui. Integer non orci ligula. Nullam id nunc nulla. Nunc vitae diam aliquam, consectetur metus quis, mollis est. Ut lacus leo, semper sit amet tellus sit amet, ultricies suscipit augue. Nam dictum mi id dui eleifend, eu dictum elit cursus. Fusce dapibus metus nulla, sed suscipit mi rhoncus feugiat. Maecenas tellus lectus, auctor eu tempus eget, rutrum nec magna. Vestibulum fermentum risus a dolor viverra congue.

Ut ut ipsum facilisis, ornare dui sit amet, lobortis erat. Aliquam non leo quis est ultricies pharetra non ac risus. Donec nec dui purus. Phasellus sed ultrices urna. Vivamus ut sem sit amet turpis hendrerit lobortis. Integer faucibus orci lorem, at faucibus dui volutpat eu. Phasellus id mollis odio. Maecenas tincidunt placerat egestas. Sed pretium massa vitae lectus mollis, in aliquam mauris semper. Suspendisse neque arcu, elementum quis ante at, interdum commodo felis. Donec quis diam ut dolor laoreet feugiat quis nec ex. In viverra quam vel enim vestibulum, eget porttitor nulla consectetur.

Aliquam tincidunt, mauris et convallis ultrices, ex dolor placerat lorem, eget lacinia tellus nulla eu lorem. Duis maximus risus at tortor faucibus auctor. Phasellus vulputate venenatis nulla, eget viverra felis fermentum at. Vestibulum nisi ante, porta eu blandit et, consequat eget nisl. Vestibulum mi orci, lobortis at urna nec, sollicitudin pulvinar nisi. Nunc volutpat, sem nec consectetur sollicitudin, arcu libero pulvinar lectus, sit amet semper justo mi quis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet placerat sapien.


In the above version, the vertical text would be aligned to the height of the whole table. In the following, it would align to the height of the text area only. I made it align to the tops rather than the middle so the difference is easier to see.

R
A
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis nibh arcu, id rutrum magna varius non. Praesent nec maximus sapien, id consectetur nunc. Curabitur porta mauris ipsum, at faucibus diam malesuada in. Pellentesque hendrerit, metus sed accumsan malesuada, arcu eros feugiat est, eget volutpat mauris ex non mi. Pellentesque consectetur sed lacus vitae posuere. Praesent consequat dui non porta luctus. Duis aliquet varius quam, congue consectetur enim. Nunc at dictum leo. Duis mollis scelerisque lacus eu iaculis. Vivamus ultricies orci quis mauris gravida convallis.

Vivamus ac ex augue. Fusce ultricies diam enim, sit amet lobortis libero rutrum ut. Aenean vitae nisi purus. Vestibulum quis tellus leo. Integer dignissim justo augue, nec porta ante iaculis ut. Donec a fermentum urna, tincidunt malesuada arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin condimentum velit lorem, vitae vehicula erat eleifend ac. Nullam eu justo sit amet erat gravida venenatis vitae et turpis. Suspendisse a lorem bibendum, blandit ex et, convallis lorem.

Pellentesque pulvinar ipsum eros, ac venenatis eros accumsan ac. Vivamus sit amet enim elit. Integer rhoncus hendrerit neque ut pharetra. Quisque commodo velit id rhoncus egestas. Praesent interdum pretium ligula, sit amet malesuada neque sagittis id. Aenean consectetur orci orci, nec maximus magna lobortis ac. Donec viverra justo et mi consequat vulputate. Mauris viverra nunc in sapien fermentum dapibus. Etiam quis maximus velit.

Phasellus a mauris ut nulla feugiat scelerisque. Donec vitae commodo dui. Integer non orci ligula. Nullam id nunc nulla. Nunc vitae diam aliquam, consectetur metus quis, mollis est. Ut lacus leo, semper sit amet tellus sit amet, ultricies suscipit augue. Nam dictum mi id dui eleifend, eu dictum elit cursus. Fusce dapibus metus nulla, sed suscipit mi rhoncus feugiat. Maecenas tellus lectus, auctor eu tempus eget, rutrum nec magna. Vestibulum fermentum risus a dolor viverra congue.

Ut ut ipsum facilisis, ornare dui sit amet, lobortis erat. Aliquam non leo quis est ultricies pharetra non ac risus. Donec nec dui purus. Phasellus sed ultrices urna. Vivamus ut sem sit amet turpis hendrerit lobortis. Integer faucibus orci lorem, at faucibus dui volutpat eu. Phasellus id mollis odio. Maecenas tincidunt placerat egestas. Sed pretium massa vitae lectus mollis, in aliquam mauris semper. Suspendisse neque arcu, elementum quis ante at, interdum commodo felis. Donec quis diam ut dolor laoreet feugiat quis nec ex. In viverra quam vel enim vestibulum, eget porttitor nulla consectetur.

Aliquam tincidunt, mauris et convallis ultrices, ex dolor placerat lorem, eget lacinia tellus nulla eu lorem. Duis maximus risus at tortor faucibus auctor. Phasellus vulputate venenatis nulla, eget viverra felis fermentum at. Vestibulum nisi ante, porta eu blandit et, consequat eget nisl. Vestibulum mi orci, lobortis at urna nec, sollicitudin pulvinar nisi. Nunc volutpat, sem nec consectetur sollicitudin, arcu libero pulvinar lectus, sit amet semper justo mi quis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet placerat sapien.


options
Vertical Text Help written Jun 21, 2020 20:57:45 GMT
3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.