|
Post by ani on Mar 24, 2015 13:04:43 GMT -8
The site is here. I would like my sidebar to scroll with the rest of my site. I don't know why it does not. I know how to make it scroll on its own, but I'd like it to scroll with my site as I go down the boards. Thank you.
|
|
|
Post by PHARAOH LEAP on Mar 24, 2015 14:37:42 GMT -8
Ah, that's because you have the sidebar set to "position:fixed", which means it's fixed to the screen. I recommend changing it to "position:absolute" in order to fix the problem without having to fiddle around with margins and such. c:
|
|
|
Post by ani on Mar 24, 2015 19:33:40 GMT -8
PHARAOH LEAPWell that fixed my scrolling issue, but now I have the issue wherein the colouring for the banner disappears halfway down the page! Thank you. Any thoughts on this issue?
|
|
|
Post by PHARAOH LEAP on Mar 24, 2015 20:49:33 GMT -8
Oh, yeah, that, uh- I had that problem with a sidebar I did a while back, too. The only fix that I found that worked was actually making the "background" it's own div tag and setting that to fixed, then having the contact overlap it with the position set to absolute. The problem with that is that, if you scroll horizontally, it stays stuck to the side of the screen, but if you want the background to extend all the way to the bottom, that's about the only solution there is. ;o;
|
|
|
Post by ani on Mar 24, 2015 23:09:24 GMT -8
PHARAOH LEAPI think I understood about a third of that. But I'll try to figure it out and let you know.
|
|
|
Post by ani on Mar 25, 2015 8:19:29 GMT -8
PHARAOH LEAPOkay so, I tried overlapping the two, but that created what you can see now, which is that the sidebar is back to being fixed. I tried making the background before the sidebar div tag, but that just kept it from showing up. Help?
|
|
|
Post by PHARAOH LEAP on Mar 25, 2015 14:17:10 GMT -8
Hm... Here, how about this? If I may, can I ask for whatever CSS and HTML coding you have for the sidebar? That way I can see where it might have gone wrong/tell you exactly what to put where to be a little more clear. I'm really sorry, I'm so horrible at explaining... pretty much anything. X'D Please bear with me.
|
|
|
Post by ani on Mar 25, 2015 19:21:15 GMT -8
PHARAOH LEAPSure, sorry for being so code illiterate. CSS: /* Sidebar */ .sidebar { width: 270px; height: 100%; position: absolute; }
.sidebar-background { background-color: #4B4B4B; border-right: 10px solid #424242; position: fixed; }
HTML: <div class="sidebar"><div class="sidebar-background"></div></div>
|
|
|
Post by PHARAOH LEAP on Mar 25, 2015 19:44:07 GMT -8
Oh, no, nothing to apologize for! It's my fault for not being able to communicate clearly enough. X'D This should be an easy fix, though:
1) Move the height:100% from the .sidebar to the .sidebar-background . 2) Put the <div class="sidebar-background"></div> outside of - preferably in front of, as well - the <div class="sidebar"></div> . So it should look more like: <div class="sidebar-background"></div><div class="sidebar"></div> .
In the instance than your info disappears, add "z-index:1;" to your .sidebar CSS. If that's not a problem, though, then it's... not a problem and doesn't need fixing. XD
Hopefully this helps?
|
|
|
Post by ani on Mar 27, 2015 15:18:38 GMT -8
PHARAOH LEAPIt worked! Thank you so much, you were a great help~
|
|