CSS HELP trying to make image bigger on product page

**bbclown212** · 12-06-2008, 12:31 AM

hello all i am trying to make the image in the product section slightly bigger and the extra images that are smaller bigger, and how do you center the image in a featured section.

bluewalrus Thanks for the other help the other day

how do you make 'smallimage' tag bigger?

**bluewalrus** · 12-06-2008, 06:04 AM

dont know exactley what you mean you got a link?

**Snookerman** · 12-06-2008, 09:16 AM

You can give the img tags width and height attributes inside the tag or by using css:

Code:

<img width="600px" height="400px" id="bigpic" alt="My big picture" />

and with css:

Code:

#bigpic {
width:600px;
height:400px;
}

But like bluewalrus said, it would be much easier to help you if you could post a link to your site or attach your code.

**bbclown212** · 12-07-2008, 03:37 AM

see if this helps too big so i made 2 sections

<body class="col2left">
<div id="sizer">
<div id="expander">
<div id="page-wrap">
<div class="header vcard">
<div class="sf_extra1"><span></span></div>

<div class="navigation1">

<ul id="Nav1">
<li class="first_nav_item menu_item_home" id="menu_item_1">
<a href="/main.sc" >
Home
</a>
</li>

<li class=" menu_item_cart" id="menu_item_2">
<a href="/viewcart.sc" >
Shopping Cart
</a>
</li>

<li class=" menu_item_signin" id="menu_item_3">

<a href="/login.sc" >
Sign In
</a>
</li>

<li class=" menu_item_register" id="menu_item_4">
<a href="/register.sc" >
Register
</a>
</li>

<li class=" menu_item_help" id="menu_item_5">
<a href="/help.sc" target="_blank">

Help
</a>
</li>

<li class="last_nav_item menu_item_contactus" id="menu_item_6">
<a href="/contactus.sc" >
Contact Us
</a>
</li>

</ul>
</div>

<div id="header-content">
<div class="sf_extra3"></div>
<a href="main.sc" id="logo"><span class="qsc-site-logo"></span></a>
<div class="titles">
<h1 class="company-name"><span class="qsc-site-companyname">testing 123 LLC</span></h1>
<h3 class="slogan"><span class="qsc-site-slogan"></span></h3>
</div>

<div class="sf_extra4"></div>
</div>

<div class="sf_extra2"><span></span></div>

</div>

<div id="wrapper1">
<div id="wrapper2"> 
<div class="outer">
<div class="float-wrap">
<div class="center">
<div class="centerbox">
<div class="content">

<div class="breadcrumb page-block" id="breadcrumbs">

<a href="/main.sc?categoryId=1" class="breadcrumb home">Our Products</a>
 >> 

<a href="/category.sc?categoryId=2" class="breadcrumb category">Christmas 2008</a>

 >> 

Bustier w/Back Lace-up & Thong

</div>

<div class="main-content">



<div class="product-page">

<div class="product-detail content-block">
<div class="product-primary">

<div class="product-detail-header">
<h2>Bustier w/Back Lace-up & Thong</h2>

</div>

<div class="product-description ">
full Description
</div>

</div>
<div class="product-secondary">

<div class="imageanddetails">

<div class="product-image">

<script type="text/javascript" language="javascript" src="scripts/jquery-latest.js" ></script>

<script type="text/javascript" language="javascript" src="scripts/productFilmstrip.js" ></script>
<div class="filmstrip-preview">
<span id="zoomImageURL" style="display:none; visibility:hidden;">/images/12280046600621072325756.jpg</span>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img style="cursor

ointer;" src="/images/1228004759521-228221936.jpeg" alt="Bustier w/Back Lace-up & Thong" id="filmstripPreview" onclick="new_window = window.open($('#zoomImageURL').html(), 'ZoomImage', 'width=420, height=420, scrollbars=yes, resizable=yes');new_window.focus(); return false;">
</td>

</tr>
</table>
</div>

<div class="clicktozoom" style="margin:3px 0;">Click To Enlarge</div>

<div class="filmstrip-thumbnails"> 
<ul>

<li>
<table cellpadding="0" cellspacing="0">

<tr>
<td>
<a href="#" onclick="showPreview('/images/1228004759521-228221936.jpeg','/images/12280046600621072325756.jpg'); return false;">
<img class="fst-img" src="/images/12280047594491136567919.jpeg"/>
</a>
</td>
</tr>
</table>
</li>

<li>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#" onclick="showPreview('/images/1228004759289711912827.jpeg','/images/1228004679797-1821109607.jpg'); return false;">
<img class="fst-img" src="/images/12280047592661805955783.jpeg"/>
</a>
</td>
</tr>

</table>
</li>

</ul>
</div>

</div>

<div class="product-details">
<ul>

<li><em>Item #:</em> C65</li>

</ul>
</div>

</div>

<div class="product-options clearfix">
<form id="addToCartForm" method="post" action="/addtocart.sc">
<input type="hidden" name="productId" value="4" />
<script type="text/javascript" language="javascript" src="scripts/jquery-latest.js" ></script>
<script type="text/javascript" language="javascript" src="scripts/productOptions.js" ></script>

<table border="0" class="product-options-table">

<tr>
<td class="label">
<em>Size</em>
</td>
<td class="field">
<select name="selectedOption(1)" onchange="computeItemTotal();"><option value="Small" priceincrement="0.00">Small

</option>

<option value="Medium" priceincrement="0.00">Medium

</option>

<option value="Large" priceincrement="0.00">Large

</option></select>
</td>
</tr>

<tr>
<td class="label">

**bbclown212** · 12-07-2008, 03:37 AM

other half

<em>Color</em>
</td>
<td class="field">

<select name="selectedOption(2)" onchange="computeItemTotal();"><option value="Red" priceincrement="0.00">Red

</option></select>
</td>
</tr>

<tr>
<td class="label">
<em>Qty</em>
</td>
<td class="field">

<input type="text" name="quantity" size="3" value="1" />
</td>
</tr>

<tr>
<td class="label">
<em>Price</em>
</td>
<td class="field">

<span id="listPrice" class="price list ">$49.00</span>
</td>
</tr>


<tr id="adjustedPriceItem" class="price adj hidden">
<td class="label">
<em>Adjusted Price</em>
</td>

<td class="field">
<span id="adjustedPrice" class="price">$49.00</span>
</td>
</tr>

<tr class="buynow">
<td class="label">
<em></em>
</td>

<td class="field">
<input type="submit" value="Add To Cart" class="btn" />
</td>
</tr>

</table>
<script type="text/javascript" charset="UTF-8">
// compute the item total now, just in case the default options increase the base price.
var currencyFormat = '-$#,###.00';
computeItemTotal();
</script>
</form>
</div>
</div>

</div>

</div>

</div>
</div>
</div>
</div>

<div class="left">

<div class="container-left">
<div class="textpadder">
<div class="content-block quick-search">

<form id="searchQuickForm" method="get" action="/searchquick-submit.sc">
<ul>

<li><h3 class="quick-search-header"><span>Quick Search</span></h3></li>

<li><input type="text" name="keywords" value="" id="searchtext" class="input" /> <input type="submit" value="Go!" class="quick-search-button btn" /></li>

<li><a href="/searchadvanced.sc">Advanced Search</a></li>
</ul>
</form>

</div>
<div class="content-block category-list">

<h3 class="category-list-header">
<span><a href="/main.sc">Our Products</a></span> </h3>

<ol id="categories">

<li class="category">
<a href="/category.sc?categoryId=5">Lingerie 2009</a>
</li>

<li class="category">
<a href="/category.sc?categoryId=4">Accessories</a>
</li>

<li class="category">
<a href="/category.sc?categoryId=2">Christmas 2008</a>
</li>

<li class="category">
<a href="/category.sc?categoryId=3">Valentine 2009</a>
</li>

</ol>

</div>

</div> 
</div>
</div>
<br class="brclear"/>

</div>
</div>
</div>
</div>

<div class="footer-section">
<div class="footer_extra">
<div class="navigation2 fcontain">

<span class="first_nav_item">
<a href="/termsandconditions.sc"
>Terms and Conditions</a>
</span> 

<span class="last_nav_item">
<a href="/aboutus.sc"
>About Us</a>

</span> 

</div>
<div class="footer">
<span class="qsc-site-company-copyright">Copyright © 2008 testing 123 LLC. All rights reserved.</span>
</div>
<div id="paymentlogos">

<img style="border:1px solid transparent;" src='/template/common/images/paypal_logo_50x34.gif' alt='PayPal'/>

</div>
</div> 
</div> 
</div> 
</body>

</html>

**Snookerman** · 12-07-2008, 08:09 AM

You should wrap your code in code tags (button looks like this #) or html tags (button looks like this <>) to avoid smileys and to get all the code into one post. I'll do it with yours and then take a look at it:

HTML Code:

<body class="col2left">
<div id="sizer">
<div id="expander">
<div id="page-wrap">
<div class="header vcard">
<div class="sf_extra1"><span></span></div>
<div class="navigation1">
<ul id="Nav1">
<li class="first_nav_item menu_item_home" id="menu_item_1"> <a href="/main.sc" > Home </a> </li>
<li class=" menu_item_cart" id="menu_item_2"> <a href="/viewcart.sc" > Shopping Cart </a> </li>
<li class=" menu_item_signin" id="menu_item_3"> <a href="/login.sc" > Sign In </a> </li>
<li class=" menu_item_register" id="menu_item_4"> <a href="/register.sc" > Register </a> </li>
<li class=" menu_item_help" id="menu_item_5"> <a href="/help.sc" target="_blank"> Help </a> </li>
<li class="last_nav_item menu_item_contactus" id="menu_item_6"> <a href="/contactus.sc" > Contact Us </a> </li>
</ul>
</div>
<div id="header-content">
<!-- 3 -->
<div class="sf_extra3"></div>
<a href="main.sc" id="logo"><span class="qsc-site-logo"></span></a>
<div class="titles">
<h1 class="company-name"><span class="qsc-site-companyname">testing 123 LLC</span></h1>
<h3 class="slogan"><span class="qsc-site-slogan"></span></h3>
</div>
<!-- 4 -->
<div class="sf_extra4"></div>
</div>
<div class="sf_extra2"><span></span></div>
</div>
<!-- end .header The header is before the 1st wrapper so that it is seperate from the columns -->
<div id="wrapper1">
<div id="wrapper2">
<!-- This wrapper is only used for BG tiling on the right column -->
<div class="outer">
<div class="float-wrap">
<div class="center">
<div class="centerbox">
<!-- optional extra styling div -->
<div class="content">
<!-- This class is used to pad text content in the cols, so that the cols don't
need side padding that would then require box model hacking for IE5.x/win -->
<div class="breadcrumb page-block" id="breadcrumbs"> <a href="/main.sc?categoryId=1" class="breadcrumb home">Our Products</a> &nbsp;&gt;&gt;&nbsp; <a href="/category.sc?categoryId=2" class="breadcrumb category">Christmas 2008</a> &nbsp;&gt;&gt;&nbsp;





Bustier w/Back Lace-up & Thong </div>
<div class="main-content">
<!--
div.product-page
div.product-info
div.primary
div.product-title h2
div.product-description
div.product-features ul
div.secondary
div.imganddetail
div.product-image
img
span (cte)
div.details ul (item + inventory)
div.order-info
div.options ul
div.product-extras
div.best-values
div.product-related
-->
<div class="product-page">
<div class="product-detail content-block">
<div class="product-primary">
<div class="product-detail-header">
<h2>Bustier w/Back Lace-up &amp; Thong</h2>
</div>
<div class="product-description "> full Description </div>
</div>
<div class="product-secondary">
<div class="imageanddetails">
<div class="product-image">
<script type="text/javascript" language="javascript" src="scripts/jquery-latest.js" ></script>
<script type="text/javascript" language="javascript" src="scripts/productFilmstrip.js" ></script>
<div class="filmstrip-preview"> <span id="zoomImageURL" style="display:none; visibility:hidden;">/images/12280046600621072325756.jpg</span>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img style="cursorointer;" src="/images/1228004759521-228221936.jpeg" alt="Bustier w/Back Lace-up &amp; Thong" id="filmstripPreview" onclick="new_window = window.open($('#zoomImageURL').html(), 'ZoomImage', 'width=420, height=420, scrollbars=yes, resizable=yes');new_window.focus(); return false;"> </td>
</tr>
</table>
</div>
<div class="clicktozoom" style="margin:3px 0;">Click To Enlarge</div>
<div class="filmstrip-thumbnails">
<!-- New Thumbnails -->
<ul>
<li>
<table cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onclick="showPreview('/images/1228004759521-228221936.jpeg','/images/12280046600621072325756.jpg'); return false;"> <img class="fst-img" src="/images/12280047594491136567919.jpeg"/> </a> </td>
</tr>
</table>
</li>
<li>
<table cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onclick="showPreview('/images/1228004759289711912827.jpeg','/images/1228004679797-1821109607.jpg'); return false;"> <img class="fst-img" src="/images/12280047592661805955783.jpeg"/> </a> </td>
</tr>
</table>
</li>
</ul>
</div>
</div>
<div class="product-details">
<ul>
<li><em>Item #:</em> C65</li>
</ul>
</div>
</div>
<div class="product-options clearfix">
<form id="addToCartForm" method="post" action="/addtocart.sc">
<input type="hidden" name="productId" value="4" />
<script type="text/javascript" language="javascript" src="scripts/jquery-latest.js" ></script>
<script type="text/javascript" language="javascript" src="scripts/productOptions.js" ></script>
<table border="0" class="product-options-table">
<tr>
<td class="label"><em>Size</em> </td>
<td class="field"><select name="selectedOption(1)" onchange="computeItemTotal();">
<option value="Small" priceincrement="0.00">Small </option>
<option value="Medium" priceincrement="0.00">Medium </option>
<option value="Large" priceincrement="0.00">Large </option>
</select>
</td>
</tr>
<tr>
<td class="label"><em>Color</em> </td>
<td class="field"><select name="selectedOption(2)" onchange="computeItemTotal();">
<option value="Red" priceincrement="0.00">Red </option>
</select>
</td>
</tr>
<tr>
<td class="label"><em>Qty</em> </td>
<td class="field"><input type="text" name="quantity" size="3" value="1" />
</td>
</tr>
<tr>
<td class="label"><em>Price</em> </td>
<td class="field"><span id="listPrice" class="price list ">$49.00</span> </td>
</tr>
<!-- Will only be visible with option prices -->
<tr id="adjustedPriceItem" class="price adj hidden">
<td class="label"><em>Adjusted Price</em> </td>
<td class="field"><span id="adjustedPrice" class="price">$49.00</span> </td>
</tr>
<tr class="buynow">
<td class="label"><em>
<!-- fmt:message key="product.addtocart.prefix"/ -->
</em> </td>
<td class="field"><input type="submit" value="Add To Cart" class="btn" />
</td>
</tr>
</table>
<script type="text/javascript" charset="UTF-8">
// compute the item total now, just in case the default options increase the base price.
var currencyFormat = '-$#,###.00';
computeItemTotal();
</script>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end .textpadder -->
</div>
<!-- end .centerbox -->
</div>
<!-- end .center -->
<!-- Check if there is anything in the left section -->
<div class="left">
<div class="container-left">
<!-- Begin left column includes -->
<div class="textpadder">
<div class="content-block quick-search">
<form id="searchQuickForm" method="get" action="/searchquick-submit.sc">
<ul>
<li>
<h3 class="quick-search-header"><span>Quick Search</span></h3>
</li>
<li>
<input type="text" name="keywords" value="" id="searchtext" class="input" />
<input type="submit" value="Go!" class="quick-search-button btn" />
</li>
<li><a href="/searchadvanced.sc">Advanced Search</a></li>
</ul>
</form>
</div>
<div class="content-block category-list">
<h3 class="category-list-header"> <span><a href="/main.sc">Our Products</a></span> </h3>
<ol id="categories">
<li class="category"> <a href="/category.sc?categoryId=5">Lingerie 2009</a> </li>
<li class="category"> <a href="/category.sc?categoryId=4">Accessories</a> </li>
<li class="category"> <a href="/category.sc?categoryId=2">Christmas 2008</a> </li>
<li class="category"> <a href="/category.sc?categoryId=3">Valentine 2009</a> </li>
</ol>
</div>
</div>
<!-- end .textpadder -->
</div>
<!-- end .container-left -->
</div>
<!-- end .left -->
<br class="brclear"/>
</div>
<!-- end .float-wrap -->
</div>
<!-- end .outer -->
</div>
<!-- end #wrapper2 -->
</div>
<!-- end #wrapper1 -->
<div class="footer-section">
<div class="footer_extra">
<div class="navigation2 fcontain"> <span class="first_nav_item"> <a href="/termsandconditions.sc"
>Terms and Conditions</a> </span>&nbsp; <span class="last_nav_item"> <a href="/aboutus.sc"
>About Us</a> </span>&nbsp; </div>
<div class="footer"> <span class="qsc-site-company-copyright">Copyright &copy; 2008 testing 123 LLC. All rights reserved.</span> </div>
<div id="paymentlogos"> <img style="border:1px solid transparent;" src='/template/common/images/paypal_logo_50x34.gif' alt='PayPal'/> </div>
</div>
<!-- end #page-wrap -->
</div>
<!-- end #expander -->
</div>
<!-- end #sizer -->
</body>

I noticed that you forgot to close two of the three div containers you have opened at the end of the code (footer-section, footer_extra and navigation2 fcontain). You have closed only one. Since I don't know where you want to close them you will have to do it yourself.

**bbclown212** · 12-10-2008, 10:12 PM

snookerman or bluewalrus can you email me at bbclown@gmail.com so i can forward your my link to the site that i need help with the question.

Thread: CSS HELP trying to make image bigger on product page

Thread Tools

Search Thread

CSS HELP trying to make image bigger on product page

Bookmarks

Bookmarks

Posting Permissions