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 2 of 2

Thread: CSS positioning

  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    12
    Thanks
    9
    Thanked 0 Times in 0 Posts

    CSS positioning

    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
    Last edited by kcwoodfield; 02-21-2010 at 09:10 AM.

  • #2
    New Coder
    Join Date
    Feb 2010
    Location
    Texas
    Posts
    31
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Fixed positioning

    That effect is created using fixed positioning in CSS. Here is a simple example you can follow

    Code:
    <!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>

  • Users who have thanked Josephbm91 for this post:

    kcwoodfield (02-21-2010)


  •  

    Posting Permissions

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