Replies

Dec 14, 2018 7 years ago
Trott
is made of stardust
User Avatar
Chronomancer

Hi, there! This may sound like a really dumb question, but I'm still pretty new to coding profiles and the like.. Unfortunately, I tend to be really ambitious (at least, relative to my lack of knowledge) with ideas for particular profiles. I think I've done just that again. The profile in question is

Trott's profile, which I'm coding by hand, though it's nothing impressive. I want it to be a simple tabbed profile, with the tabs on the side bar. They're currently the images above the description box.

The only issue I've run into thus far is.... Is it possible to do something like.. When I click on tab 1, the image in the center changes, and then when I click on tab 2, it changes to something else? Currently there's no image in the center, but what I planned to do was put a full body picture of him on the intro tab (so, default tab or what's linked to by the black icon,) and then when tab 1 is clicked on, a new image shows up in the place of the fullbody, probably a portrait, as well as the text changing.

As I understand the current tabs or anchors, it links to a particular, single div, so the image I want to show up has to be in that div, but I don't want the image to actually be in the div, instead positioned outside of it in the center of the page while the text stays in the div and keeps its scrollbar. Is this possible, or is there another method that retains the behavior I want? Thank you for any help! The graphics and position of some things aren't finished or final, but I wanted to get some of the coding down, so I'd like to figure this part out..

Forum image by Eggoscrombled

Dec 15, 2018 7 years ago
Frenchi
is hopelessly romantic
User Avatar
Vivisect

try setting overflow-x to visible, then manually position the images where you want them. even if they are 'outside' the bounds of the main div, they should still be visible, while maintaining the main div's vertical scrolling.

you can position the images by assigning them a class, and inserting the appropriate image into the appropriate tab div. so for instance: <style> .picture {position: absolute; left: 550px; top: 120px} </style>

text text text
text text text
and so on like that.

Dec 15, 2018 7 years ago
Trott
is made of stardust
User Avatar
Chronomancer

Aaa, that worked!! Thank you! <3 So excited to keep working on his profile~

Forum image by Eggoscrombled

Dec 15, 2018 7 years ago
Frenchi
is hopelessly romantic
User Avatar
Vivisect

awesome, glad it worked! let me know if you have any other questions.

Please log in to reply to this topic.