I am trying to code Groucho's TC and I want to force it to only have a horizontal scroll. So far nothing I have looked up has helped. I want to keep that scrollbar below my filmstrip unless there is a better way.

Any help is appreciated! Please ping me :D

i'm not sure, it seems like there would be a way to do this by fiddling with "overflow-x" and "overflow-y" (i.e. setting overflow-y to hidden and overflow-x to scroll), but it looks like the way treasure chests are coded is to simply move anything that doesn't fit on one row to the next row… so… OH! i just thought of something. maybe you could make the treasure itself wide enough to accommodate all the items on one row, and then place it inside of a div that is only as wide as the film strip section, and set the overflow of the div to scroll? i will admit, i am not very experienced with this kind of thing so i can't seem to get the TC to actually go inside the added div… but maybe, just maybe it could work? right now what i'm doing on bow tie's page is, inside the style tags:

{position:absolute; top:212px; left:939px; width:280px; height:135px; overflow:scroll; border:3px solid;}

{position:absolute; top:212px; left:939px; width:500px; height:135px; overflow:auto;}

and outside of the style tags:

(the red outlined box is the "contain" div.) but, and maybe this is just me being dumb, the TC doesn't actually go inside the "contain" div and i am not really sure how to make that work :/

alternatively: i'm not sure if you want to add more items to that TC in the future, but currently it looks like you only have one extra item sitting on its own row, and if you intend to keep the number of TC items the same, you could simply make the TC item images a little smaller so they all fit on one row.

Yeah all the things that I looked up said to do the hidden y overflow and it just doesn't like that x.x And I was hoping to find a way because I am the type that likes big TCs xD

i'm sure there's a way, though, to put a div inside another div? i just couldn't get it to work, but if you could, then i think my idea of making the TC really wide and then hiding the excess with an overflow:scroll on the containing div could work.

I will play around with it and see what I can figure out!

I don't really have any suggestions beyond what Frenchi has suggested, especially since you like big TCs. Well, depending on how big, an option that might work would be to code the positioning for each TC item separately c: (eg: .treasure_item {position:absolute; top: 5px; left:5px; } )

An idea, though, maybe you could make the film strip vertical instead of horizontal? It might take some positioning and thought/designing to look as well as it would horizontally, but that way, you'd just have to change the width of the TC div and have the overflow be auto?

I've never been able to find a way to get the actual TC to scroll horizontally, and I have no idea why it won't, but I suppose you could always make a new DIV and add the item images in yourself. That's honestly the only thing I could think of that might work. :x

Yeah I have been trying everything. I think I am going to have to redo the layout ;-;

I think I miiight have actually found a way to do this (after failing about 100 times before).. I just need to make sure it really works xD But first I need some sleep c:

SLEEP IS GOOD BUT I AM ALSO EXCITED YOU MAY HAVE FOUND A SOLUTION

Okay, so the solution that initially seemed tp work did unfortunately not work v_v But I found another solution. It's quite a lot to write since it positions all treasure items seperately. (If only I could use n in calculating a position... That would have made everything so easy and it would have been only one line of code!) So here's what I did: I made a normal treasure box (set a width, height and overflow to auto). And then I added .treasure_item {position: absolute;} so I could position the items manually. And I followed with this {margin-left: calc(1 * 71px);} {margin-left: calc(2 * 71px);} which makes it so that the second item is 71px to the left of the first and the third item is 142px to the left of the first. I used the calc function so you don't have to calculate every single distance and because it makes it much easier to change the distance via search and replace. Unfortunately it leads to quite a bit of code but at least it works! [spoiler=Code] {position: absolute; left: -21px; top: 190px; width: 342px;height: 85px; overflow: auto;padding:0;} .treasure_item {position: absolute;} {margin-left: calc(1 * 71px);} {margin-left: calc(2 * 71px);} {margin-left: calc(3 * 71px);} {margin-left: calc(4 * 71px);} {margin-left: calc(5 * 71px);} {margin-left: calc(6 * 71px);} {margin-left: calc(7 * 71px);} {margin-left: calc(8 * 71px);} {margin-left: calc(9 * 71px);} {margin-left: calc(10 * 71px);} {margin-left: calc(11 * 71px);} {margin-left: calc(12 * 71px);} {margin-left: calc(13 * 71px);} {margin-left: calc(14 * 71px);} {margin-left: calc(15 * 71px);} {margin-left: calc(16 * 71px);} {margin-left: calc(17 * 71px);} {margin-left: calc(18 * 71px);} {margin-left: calc(19 * 71px);} {margin-left: calc(20 * 71px);}[/Spoiler]

So basically once I get a large TC, this will be too much and I will hit the maximum amount of coding xD

You can actually use external files as stylesheet which would avoid that issue.^^ You just have to code it like this <style type="text/css"> url(http://example/file.css); </style> You just need somewhere where you can upload files that aren't images. I usually use dropbox for that^^

Athene is a miracle worker and so this can be closed!