Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Help with CSS Parallax

    Hi there,

    Trying to mess with the CSS Parallax styling and am stuck trying to figure out how to align the foreground with the content when changing the browser width so they don't appear to move at different speeds. I added the arrow simply for registration... i'd like it to be registered at the left edge of the content. I realize I could just yank the arrow out and put it in it's own div but that's not what I'm looking to figure out, the arrow is just for registration.

    Here's the link:

    http://dynodealz.com/q/

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    wtf? really confused? you don't want the arrow to move but you want it in the center all the time? look up css position:.
    or have it have margin: 0 auto; and the content be margin: 0 auto; and they will always be in the center together.

    As for layout technique...
    http://bonrouge.com/3c-hf-fluid-lc.php
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Feb 2009
    Location
    Texas
    Posts
    56
    Thanks
    6
    Thanked 3 Times in 3 Posts
    I'm not sure I understand what you are asking, try rephrasing your question.
    Free PSD to XHTML/CSS conversion - Dimby.net
    Which doctype should I use?

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
            "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
            
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title></title>		
    		<style type="text/css">
    		body {
    			background:#fff; 
    		}
    		#bg{
    			background: transparent url(http://dynodealz.com/q/bg.png) 20% 0 repeat-x;
    			margin: 0;
    			padding: 0;
    			width: 100%;
    			 position: absolute;
    			top: 0; left: 0; right: 0; bottom: 0;
    		}
    		#bg1{
    			background: transparent url(http://dynodealz.com/q/bg1.png) 35% 0 repeat-x;
    			margin: 0;
    			padding: 0;
    			width: 100%;
    			position: absolute;
    			top: 0; left: 0; right: 0; bottom: 0;
    		}
    		#bg2{
    			background: transparent url(http://dynodealz.com/q/bg2.png)  repeat-x; background-position:-200px 0px;
    			margin: 0;
    			padding: 0;
    			width: 100%;
    			position: absolute;
    			top: 0; left: 0; right: 0; bottom: 0;
    		}
    		#content {
    			
    			padding-top: 400px;
    			width: 980px;
    position:fixed
    left:0;
    		}
    		</style>
    	</head>
    	
    	<body>
    		<div id="bg"></div>
    
    		<div id="bg1"></div>
    		<div id="bg2"></div>
    		<div id="container">
    			<div id="content">
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec sem. Integer porta bibendum ipsum. Vivamus vel sapien. Donec bibendum, diam ac pellentesque vehicula, eros lorem pharetra ante, non consectetur arcu arcu id felis. Sed sed ipsum. Sed accumsan, augue vitae aliquet gravida, velit magna molestie sem, quis tempus orci neque et leo. Phasellus id massa. Suspendisse metus nunc, semper sed, tristique sed, ultrices sed, libero. Pellentesque tincidunt nisl sit amet est. Cras rutrum auctor magna. Proin sapien. Donec a odio.Sed sem. Quisque accumsan dignissim nisl. Donec bibendum, enim in suscipit accumsan, ipsum orci cursus urna, dictum iaculis nibh velit id eros. Phasellus porta, libero ut iaculis suscipit, metus dolor viverra est, ac interdum orci magna quis sem. Maecenas auctor pellentesque ligula. Integer ac est vel augue aliquet tincidunt. Phasellus quis orci. Quisque posuere sed magna. Mauris urna nunc, tempor eget, ultrices sed, elementum et, lectus. Fusce mattis convallis elit. In hac habitasse platea dictumst.</p>
    			</div>
    		</div>
    	</body>
    
    </html>
    I'm not sure if this what you were looking for, but the content div image is now stationary in this code. Hope that helps. I also added the positioning of the image so it would be over to the left how your original looked, but I'm not sure if that's what you wanted.

    also, what the heck is div before #... all you need is # and the name of the element

    #Some_Name{some css code}

  • #5
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by TinyScript View Post
    also, what the heck is div before #... all you need is # and the name of the element

    #Some_Name{some css code}
    It makes things more specific. I like it. I usually see it for classes though and not IDs (since they are already specific).

    ul.navigation {}
    li.navigation {}
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •