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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating Shopping Cart

    Hey guys,

    I wonder if this is possible with html and css:

    I have my slim website and would like to have a shopping cart so basicly a div box next to it. And now comes the key point . I want it to always stay at the same position. So when I scroll it should always be in the middle of the screen and always right next to the main page. I first thought about the attribut position:fixed, bu as soon as I change the size of the browser windows this won't work anymore ...

    Check out my picture if you don't understand what I mean :-)



    Thx in advance

    TempleClause

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Think about fixed positions.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Think about fixed positions.
    Dude emm did you even read my post ?!

    I wrote: "I first thought about the attribut position:fixed, bu as soon as I change the size of the browser windows this won't work anymore ..."

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Sorry, I missed that part in your post. What happens when you change the browser window size? Can we have a link to a demo page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind :-D

    Emm no cause it's not online yet but I did a litte example file:

    Code:
    <html>
    <head>
    <style type="text/css">
    
    
    #left{
    	background:gray;
    	height:500;
    	
    }
    
    #wrap{
    	margin: 0 auto;
    	height:auto;
    	width:800px;
    }
    
    #right{
    	background:black;
    	height:500px;
    	clear:both;
    	
    }
    
    #pic{
    	background:pink;
    	width:200px;
    	height:200px;
    	position:fixed;
    	left:1023px;
    	top:50%;
    	
    }
    </style>
    </head>
    
    <body>
    
    	<div id="wrap">
    		<div id="left"></div>
    		<div id="right"></div>
    	</div>
    	
    	<div id="pic"></div>	
    	
    </body>
    
    </html>
    The pink box is the shopping cart.

    For me if I have the browser maximized the shopping cart stays at the right place. But if you have another browser size it won't work...

    you can try it out yourself with that code :-)

    Cheerio

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    well you ought to be using a doctype so that each browser knows how you want it to display. putting IE into quirks mode will cause you no end of difficulty.

    look into 'margin' for what you want here. margin : 0 auto; can help center things or you can use margin: 0 150px 0 150px; to make the div sit in the middle with a boundary of 150px each side.

    on second read of your last post, you could see what happens if you wrap all the divs in the <div id='wrap'> tag.

    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah sure you're right about the doc type but I was just writing this for a little test :-)

    emm I don't think you can use margin in combination with position:fixed... So I think you didn't get the idea of my objective.

    Cheerio

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    lol; cheerio. I understand the word but it doesn't half sound lke someone who signs out of the forum for ever.

    As for margin and position fixed... I dont know. I have only seen a fixed element used in a JS environment.

    I shall sleep and think some more.
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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