...

View Full Version : Floating Shopping Cart



TempleClause
09-03-2010, 11:37 PM
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 :-)

http://img546.imageshack.us/img546/7541/82663772.jpg

Thx in advance

TempleClause

abduraooft
09-04-2010, 08:30 AM
Think about fixed positions (http://www.google.com/search?q=CSS+position).

TempleClause
09-04-2010, 09:37 AM
Think about fixed positions (http://www.google.com/search?q=CSS+position).

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 ..."

abduraooft
09-04-2010, 09:51 AM
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?

TempleClause
09-04-2010, 05:21 PM
Never mind :-D

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



<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

bazz
09-04-2010, 06:46 PM
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

TempleClause
09-04-2010, 07:10 PM
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

bazz
09-05-2010, 03:55 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum