Floating a div over the header table. Wont happen

[lindsayanng]

So, I am trying to stick the shopping cart inside of a floating div have it flow over the top image which is basically the banner. I have floated divs over tables before, but this is just giving me the biggest headache EVER right now..

 

here is the site:

THE STORE LINK

 

and here is the code that I am working on:

 

style:

#topcart
{  position:absolute;
  display:box;
  width:200px;
  z-index:50;
}

 

HTML

<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header">

	<td valign="middle">

	<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES .  'fuelstarbanner.jpg', STORE_NAME) . '</a>'; ?></td>
<div id="topcart"><php?   require(DIR_WS_BOXES . 'shopping_cart.php'); ?></div>
 </tr>
</table>

 

I have tried placing the div in all different areas within that code. Inside the table, inside the <td> and inside just the <tr> but none of those seem to do ANYTHING. I have also played with the positioning using margins, floats, etc. What i do know is that by using absolute positioning, you kind of remove the div from the document and place it where it is supposed to go.. but that didnt work either!!! Right now, it seems that the div isn't even seeing the style because the width is not changing!!!!

[lindsayanng]

alright.. i almost got it now.. I ended up putting the div OUTSIDE of the tables and towards the top..

 

But now, using the absolute positioning is making at move WITH the side of the browser.. so if the screen resolution is not good, then the box can end up OVER the center.. Any thoughts

 

so this is the updated style:

 

#topcart
{  
position:absolute;
top:25px;
left:860px;
width:125px;
z-index:99999;
}

 

and the html is:

 

<div id="centerContent">   <div id="topcart"><?php   require(DIR_WS_BOXES . 'shopping_cart.php'); ?></div>

 

So the div is contained in the large container div.. but when I put the positioning using only margins, it will not "float" over the image for the header. So now, it looks good on my screen, but if the browser window shrinks, instead of moving proportionately, it just floats away

[playcraft]

alright.. i almost got it now.. I ended up putting the div OUTSIDE of the tables and towards the top..

 

But now, using the absolute positioning is making at move WITH the side of the browser.. so if the screen resolution is not good, then the box can end up OVER the center.. Any thoughts

 

so this is the updated style:

 

#topcart
{  
position:absolute;
top:25px;
left:860px;
width:125px;
z-index:99999;
}

 

and the html is:

 

<div id="centerContent">   <div id="topcart"><?php   require(DIR_WS_BOXES . 'shopping_cart.php'); ?></div>

 

So the div is contained in the large container div.. but when I put the positioning using only margins, it will not "float" over the image for the header. So now, it looks good on my screen, but if the browser window shrinks, instead of moving proportionately, it just floats away

Can you just make the header a background image?

[lindsayanng]

that is my last option.. I would prefer not to becuse i was going to go the cheap way out and make the header image an image make and link those links up top to a cpath..

 

this site will not have a lot of categories.. just those, and thats it. So i wasnt about the completely customize a horizontal menu when I can just image map it.. if its a background, it cant be mapped.

[playcraft]

that is my last option.. I would prefer not to becuse i was going to go the cheap way out and make the header image an image make and link those links up top to a cpath..

 

this site will not have a lot of categories.. just those, and thats it. So i wasnt about the completely customize a horizontal menu when I can just image map it.. if its a background, it cant be mapped.

Actually you can still map them with css not necessarily an html image map you are thinking of. Check this link out.

[lindsayanng]

hm.. thats definitely interesting.. I will play with that and see where it lands me.. this project is turning into a HUGE FREAKING HASSLE.. and i'm not just talking about the designing and coding.

[playcraft]

hm.. thats definitely interesting.. I will play with that and see where it lands me.. this project is turning into a HUGE FREAKING HASSLE.. and i'm not just talking about the designing and coding.

Yea, CSS is pretty amazing and fast. Definitely beats designing with javascript and html. Google is very friendly with it.

[lindsayanng]

yea.. I always use CSS over html.. i just never thought about using css sprites in place of a map. have you ever been to this website?

css play?

 

its amazing..

 

i always try and see if there is a CSS option before i go to javascriptt.. but in this.. i feel like there IS a way to do this without making it a background.. but maybe not

[playcraft]

yea.. I always use CSS over html.. i just never thought about using css sprites in place of a map. have you ever been to this website?

css play?

 

its amazing..

 

i always try and see if there is a CSS option before i go to javascriptt.. but in this.. i feel like there IS a way to do this without making it a background.. but maybe not

No I haven't. I do not use html tables much as it is much slower than using divs and css.