tumblr: how do I make my posts stop at a certain margin?
Question
I'm confused as to how I am supposed to make my posts disappear while scrolling...I want my posts to be like this http://yukoki.tumblr.com/page/4 (so once you scroll, it disappears like his black stary header for example). This is my theme http://macaiylaedwards.tumblr.com/ I'm basically using images as my header if thats the problem but there must be a solution. Tried making another wrap around the posts but it didn't work. I'll leave my coding here as well..thanks.
<!DOCTYPE html> <html> <html lang="en"> <head> <title></title> <link rel="shortcut icon" href="{Favicon} />" <meta name="color:Sidebar Background" content="#000000" /> <meta name="color:Background" content="#000000" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> a:link, a:active, a:visited{ color: {color:Link}; color:#000000; } body{ color:#000000; background-color:{color:bg}; background-image:url({image:background}); Background-attachment: fixed; background-repeat:no-repeat; background-size:cover; margin:0; word-wrap: break-word; } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .desc{ position:fixed; margin-top:280px; margin-left:860px; width:400px; height:300px; font-family:0px; letter-spacing:1px; } .nav{ position:fixed; margin-top:300px; margin-left:880px; } .pt{ width:500px; margin-top:400px; margin-left:700px; background-color:#fff; position:absolute; padding:5px; } .pt2{ padding:10px; background-color:#fff; width:500px; float:left; margin:2px; background-color:transparent; } .cutebox{ position:auto; width:auto; border:1px solid #292c34; } </style> </head> <body> {block:More}<a href="{Permalink}">READ MORE</a>{/block:More} <div class="desc"> {description} </div> <div style="position: fixed;width: 100%;z-index: 10;"> <img src="http://i1298.photobucket.com/albums/ag50/macaiyla/world_zpswu8twdm2.png" height=650 style="position:fixed;bottom:600px;left:750px;z-index:999"/> <img src="http://i1298.photobucket.com/albums/ag50/macaiyla/888_zpsopwexxl4.png" height=210 style="position:fixed;bottom:720px;left:550px;z-index:999"/> </div> <select style="width: 200px; border: 0px solid; padding: 3px; color: #292c34; background-color: #f1f1f1; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; position:fixed;bottom:740px;left:880px;z-index:999" onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'> <option>Explore</option> <option value="http://www.tumblr.com/home">Home</option> <option value="http://www.tumblr.com/about">About</option> <option value="http://www.tumblr.com/home/photography">Photography</option> <option value="http://www.tumblr.com/contact">Contact</option> <option value="http://www.tumblr.com/ask">Ask me</option> </select> <div class="pt"> {block:posts} <div class="pt2" {block:Photo} {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag} <div class="cutebox"> {block:Caption}<center>{Caption}</center>{/block:Caption} </div> {/block:Photo} </div> {/block:posts} </div> </body> </html>
1 answers
solution1
0 2015-10-26 21:15:58
Here is a basic example using some of the code from the tumblr that you linked to.
The template has a div at the top of the theme with the id of top:
<div id="top"></div>
This div has certain css properties, the important one being position:fixed (which means it is always in the viewport when scrolling.
#top {
background-image: url(http://38.media.tumblr.com/tumblr_m8nhk3w96X1r9g6hvo2_250.gif);
top: 0;
left: 0;
width: 100%;
height: 110px;
position: fixed;
z-index: 1001;
}
You have to specify the width when using fixed positioning so in this case set it to 100%. The item also has a height, so in this instance I have added the same amount of padding to the next element as the height of the top div. Otherwise the next element would be hidden beneath the fixed header.
jsfiddle: http://jsfiddle.net/lharby/6Lbtsfwx/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.