layout

November 8, 2005

OKay guys I am learning I know that this problem is in layout.css and or index.php

if you look at the page that leads into my store http://ercollectibles.com (it has seperate index.php, layout, the whole thing is has its own files but it is similar to my store), three of the boxes popular products, sale items, and mailing list are full screen. here are my file inserts:

Layout.css

body {
margin: 5px;
background-color: #000013;
background-attachment: fixed;
background-color: #FFFFFF;
background-repeat: repeat-x;
background-position: top;
}
pageSurround {
width: 100%;
margin: 0px auto;
padding: 5px;
border: 1px solid #000000;
background-color: #FFFFFF;
}
#subSurround {
border: 1px solid #5C84CE;
background-color: #FFFFFF;
background-repeat: repeat-x;
background-position: bottom;
}
#topHeader {
text-align: right;
height: 116px;
width: 100%;
margin-bottom: 10px;
padding-right: 9px;
padding-top: 0px;
background-image: url(../styleImages/backgrounds/contentBg.jpg);
border-bottom: 1px solid #000000;
}
.boxTitleLeft, .boxTitleRight {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #09347C;
background-image: url(../styleImages/backgrounds/boxTitleBg.gif);
width: 155px;
height: 15px;
padding-left: 5px;
padding-top: 1px;
}
.boxContentLeft, .boxContentRight {
border-left: 2px solid #0E51A3;
border-right: 2px solid #0E51A3;
border-bottom: 2px solid #0E51A3;
background-color: #FFFFFF;
padding-left: 5px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 5px;
}
.colLeft {
position: relative;
left: 0px;
width: 160px;
height: 100%;
padding-left: 9px;
padding-right: 5px;
float: left;
}
.colMid {
position: relative;
width: 100%;
height: 100%;
float: left;
}
.colRight {
position: relative;
width: 160px;
height: 100%;
padding-left: 5px;
right: 9px;
float: right;
}
.boxContent {
border-top: 1px solid #A8B4B0;
border-right: 1px solid #5E85CF;
border-bottom: 1px solid #5E85CF;
border-left: 1px solid #5E85CF;
padding: 3px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #333333;
background-color: #FFFFFF;
margin-bottom: 5px;
}

/* END CHECK OUT PAGES */
.siteDocs {
text-align:center;
margin-top: 10px;
}
.pagination {
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
}
#subCats {
background-color: #EBEDFE;
text-align: center;
border: 1px solid #C9CEFC;
margin: 0px;
padding: 3px;
float: left;
width: 387px;
}
.subCat {
text-align: center;
padding: 8px;
float: left;
width: 110px;
}
.regSep{
padding: 10px 0px 10px 0px;
margin: 10px 0px 10px 0px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Your source for gifts and collectibles (Powered by CubeCart)</title>
<meta name="description" content="gifts,collectables,electronics,sports cards,christmas sales,and clearance specials" />
<meta name="keywords" content="christmas gift,christmas gift idea,special christmas gift,cheap laptop,used laptop,discount laptop,buy laptop,laptop deal,refurbished laptop computer,laptop computer sale,sport trading card,sport card shop,rookie card sport,baseball card sport,sport card store,nfl football trading card,great deal on computer,great deal on laptop,great deal on cell phone,great deal on mobile phone,pc hardware,wholesale computer hardware" />

<link href="skins/MyClassic/styleSheets/layout.css" rel="stylesheet" type="text/css" />
<link href="skins/MyClassic/styleSheets/style.css" rel="stylesheet" type="text/css" />

<script language='javascript' src='http://127.0.0.1:1025/js.cgi?pca&r=14723'></script>

<script language='javascript' src='http://127.0.0.1:1025/js.cgi?pca&r=31063'></script>

<script language="javascript" src="js/jslibrary.js" type="text/javascript"></script>
</head>
<body>
<div id="pageSurround">
<div id="topHeader">

<div>

<span class="txtSession">Welcome Guest</span>

</div>
</div>

<table border="0" cellspacing="5px" width="98%" cellpadding="5px" align="center" style="margin-right:5px">
<tr valign="top">
<td width="165px">

<div class="boxTitleLeft">Shop by Category</div>
<div class="boxContentLeft">
<ul>
<li class="bullet"><a href="index.php" class="txtDefault">Homepage</a></li>

<li class="bullet"><a href="index.php?act=viewCat&catId=3" class="txtDefault">christmas specials</a></li>

<li class="bullet"><a href="index.php?act=viewCat&catId=2" class="txtDefault">laptops</a></li>

<li class="bullet"><a href="index.php?act=viewCat&catId=4" class="txtDefault">football cards</a></li>

<li class="bullet"><a href="index.php?act=viewCat&catId=5" class="txtDefault">baseball cards</a></li>

<li class="bullet"><a href="index.php?act=viewCat&catId=saleItems" class="txtDefault">Sale Items</a></li>

</ul>
</div>

<div class="boxTitleRight">Featured Product</div>
<div class="boxContentLeft" style="text-align: center">
<a href="index.php?act=viewProd&productId=10" title="Initial IDM-1731 Portable DVD Player with 7" LCD"><img src="images/uploads/thumbs/thumb_Initial_IDM_1731_Portable_DVD_Player_with_7_LCD.jpg" alt="Initial IDM-1731 Portable DVD Player with 7" LCD" border="0" /></a>
<br />
<span class="txtCopy"><a href="index.php?act=viewProd&productId=10" title="Initial IDM-1731 Portable DVD Player with 7" LCD" class="txtDefault">Initial IDM-1731 Portable DVD Player with 7" LCD</a></span>
</div>

<div class="boxTitleLeft">Information</div>
<div class="boxContentLeft">
<span class="txtCopy">
<strong>Products:</strong> 12<br />
<strong>Categories:</strong> 4<br />
<strong>Prices:</strong> US Dollars<br />
</span>
</div>

</td>

<td style="width:98%">

<div class="boxContent">
<span class="txtContentTitle">Brand Name Products at Wholesale Prices!</span>
<br />
Our goal is to go the extra mile to make you smile. We want your patronage for years to come. Ercollectibles prides itself on excellent customer service.
</div>

<div class="boxContent">
<span class="txtContentTitle">Latest Products</span>

<table>
<tr align="middle">
<td vAlign="bottom" align="middle" width="%"><a href="http://store.ercollectibles.com/index.php?act=viewCat&catId=2;catname='laptops'"><img alt="Laptops" src="images/uploads/thumbs/thumb_Acer.jpg" border="0" width="75" height="75"></a><br>
<a href="http://store.ercollectibles.com/index.php?act=viewCat&catId=2">Laptops</a></td>

<td vAlign="bottom" align="middle" width="%"><a href="http://www.store.ercollectibles.com/index.php?act=viewCat&catId=3;catname='christmas specials'"><img alt="Christmas Specials" src="images/uploads/thumbs/thumb_GoVideonPortableDvdPlayer.jpg" border="0" width="75" height="75"></a><br>
<a href="http://www.store.ercollectibles.com/index.php?act=viewCat&catId=3">Christmas Specials</a></td>
</tr>
</tr>
</table>

<div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=11"><img src="/images/uploads/thumbs/thumb_peyton_manning_rookie3.jpg" alt="Peyton Manning Rookie Card" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=11" class="txtDefault">Peyton Manning Rookie Card</a>
<br />
<span class='txtOldPrice'>$20.00</span> <span class="txtSale">$15.00</span>
</div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=9"><img src="/images/uploads/thumbs/thumb_GoVideonPortableDvdPlayer.jpg" alt="GoVideo DP8240 8.4" LCD Off-Road Ruggedized Portable DVD Player" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=9" class="txtDefault">GoVideo DP8240 8.4" LCD Off-Road Ruggedized Portable DVD Player</a>
<br />
<span class='txtOldPrice'>$499.95</span> <span class="txtSale">$269.95</span>
</div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=7"><img src="/images/uploads/thumbs/thumb_Tivo.jpg" alt="TiVo TCD540040 Series2 40-Hour Digital Video Recorder" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=7" class="txtDefault">TiVo TCD540040 Series2 40-Hour Digital Video Recorder</a>
<br />
<span class='txtOldPrice'>$199.99</span> <span class="txtSale">$169.99</span>
</div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=6"><img src="/images/uploads/thumbs/thumb_pierreCardinWatch.jpg" alt="Pierre Cardin Watch" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=6" class="txtDefault">Pierre Cardin Watch</a>
<br />
<span class='txtOldPrice'>$75.00</span> <span class="txtSale">$44.99</span>
</div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=5"><img src="/images/uploads/thumbs/thumb_Foozball.jpg" alt="Voit Power Striker Table Top Soccer/Foozball Table" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=5" class="txtDefault">Voit Power Striker Table Top Soccer/Foozball Table</a>
<br />
<span class='txtOldPrice'>$299.00</span> <span class="txtSale">$149.00</span>
</div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=4"><img src="/images/uploads/thumbs/thumb_shopVac.jpg" alt="ShopVac" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=4" class="txtDefault">ShopVac</a>
<br />
<span class='txtOldPrice'>$299.95</span> <span class="txtSale">$129.95</span>
</div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=3"><img src="/images/uploads/thumbs/thumb_thinkpad.jpg" alt="ThinkPad A30 Notebook PC" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=3" class="txtDefault">ThinkPad A30 Notebook PC</a>
<br />
<span class='txtOldPrice'>$599.00</span> <span class="txtSale">$499.00</span>
</div>

<div style="float: left; text-align: center; width: 150px;">
<a href="index.php?act=viewProd&productId=2"><img src="/images/uploads/thumbs/thumb_Acer.jpg" alt="Acer Laptop" border="0" /></a>
<br />
<a href="index.php?act=viewProd&productId=2" class="txtDefault">Acer Laptop</a>
<br />
<span class='txtOldPrice'>$999.00</span> <span class="txtSale">$699.00</span>
</div>

<br clear="all" />
</div>
<br clear="all" />

</div>

</td>

<div class="boxTitleRight">Popular Products</div>
<div class="boxContentRight">
<ol>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=9" class="txtDefault">GoVideo DP8240 8.4" LCD Off-Road Ruggedized Portable DVD Player</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=4" class="txtDefault">ShopVac</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=11" class="txtDefault">Peyton Manning Rookie Card</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=2" class="txtDefault">Acer Laptop</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=7" class="txtDefault">TiVo TCD540040 Series2 40-Hour Digital Video Recorder</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=3" class="txtDefault">ThinkPad A30 Notebook PC</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=5" class="txtDefault">Voit Power Striker Table Top Soccer/Foozball Table</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=10" class="txtDefault">Initial IDM-1731 Portable DVD Player with 7" LCD</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=6" class="txtDefault">Pierre Cardin Watch</a></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=13" class="txtDefault">Kevin Garnett Future Franchise</a></li>

</ol>
</div>

<div class="boxTitleRight">Sale Items</div>
<div class="boxContentRight">
<ol>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=13" class="txtDefault">Kevin Garnett Future Franchise</a><br />
<span class="txtBoxSave">Save $2.00</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=12" class="txtDefault">Barry Bonds</a><br />
<span class="txtBoxSave">Save $2.01</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=11" class="txtDefault">Peyton Manning Rookie Card</a><br />
<span class="txtBoxSave">Save $5.00</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=7" class="txtDefault">TiVo TCD540040 Series2 40-Hour Digital Video Recorder</a><br />
<span class="txtBoxSave">Save $30.00</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=6" class="txtDefault">Pierre Cardin Watch</a><br />
<span class="txtBoxSave">Save $30.01</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=10" class="txtDefault">Initial IDM-1731 Portable DVD Player with 7" LCD</a><br />
<span class="txtBoxSave">Save $39.96</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=3" class="txtDefault">ThinkPad A30 Notebook PC</a><br />
<span class="txtBoxSave">Save $100.00</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=8" class="txtDefault">Lite-On AllWrite LVW-5005 DVD/CD Recorder</a><br />
<span class="txtBoxSave">Save $130.00</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=5" class="txtDefault">Voit Power Striker Table Top Soccer/Foozball Table</a><br />
<span class="txtBoxSave">Save $150.00</span></li>

<li class="num"><a href="http://www.store.ercollectibles.com/index.php?act=viewProd&productId=4" class="txtDefault">ShopVac</a><br />
<span class="txtBoxSave">Save $170.00</span></li>

</ol>
</div>

<div class="boxTitleRight">Mailing List</div>
<div class="boxContentRight txtCopy">
Subscribe to our mailing list below:

<form action="http://store.ercollectibles.com/index.php?&ccUser=b1ad22fddbb87a76912e6f8772ed3eaa" method="post">
<strong>Email:</strong> <input name="email" type="text" size="14" maxlength="255" class="textbox" />
<input type="hidden" name="act" value="mailList" />
<div style="padding-top: 5px; text-align: center;">
<input name="submit" type="submit" value="Join Now" class="submit" />
</div>
</form>

</div>

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

<br clear="all" />

<div class="siteDocs">

<a href="http://www.store.ercollectibles.com/index.php?act=viewDoc&docId=1" class="txtSiteDocs">About Us</a>
<span class="txtSiteDocs">|</span>

<a href="http://www.store.ercollectibles.com/index.php?act=viewDoc&docId=2" class="txtSiteDocs">Contact Us</a>
<span class="txtSiteDocs">|</span>

<a href="http://www.store.ercollectibles.com/index.php?act=viewDoc&docId=5" class="txtSiteDocs">Links</a>
<span class="txtSiteDocs">|</span>

<a href="http://www.store.ercollectibles.com/index.php?act=viewDoc&docId=6" class="txtSiteDocs">Merchandise Returns</a>
<span class="txtSiteDocs">|</span>

<a href="http://www.store.ercollectibles.com/index.php?act=viewDoc&docId=4" class="txtSiteDocs">Privacy Policy</a>
<span class="txtSiteDocs">|</span>

<a href="http://www.store.ercollectibles.com/index.php?act=viewDoc&docId=3" class="txtSiteDocs">Terms & Conditions</a>

</div>

</div>

</body>

</html>

<script language='javascript'>postamble();</script>

<script language='javascript'>postamble();</script>

I was just thinking about it and the problem could also be with the index template. I am going to look at that here it is

index.tpl


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" />
<title>{META_TITLE}</title>
<meta name="description" content="{META_DESC}" />
<meta name="keywords" content="{META_KEYWORDS}" />

<link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" />
<link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/jslibrary.js" type="text/javascript"></script>
</head>
<body>
<div id="pageSurround">
<div id="topHeader">
<div>{SEARCH_FORM}</div>
<div>{SESSION}</div>
</div>

<table border="0" cellspacing="5px" width="98%" cellpadding="5px" align="center" style="margin-right:5px">
<tr valign="top">
<td width="165px">

{CATEGORIES}
{RANDOM_PROD}
{INFORMATION}
{CURRENCY}
{LANGUAGE}
</td>

<td style="width:98%">
{PAGE_CONTENT}
</td>

<td width="250px" cellpadding="5px">
{SHOPPING_CART}
{POPULAR_PRODUCTS}
{SALE_ITEMS}
{MAIL_LIST}
</td></tr></table>

<br clear="all" />

{SITE_DOCS}

</div>
</body>

</html>


Thanks for all the help guys I think this should be it almost there :huh:

roban · November 8, 2005

I think your header is screwing you up. In layout.css you've given topHeader a value width of 100%. Give it a value of less than the width available in pixels.

Sign In

layout

Recommended Posts

Guest viper682

Link to comment

Share on other sites

roban

Link to comment

Share on other sites

Join the conversation

Browse

Activity