Margins, Layout, Product Attributes, NIGHTMARE!

With respect to:

http://www.dystynction.com/index.php?main_page=product_info&cPath=1_4&products_id=182

I've got my main wrapper set to 100% but I'm having issues with the product description.

The problem I'm having is that I want the description table to hop up to the right of the main image and below the cart.

I'm assuming it's something simple in the stylesheet.css but I've messed around with margins, padding etc. and just can't get it to sit there.

When I increase the main wrapper size to 2000px (for experimental purposes only), it allows the table to hop up to the right next to the add to cart et.al.

Also, I'd like the drop down size choice menu to sit up next to the product details but can't find the BOF-EOF block in tpl_product_info_display.php ....... I don't suppose anyone knows what this block is called?

Any help would be immensely appreciated as I've been pulling my hair out with this :blink:

:oops:

Correction, increasing them main wrapper does NOT make room for the table. It has to be something to do with the CSS or product_info_display.php

HELP!!

**<!--bof Product details list -->

You can use the Admin - Tools - Developers Tool Kit to search for that id name to find the file.

You might also search the Free Software Add Ons above for 'product info'. There are some product info display mods which might give you some ideas.

SOLVED!

I've been struggling for almost a full day trying to align my tables and boxes just the way I'd like them when it dawned on me, absolute positioning!!

I just entered some screen co-ordinates at the start of the code and voila, the table is not precisely where I want it! I'm sure this will work for ALL elements on the page.

/includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php change:

Remembering to close this block with:

I hope this will help others with the same alignment problems I've had!

Of course, there's already a div with id="productDescription" that encloses that exact section, so you could just find or add in your stylesheet```
#productDescription {
position: absolute;
top: 520px;
left: 650px;
}

Do you realize that this fails on a smaller monitor (anything less than 1280px wide)?
The absolute positioning disregards the rest of the page including its overall width, so when the main wrapper shrinks to fit the monitor, the table sticks way off the edge. When you make up code in a separate tool and paste it in, you probably ought to strip off the extraneous code, like <title>HTML clipboard</title> ...

The table actually does contain tabular data, so is not "wrong" in the semantic code sense, but it is incredibly bloated with inline styling when CSS could have streamlined the bulk as well as making the HTML source comprehensible instead of an alphabet soup of tags.
You used a "definition list" at the end when an unordered list would have been more appropriate:```html

		<table width="80%" cellspacing="1" cellpadding="2" bordercolor="#c4cde0" border="0" bgcolor="#c4cde0">
			<tbody><tr>
				<td width="28%" height="32" bgcolor="#ffffff">
				<p align="right" style="margin: 12px;"><b>
				<font face="Arial" style="font-size: 10pt;">Colour:</font></b></p></td>
				<td width="68%" height="32" bgcolor="#ffffff" align="left">
				<p style="margin: 12px;">
				<font face="Arial" style="font-size: 10pt;">Black with White.</font></p></td>

			</tr>
			<tr>
				<td width="28%" height="32" bgcolor="#ffffff">
        <div align="right">
			<p style="margin: 12px;"><b>
			<font face="Arial" style="font-size: 10pt;">RRP:</font></b></p></div>
        
        
        		</td>
				<td width="68%" height="32" bgcolor="#ffffff" align="left">

	<p style="margin: 12px;">
	<font face="Arial" style="font-size: 10pt;">£320.00.</font></p></td>
			</tr>
			<tr>
				<td width="28%" height="32" bgcolor="#ffffff">
        <div align="right">
			<p style="margin-right: 12px; margin-left: 12px;"><b>
			<font size="2" face="Arial">Material</font><font face="Arial" style="font-size: 10pt;">:</font></b></p></div>

        
        
    			</td>
				<td width="68%" valign="middle" height="32" bgcolor="#ffffff" align="left">
	<p style="margin-left: 12px; margin-right: 12px;">
	<font size="2" face="Arial">Suede & Leather.</font></p></td>
			</tr>

          <div align="right">
			<p style="margin: 12px;"><b>
			<font face="Arial" style="font-size: 10pt;">Details:</font></b></p></div>
    			</td>
				<td width="68%" height="1" bgcolor="#ffffff" align="left">

							<dl><dt style="margin-left: 12px;"> </dt><dt style="margin-left: 12px;">
								<font face="Arial" style="font-size: 10pt;">
						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  
								3½" stiletto heels.</font></dt><dt style="margin-left: 12px;">

								<font face="Arial" style="font-size: 10pt;">
						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  Beautiful fit, amazing quality.</font></dt><dt style="margin-left: 12px;">
								<font face="Arial" style="font-size: 10pt;">
						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  White lace up corset front.</font></dt><dt style="margin-left: 12px;">
								<font face="Arial" style="font-size: 10pt;">
						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  
								Mainly, soft black suede.</font></dt><dt style="margin-left: 12px;">
								<font face="Arial" style="font-size: 10pt;">

						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  White leather trims.</font></dt><dt style="margin-left: 12px;">
								<font face="Arial" style="font-size: 10pt;">
						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  Leather soles.</font></dt><dt style="margin-left: 12px;">
								<font face="Arial" style="font-size: 10pt;">
						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  £320 RRP.</font></dt><dt style="margin-left: 12px;">
								<font face="Arial" style="font-size: 10pt;">
						<img src="http://www.dystynction.com/LIMELITES/fs.gif" />  Moschino badges and logos throughout.</font></dt></dl>

							</td>
			</tr>				</tbody></table>
		</td>
	</tr>
</tbody></table>

You could do the same thing this way:```html
<!--bof Product description -->


<div id="productDescription" class="productGeneral biggerText">
	<table width="480" cellspacing="1" cellpadding="2" bordercolor="#04cde0" border="0" bgcolor="#04cde0">
	<tbody>
		<tr>
			<td class="productTableItem">
			  <div>
				Colour:
			  </div>
			</td>
			<td class="productTableDesc">
			  <div>
				Black with White.
			  </div>
			</td>
		</tr>
		<tr>
			<td class="productTableItem">
			  <div>
				RRP:
			  </div>
 			</td>
			<td class="productTableDesc">
			  <div>
				£320.00.
			  </div>
			</td>
		</tr>
		<tr>
			<td class="productTableItem">
			  <div>
				Material:
			  </div>
        		</td>
			<td class="productTableDesc">
			  <div>
				Suede & Leather.
			  </div>
			</td>
		</tr>
		<tr>
			<td class="productTableItem">
			  <div>
				Details:
			  </div>
        		</td>
			<td class="productTableDesc">
			  <ul>
				<li>3½" stiletto heels.</li>
				<li>Beautiful fit, amazing quality.</li>
				<li>White lace up corset front.</li>
				<li>Mainly, soft black suede.</li>
				<li>White leather trims. </li>
				<li>Leather soles. </li>
				<li>£320 RRP.</li>
				<li>Moschino badges and logos throughout.</li>
			  </ul>
			</td>
		</tr>
	</tbody></table>
</div>

<!--eof Product description -->
```and add this to your stylesheet:```
#productDescription {
    font: 10pt Arial, sans-serif;
    }

.productTableItem {
    width: 28%;
    background: #ffffff;
    text-align: right;
    vertical-align: center;
    font-weight: bold;
    }

.productTableItem div {
    margin: 10px 12px;
    }

.productTableDesc {
    width: 68%;
    height: 1px; /*if this is needed*/
    background: #ffffff;
    text-align: left;
    }

.productTableDesc div {
    margin: 10px 12px;
    }

.productTableDesc ul {
    list-style: inside url(../images/fs.gif); /*save image in /includes/templates/your_template/images/ folder*/
    margin: 10px 12px;
    padding-left: 0;
    }

You can now tweak the table styling without changing a margin or font-size in ten different places.

Coming back and looking at the text here, I see that this was erroneous:
(Note: "#c4cde0" is an invalid color and will be ignored - the "o" should be "0".)
The font in the edit window looked exactly like an "o" next to the "4", but the page display shows it to be a "c"...

A thought I had while looking at one of your other problems, but which fits better in this thread, is a way to make your additional images fit neatly no matter what the width of the viewing window.
You currently have in your stylesheet```
.additionalImages {
width: 100%;
padding:0;
float:left;
margin:0 auto;
text-align:center;
}

width: 100%; tries to make every single image the full width of the center column - obviously not good.
However, the code sets the % width automatically, and inline styling takes precedence over external stylesheets, so the 100% is being ignored. 
You can remove that, and add a min-width:```
.additionalImages {
min-width: 170px;
padding:0;
float:left;
margin:0 auto;
text-align:center;
}
```Then the images will be spaced to fit evenly in one row on a large monitor, but they will never squeeze closer than the actual image width (as long as the images are no more than 170px), and in smaller windows the ones that don't fit on one line will drop down to the next.