Problem with CSS positioning

[blog1]

I have a problem with CSS. Please for assistance. Yelim to me the picture is positioned at the center of the page and not the left or the right. I want to be on cebtru regardless of screen resolution. This is the code in CSS

/ * Product * /
.product-info {overflow: auto; margin-bottom: 20px; }
.product-info> .right {float: left; }
.product-info> + .left .right {margin-left: 255px; }
.product-info> .right {position: relative}
.product info h1 {margin-bottom: 0px; background: none;}
.product info .image {box-shadow: 0px 0px 3px # CCC 0px 0px 0px 1px white inset; background: # F6EEF2; float: left; margin: 5px 0px 5px 1px; padding: 2px 2px 2px 2px; text-align: center; -webkit-transition: all 0.3s ease-and-out; -moz-transition: all 0.3s ease-and-out; -o-transition: all 0.3s ease-and-out; -ms-transition: all 0.3s ease-and-out; transition: all 0.3s ease-and-out;}
.product info .image_inside {}
.product-info # zoom-image {text-align: center; display: block; margin: 10px 0 0; font-size: 10px; text-transform: uppercase; color: # 333;}
.icon-zoomin {text-decoration: none! important; height: 14px; width: 14px; background: transparent url ( '../ image / zoom-icon.png') no-repeat; display: inline-block; vertical-align: text-top}
.product-info-.image additional {width: 285px; clear: both; overflow: hidden; }
.product-info-.image additional a: hover {}
.product info .image additional-a {float: left; display: block; margin: 10px 10px 2px 2px; padding: 0px; display: block; -webkit-transition: all 0.3s ease-and-out; -moz-transition: all 0.3s ease-and-out; -o-transition: all 0.3s ease-and-out; -ms-transition: all 0.3s ease-and-out; transition: all 0.3s ease-and-out; box-shadow: 0px 0px 3px # CCC, 1px 1px 1px white inset; background: # f8f8f8; }

This is a link to the product appearance
http://www.netclickshop.com/index.php?route=product/product&product_id=6889

Thanks

[PaulOB]

@blog1

Yelim to me the picture is positioned at the center of the page and not the left or the right. I want to be on cebtru

I’m not sure what ‘Yelim’ or ‘cebtru’ means but I’m guessing you want that block centred?

If so add this code after the original styles and see if that’s what you meant.

.product-info {
	display:table;
	margin:auto;
}
.product-info .right, .product-info .left {
	display:table-cell;
	vertical-align:top;
	float:none;
}
 @media screen and (max-width:760px) {
	.product-info .right, .product-info .left {
		display:block;
	}
	.product-info .image {
		float:none;
		display:block;
		margin:auto;
	}
	.product-info .image img {
		display:block;
		margin:auto;
		width:100%;
		height:auto
	}
}

Note you have an awful lot of work to do to make this fully responsive as things overlap everywhere at smaller screen sizes.

[coothead]

@PaulOB

Note you have an awful lot of work to do to make this fully responsive

…and this…

     114 errors and 141 warnings found while checking this document as XHTML 1.0 Strict!

…of course, does nothing for the cause.

I can remember a time when it was common practise,in forums,
not to offer any further assistance until the O.P. had, at least,
made a concerted effort to correct all the coding errors.

coothead

[PaulOB]

@coothead

I can remember a time when it was common practise,in forums,
not to offer any further assistance until the O.P. had, at least,
made a concerted effort to correct the all the coding errors.

Where’s the fun in that

Of course you are correct and any one of the errors could be a major problem and should be looked at first.

[blog1]

OK. Thanks a lot. I’ll try.

[ronpat]

I noticed that your local stylesheet is not the last stylesheet in the head of your page. It’s fairly near the top, in fact. It should be the last stylesheet in the cascade so you can follow @PaulOB’s advice and locate his changes after all of the other preceeding it. That’s just standard practice.