...

View Full Version : CSS positioning



kcwoodfield
02-21-2010, 09:47 AM
Does anyone know how to position a div along the left side of the page. I've been trying to do this and I can't seem to figure it out.

I think it is absolute positioning with a z-index...but i don't know

for example, check out the twitter link here http://coolvibe.com/. (except i'm trying to get it on the left side of the page)

thanks

Josephbm91
02-21-2010, 02:29 PM
That effect is created using fixed positioning in CSS. Here is a simple example you can follow :)




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Position</title>

<style type="text/css">

#wrapper{
margin: 0px auto;
width: 600px;}

#content{
margin: 0px auto;
width: 600px;
background-color: #000000;
color: #FFFFFF;}

#fixed{
border: 0;position: fixed; top: 300px; left:0;
height: 100px; width: 30px;border: 2px solid #000000}

</style>
</head>

<body>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet, nibh eget sodales ultricies, leo magna dignissim massa, nec commodo velit odio ut mauris. Mauris convallis risus facilisis purus tempus sit amet rutrum velit tempus. Fusce vel nibh tellus, ornare faucibus nisl. Cras ut dui nulla. Praesent nec tellus nec magna dapibus molestie eget ac dui. Duis condimentum bibendum ante ac porta. Nullam fringilla adipiscing lacinia. Maecenas magna tortor, gravida vel volutpat ac, luctus ac felis. Aliquam quis ante a nulla rutrum tincidunt. Pellentesque sed sollicitudin dui. Pellentesque id iaculis orci. Curabitur vel faucibus dui. Nullam molestie, metus in tempor gravida, mi felis adipiscing ante, eu varius eros eros non eros. Duis eu tortor sapien, fringilla malesuada massa. Integer convallis, purus vitae ornare lacinia, mauris enim euismod neque, sit amet pharetra justo arcu id urna.

Cras vitae nunc vitae nisi dignissim imperdiet. Maecenas odio leo, fringilla et consequat eu, suscipit nec odio. Cras elementum orci eleifend mi vulputate mattis. Nulla vel lacus ipsum, ut suscipit massa. Pellentesque at quam at odio ullamcorper iaculis eu sit amet sem. Donec egestas consequat ante, quis feugiat arcu feugiat nec. Nullam lorem erat, adipiscing sit amet gravida quis, vulputate vitae libero. Donec hendrerit mauris non elit viverra convallis. Vivamus lobortis sapien sed arcu tincidunt eu posuere nibh interdum. Integer orci erat, accumsan porta feugiat quis, fermentum at nulla. Proin magna mi, iaculis vel imperdiet sed, ultricies id justo. Aliquam vitae risus nibh, sed feugiat enim.

Cras laoreet ornare lacus, nec aliquet metus luctus eget. In et massa a erat dictum venenatis a eu odio. Donec in diam eget metus commodo bibendum. Nulla placerat posuere scelerisque. Mauris id magna nunc, quis eleifend nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse lectus dui, rhoncus blandit scelerisque non, varius id nisl. Ut sagittis tristique dictum. Phasellus interdum porta lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla sagittis risus nec bibendum. Suspendisse vitae dolor vel leo tincidunt ultricies. In semper accumsan dictum. Donec molestie convallis semper. Praesent euismod varius arcu in sodales. Nulla ut enim libero, pulvinar accumsan metus.

Nulla posuere, ligula id eleifend egestas, leo ligula posuere risus, non venenatis sapien augue ac tellus. Nam viverra sagittis tincidunt. Ut dui leo, blandit eu pharetra ac, fermentum nec velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ornare lacinia magna vitae ullamcorper. Donec mauris diam, suscipit vitae fringilla ut, eleifend convallis odio. Aenean accumsan faucibus ipsum in interdum. Sed ornare purus quis nisl fringilla pellentesque. Suspendisse eleifend tincidunt arcu, eget consequat urna consequat id. Phasellus et diam nisl, adipiscing fermentum quam. Sed eu nisi orci. Pellentesque eget fermentum nunc. Phasellus tempor lacus eget quam ullamcorper bibendum. Morbi vulputate turpis at ligula interdum interdum. Curabitur nisi erat, consectetur vel egestas sit amet, rutrum et erat. Curabitur tincidunt suscipit porttitor. Donec sit amet purus augue, sed rutrum augue. Nullam at rhoncus sapien. Curabitur eros lectus, mollis a euismod sit amet, lobortis sit amet orci. Fusce in urna ac sem placerat convallis.

Pellentesque feugiat, massa id congue vestibulum, turpis magna viverra ipsum, eu volutpat nibh enim sed felis. Sed facilisis vestibulum turpis, sed dictum turpis molestie a. Vestibulum et ipsum eget elit pulvinar commodo in sed odio. In massa erat, ultricies id gravida a, pulvinar in risus. Donec tristique, tortor sed consequat volutpat, urna quam tempor magna, a imperdiet est erat ac elit. Vivamus consequat commodo eros sed luctus. Cras et mauris a sapien cursus vehicula ac quis risus. Nullam dapibus dui adipiscing nunc blandit vel feugiat neque elementum. Proin convallis ornare porta. Ut ornare, nisl eget dapibus blandit, ipsum tellus vehicula velit, ac cursus dui mi et nunc. Suspendisse ultrices sapien in lorem imperdiet ac bibendum arcu malesuada. Aenean quis laoreet purus. Proin vitae purus odio. Donec tortor ante, eleifend at rutrum tristique, pretium et diam. Integer nec leo erat. Etiam tortor lorem, sagittis non porta a, interdum eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla lacinia odio posuere est luctus eget placerat nunc ultricies.

</div>

<div id="fixed">
HI
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum