Fri, 2010-08-27 09:33
I want to make some of my elements scroll with my scrolling.
Like here : http://peppermintuniverse.tumblr.com/
I have searched Google, but don't really know what to look for, I found other scrolling stuff...
I searched this forum, still nothing on that.
Fri, 2010-08-27 13:41
#1
position: fixed;
position: fixed;
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-08-27 21:30
#2
So if i would like to make
So if i would like to make left side scrolling with me, then add position: fixed; elements that I choose? Would it mess up something too?
http://s776.photobucket.com/albums/yy42/TheVasar/?action=view¤t=tumblr_illusio.png
Fri, 2010-08-27 21:45
#3
vasar wrote: So if i would
So if i would like to make left side scrolling with me, then add position: fixed; elements that I choose?
IF you want elements to "stick" to the page, then yes.
Would it mess up something too?
Try it and find out.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Sat, 2010-08-28 18:18
#4
I tried it, element
I tried it, element disappeared...
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Illusio</title> <style> body { background:#d5d5d5; } #left { background:url(img/bg_left.png); background-repeat:no-repeat; text-indent: -9999px; margin: -10px 0px -10px -10px; min-height:1024px; } .logo h1 { text-indent: -9999px; margin:0px; display:block; } .logo { background:url(img/logo.png) no-repeat; margin-top: 55px; left: 47px; width: 250px; height: 70px; position:absolute; } #left ul#socialicons { overflow: hidden; list-style: none; margin: 0 0 30px 0; } #left ul#socialicons li { float: left; margin-top: 251px } #left ul#socialicons li a { display: block; width: 32px; height: 32px; text-indent: -9999px; } #left ul#socialicons li a.twitter { background: url(img/twitter_h.png); margin-left: 15px; } #left ul#socialicons li a.facebook { background: url(img/facebook_h.png); margin-left: 15px; } #left ul#socialicons li a.flickr { background: url(img/flickr_h.png); margin-left: 15px; } #left ul#socialicons li a.deviantart { background: url(img/deviantart_h.png); margin-left: 15px; } #left ul#socialicons li a.twitter:hover { background: url(img/twitter.png); margin-left: 15px; } #left ul#socialicons li a.facebook:hover { background: url(img/facebook.png); margin-left: 15px; } #left ul#socialicons li a.flickr:hover { background: url(img/flickr.png); margin-left: 15px; } #left ul#socialicons li a.deviantart:hover { background: url(img/deviantart.png); margin-left: 15px; } .wrapper2 { padding: 10px 10px 10px 10px; } wrapper { padding: 10px 10px 10px 10px; } </style> </head> <body> <div id="left"> <div class="logo"> <h1>illusio</h1> </div> <ul id="socialicons"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="flickr">Flickr</a></li> <li><a href="#" class="deviantart">DeviantArt</a></li> </ul> </div> </body> </html>
#left ul#socialicons { overflow: hidden; list-style: none; margin: 0 0 30px 0; position: fixed; }
and it is gone.
Sun, 2010-08-29 13:12
#5
Position: fixed
Read the directions on position: fixed:
http://www.w3.org/TR/CSS21/visuren.html#position
This fixes the element to the viewport, not other elements.
The downside to this is, the element is completely out of the document flow. If the content is lower than the user's browser height, or has content stretching further to the right than the user's browser width, that content cannot be accessed. It is gone for that user, unless they can find a larger screen.
To see the fixed element, make sure it has a set height, width, and a background colour while testing.