...

View Full Version : Help with CSS Parallax



wyclef
03-05-2009, 10:28 PM
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/

twodayslate
03-06-2009, 04:28 AM
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

Camron467
03-06-2009, 04:35 AM
I'm not sure I understand what you are asking, try rephrasing your question.

TinyScript
03-06-2009, 08:09 AM
<!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}

twodayslate
03-06-2009, 10:51 PM
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 {}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum