Post by ShaneTFletcher » Wed Feb 19, 2014 1:49 am

Hey all, I'm currently trying to slim the mini cart (placed within the header.tpl as <?php echo $cart; ?>).

I wanted just a simple header saying cart, showing the quantity of basket and total. However, the cart style isn't going all so well.
oc.jpg

oc.jpg (85.11 KiB) Viewed 358 times

Basically, as you can see. The cart isn't within the container's above (the blue). Here is my css and tpl code's -

Stylesheet of cart

Code: Select all

#topbarcontainer #cart {
	position: relative;
	top: 0px;
	right: 0px;
	z-index: 9;
}
#topbarcontainer #cart .heading {
	float: right;
	margin-top: 0px;
	padding-left: 14px;
	padding-right: 14px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #EEEEEE;
	background: #FFF;
	z-index: 9999;
}
#topbarcontainer #cart .heading h4 {
	color: #333333;
	font-size: 20px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 3px;
}
#topbarcontainer #cart .heading a {
	color: #38B0E3;
	text-decoration: none;
}

Cart.tpl code -

Code: Select all

<div id="cart">
  <div class="heading">
    <h4><?php echo $heading_title; ?></h4>
    <a href="<?php echo $cart; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>
</div>
</div>
and lastly, the header.tpl (only where shopping cart is placed) -

Code: Select all

<body>

<div id="topbarwrapper">
	<div id="topbarcontainer">
hello   
</br>
</br>
</br>
</br>

<?php echo $cart; ?>

	</div>
</div>

<div id="container">
<div id="header">
....
I really am not sure why the cart isn't within the containers called topbarcontainer.

Just to add, I have placed some </br> to show that the shopping is attached to the bottom of the container.

New member

Posts

Joined
Sat Jul 07, 2012 4:32 am

Post by butte » Wed Feb 19, 2014 9:33 am

The position: relative; doesn't have first dibs on the real estate where you want it.

For
#topbarcontainer #cart {
position: relative;
top: 0px;
right: 0px;
z-index: 9;

amend to
#topbarcontainer #cart {
position: relative;
top: -40px;
left : -40px;
right: 0px;
z-index: 99;
and play with top and left to put it right where you want it. Remove the </br>.

Guru Member

Posts

Joined
Wed Mar 20, 2013 6:58 am
Who is online

Users browsing this forum: No registered users and 14 guests