Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Floating a div over the header table. Wont happen


lindsayanng

Recommended Posts

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

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

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

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...