- This topic is empty.
-
AuthorPosts
-
October 26, 2012 at 5:36 am #40468
bogus
ParticipantHello all and Hello CSS-Tricks forums!
Ugs, what a post title..
Ok, I’m building a blog theme with a fullscreen image background in every post. [This](http://fb.megavillain.org/HTML/index.html “This”) is what i have so far.
Now, when I click the archive button I want the Post+fullscreen image to scroll up (which i’ve done with jquery) to get to the posts overview. The overview thumbnails are displayed using masonry. But I need the overview page to be scrollable in order to see all posts there. I’d like to have the posts lazyloaded later. How can I get the overview page to be scrollable while the post page is not?
Oh and basically I’m a newbie to all the markup stuff and i’m really inexperienced so maybe my code is well, not so good sometimes. I’d be glad for every hint i get to make things better.
Thanks a lot in advance!
October 26, 2012 at 6:13 am #112725Kitty Giraudel
ParticipantThe problem comes from the fact thumbnails are absolutely positioned. This means they are out of the flow, and that’s why you can’t scroll down. Because, from the browser point of view, there is nothing to scroll.
October 26, 2012 at 6:44 am #110319Taufik Nurrohman
ParticipantJust set the
#container
to beoverflow:auto
:#container {overflow:auto}
Then, with JQuery, set the container height to be same with the window height:
$(window).on("resize", function() {
$('#container').css('height', $(this).height());
}).trigger("resize");October 29, 2012 at 2:25 am #112854bogus
Participanttried it but can’t get it to work. I have no clue how to fix that..
Maybe there is a way of doing this in CSS only except for the moving of the image?
October 29, 2012 at 5:02 am #112858JoniGiuro
ParticipantI got it to work by setting a fixed height to the container (500px) and overflow-y:scroll;
But HugoGiraudel is right, I wouldn’t absolutely position those images.October 29, 2012 at 6:00 am #112862bogus
Participantbut isn’t absolute image positioning demanded by masonry? and how would I have to do it with relative positioning?
October 29, 2012 at 6:17 am #112863October 29, 2012 at 7:15 am #112866bogus
ParticipantoO wow! thank you Hompimpa. That looks fantastic.
November 1, 2012 at 2:30 am #113086JDS
MemberOn a side note bogus, I would change that font color. You can hardly read it on that background.
November 5, 2012 at 3:26 pm #113432bogus
Participantyeah it’s still a mockup and far from being final. thanks nonetheless JDS
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.