Featured Products - border round product

[mattys]

Hello

My site is here: http://www.redwoodsurfshop.co.uk/surfshop/

You will notice that i have put a border round each product, did this by changing css: 'centerBoxContentsFeatured', I also set the border all round to 2px. This is where the problem starts. Because of this you will notice that the products are starting to overlap the content (logos) on the right, it looks bad and is not what i want it to do, obviously.

There is plenty of space to add borders, etc. but is behaving badly for some reason.

I have looked at this file: featured_products.php, to add another div perhaps and format that, but the code is to daunting.

Can anyone suggest anything?

Help appreciated.

[seethrou]

Please refer to the topic below for more info.
Borders around products

.

[seethrou]

And try to not add paddings to the padding-left and padding-right.

Code suggestion.

.centerBoxContentsFeatured {
        padding: 1em 0 1em 0;
	border-top: 0.1em solid #E7E7E7;
	border-left: 0.1em solid #E7E7E7;
        border-right: 0.1em solid #E7E7E7; 
        border-bottom: 0.1em solid #E7E7E7; 
	margin-right: -0.1em; /* add more negative value if the cell drop to lower line */
	margin-left: -0.1em; /* add more negative value if the cell drop to lower line */
        height: 16em; /* adjust according to the maximum height of the product's data */ 
}

/* For style of the link which under the images of above column display */ 
.centerBoxContentsFeatured a {
	display: block; 
	text-align: center;
	padding-left: 5%;
	padding-right: 5%;
}

[mattys]

Hi seethrou

Thanks lots, is def what i asked for.

What css do i tweak to ad space between each box?

I did tweak the margins but it hasn't made a difference:

 
margin-right: 0.2em; /* add more negative value if the cell drop to lower line */
 margin-left: 0.2em; /* add more negative value if the cell drop to lower line */

http://www.redwoodsurfshop.co.uk/surfshop/

Also, there is much space below the top and bottom box rows, it would be good to decrease this, could you let me know which css to change?

[seethrou]

Before my last post, I had tested at remote. However I hadn't traced you stylesheet and the page source.
I only inserted the above codes into the end of the stylesheet in test and it display correctly in my side. And attached screen capture for your reference.

You missed the negative value.

margin-right: -0.2em; /* add more negative value if the cell drop to lower line */
 margin-left: -0.2em; /* add more negative value if the cell drop to lower line */

[mattys]

Crikey! - the css is really messy in firefox

[mattys]

i have now tweaked the margins so they show:

 
margin-right: -0.2em; /* add more negative value if the cell drop to lower line */
 margin-left: -0.2em; /* add more negative value if the cell drop to lower line */

But the boxes still don't have space inbetween?

I'm also not sure what this means - "add more negative value if the cell drop to lower line"

[seethrou]

I'm also not sure what this means - "add more negative value if the cell drop to lower line"

It may read as - "If the columnar cell drop to the next line /row under itself, then decrease the cell's width by adding the negative values (less than zero)"

The above suggestion is only simple adjustments for the columnar display. It only prevent the last display cell in a row from dropping to the next line /row under the row of itself. But seems work for both browsers without extra modifications.

But the boxes still don't have space inbetween?

Some points we should noted and to enable us to style it easier and speedup. May be we should look at the code and the css more closely and see how they work.

The following is page source of my local test, about the Featured Products in the index page and it has 3 cells in row. But I only captured the first row for the demo here.

<div id="featuredProducts" class="centerBoxWrapper">
<h2 class="centerBoxHeading">Featured Products</h2>
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<a href="http://localhost/zc136t/index.php?main_page=product_music_info&products_id=169">
<img width="100" height="80" title=" Sample of Product Music Type " alt="Sample of Product Music Type" src="images/samples/2_small.jpg"/>
</a>
<br/>
<a href="http://localhost/zc136t/index.php?main_page=product_music_info&products_id=169">Sample of Product Music Type</a>
<br/>
</div>
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=12">
<img width="100" height="80" title=" Die Hard With A Vengeance Linked " alt="Die Hard With A Vengeance Linked" src="images/dvd/die_hard_3.gif"/>
</a>
<br/>
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=12">Die Hard With A Vengeance Linked</a>
<br/>
</div>
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=27">
<img width="100" height="80" title=" Hewlett Packard LaserJet 1100Xi Linked " alt="Hewlett Packard LaserJet 1100Xi Linked" src="images/hewlett_packard/lj1100xi.gif"/>
</a>
<br/>
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=27">Hewlett Packard LaserJet 1100Xi Linked</a>
<br/>
</div>
<br class="clearBoth"/>

And in the form of code collapsed and simplified, they look like:

<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<br class="clearBoth"/>

It can find that the width is always 33% for each cells in the row. And this related to setting in admin.
If set the numbers of cell to display to 2, and the width is 100% /2 = 50%
If set the numbers of cell to display to 3, and the width is 100% /3 = 33.3%
If set the numbers of cell to display to 4, and the width is 100% /4 = 25%

This is the point, the browser will output the width's value first in the html and then later apply the css effect if there is any.

In above page source, since the width is first fixed at 33%.
And then if in the css add style to the margin of left and /or right,
this will add the "overheads" to the widths.
Because the browser will not turn back again and adjust the width by itself.
This mean in the output for the row,
the total width are wider than 100%,
for:
( (33% + "overheads") x 3 ) > 100%

And in a fixed or limited width situation, this will cause the last cell drop to the next line /row. For there are not sufficent width or space for them to sit inline.

Therefore while style the columnar display, don't forget the above factors. In each adding of "overheads" to the widths, then in the same time trim off some of the inner width of the cells to provide spaces for the insertion of "overheads".


And the following is only suggestion and some of them you may not need and can be removed.
Please note that the width and percentage in below always related to each other, please adjust for yourself.

.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents {
	margin: 1em 0.8em 0 0;
	padding: 0.5em 0 0.3em 0;
	border-style: solid; 
	border-width: 0.1em 0.2em 0.2em 0.1em; /* also add little shadow effect */ 
	border-color: #CCCCCC #B6B6B6 #B6B6B6 #CCCCCC; /* also add little shadow effect */ 
	height: 19em; /* adjust according to the maximum height of the product's data */ 
}

/* Columnar Cell width adjustment */ 
/* decrease the cell's inner width to provide spaces for the added overhead */
.centerBoxWrapper div /* #whatsNew div, #featuredProducts div, #specialsDefault div */ {
	max-width: 30.5%; 
}

/* Columnar Cell width adjustment */ 
/* decrease the cell's inner width to provide spaces for the added overhead */
/* For IE only */
* html .centerBoxWrapper div {
	width: auto;
        width: 30.5% !important;	
}

.centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
	display: block;
	text-align: center;
	padding-left: 6%;
	padding-right: 6%;
}

/* For IE only */
* html .centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
	display: block;
	text-align: center;
	padding-left: 3%;
	padding-right: 3%;
}

Hope this helps.

[mattys]

Hi Seethrou

Once again, thanks for your time.

I now added the css exactly as you have it above.

There are still no spaces between boxes and i'm still unsure of how to achieve this?

Also, the boxes in IE, for the top box especially, are pushing out to to the right side of the page and are not contained, which looks messy.

However, the dispaly in Fire Fox is much better, although still no spaces (right and left) between boxes still.

Screenshot FireFox:



Screenshot IE:



http://www.redwoodsurfshop.co.uk/surfshop/

[seethrou]

I have checked again and the above code still works for my remote test.
I only inserted my suggested code into the end of your stylesheet, this will override all the previous setting.

And the following is the screen capture from Firefox, with screen resolution of 1024 x 768.





With refer to your stylesheet now,
1. you inserted the suggested code at about line 399

2. and there is setting in your stylesheet under it at about line 587,
which in the section of /*list box contents*/.
And this will affect or override the suggested code at above.

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

Please check for any conflict between the related sections.
And check for the provided space is sufficient or not, for they are all relative.
And in some critical situations, a calculation or chart for each related sections and portions will give better view.