Kefas Product Layout
This question is a follow on from:
https://www.experts-exchange.com/questions/21470813/Automatically-increase-div-width-to-fit-text-width.html#14302185
Layout I am trying to achieve:
www.lastwishes.org.uk/kefas/home_demo.htm
...the actual site as it currently is:
www.lastwishes.org.uk/kefas/home.htm
I am trying to get the products laid out properly on the page.
I THINK the use of tables here is acceptable because of the nature of the information to be presented. However I still want to apply CSS to these tables to get them to layout properly.
I thought I could create two divs in the central container - left and right, then float them left and right to get two columns of products. However it doesn't seem to be working quite right...
--------------------------
HTML
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
~ snip ~
</head>
<body onload="window.defaultStat
<div id="page_container">
<div id="banner">
<a href="home.htm"><img src="banner.jpg" alt="Kefas: Outward Call" width=772 height=84></a>
</div>
<div id="left">
<img src="nav_top.gif" alt="">
<div id="nav">
<img id="nav_home" src="home_out.gif" alt="">
<img id="nav_mens" src="mens_out.gif" alt="">
<img id="nav_womens" src="womens_out.gif" alt="">
<img id="nav_spring" src="spring_out.gif" alt="">
<img id="nav_autumn" src="autumn_out.gif" alt="">
<img id="nav_under50" src="under50_out.gif" alt="">
<img id="nav_contact" src="contact_out.gif" alt="">
</div>
<img id="view_basket" src="view_basket_up.gif" alt="">
<img id="nav_arc" src="nav_arc.gif" alt="">
<img id="nav_mountain" src="nav_mountain.jpg" alt="">
</div>
<!-- Let"s do it the easy way - each div is the same, and the bottom image is for css only since it"s pure eye candy -->
<div id="right">
<div class="sidebar">
<img src="news_top.gif" alt="">
<div class="sidebar_text">Kefas
<a href="#">Check it out.</a></div>
<div class="sidebar_text">Andre
<a href="#">Read it here.</a></div>
<div class="sidebar_text">Andre
<a href="#">Read it here.</a></div>
</div>
<div class="sidebar">
<img src="catalogue_top.gif" alt="">
<div class="sidebar_text">Get the latest catalogue <a href="#"> >> </a></div>
</div>
<div class="sidebar">
<img src="featured_product_top.
<div class="sidebar_text">Kefas
</div>
</div>
<!-- new containing div for central area, solves your basket problem as well -->
<div id="content">
<div id="kefas_global">
<a id="basket" href="basket.asp">10 Items £3,990.00</a>
<a href="http://www.kefas.it" alt"kefas global">[Kefas Global Site]</a>
</div>
<!-- and the rest of the content goes here... -->
<div id='products_left'>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_colour' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_size' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='Mr'>Brown &nbs
<OPTION VALUE='Mrs'>Mrs
<OPTION VALUE='Miss'>Miss
<OPTION VALUE='Ms'>Ms
<OPTION VALUE='Dr'>Dr
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
<!-- and the rest of the content goes here... -->
<div id='products_right'>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_colour' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_size' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='Mr'>Brown &nbs
<OPTION VALUE='Mrs'>Mrs
<OPTION VALUE='Miss'>Miss
<OPTION VALUE='Ms'>Ms
<OPTION VALUE='Dr'>Dr
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
--------------------------
CSS
--------------------------
body
{
background-color: #A8AE8D;
text-align:center;
margin:10px 0 10px 0;
}
/* some defaults */
* { text-align:left; }
img { display:block; border:none; }
/* THE MAIN CONTAINER */
#page_container
{
background-color:#999595;
margin:0px auto;
width:772px;
padding-bottom:10px;
overflow:hidden;
}
/* THE BANNER */
#banner
{
background-color:#CCE1AA;
height:98px;
}
/* THE LEFT CONTAINER */
#left
{
background-color:#ffffff;
width:157px;
float:left;
margin:10px 10px 0 10px;
display:inline;
}
#nav img
{
padding:6px 0 0 18px;
}
#view_basket
{
padding:18px 0 0 18px;
}
#nav_arc
{
padding:15px 0 0 0;
}
/* THE RIGHT CONTAINER */
#right
{
width:186px;
float:right;
margin:10px 10px 0 10px;
display:inline;
}
.sidebar
{
margin-bottom:10px;
background: #6A6A6B url(news_bottom.gif) no-repeat bottom left;
padding-bottom:18px;
}
.sidebar_text
{
padding:10px 8px 0px 23px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar p
{
padding:0 0px 0px 12px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar_text a, .sidebar_text a:visited, .sidebar_text a:active
{
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #9FB3DC;
line-height:20px;
}
.sidebar_text a:hover
{
text-decoration: none;
color: #ffffff;
}
/* THE CENTER CONTAINER */
#content
{
float:left;
width:389px;
background-color: #ffffff;
}
#kefas_global
{
background-color: #D0B846;
height:20px;
line-height:17px;
padding-left:5px;
}
#basket
{
background-image:url(baske
background-repeat:no-repea
background-color:#D82827;
height:20px;
line-height:18px;
float:right;
padding-left:25px;
padding-right:5px;
}
#products_left
{
float:left;
background-color:#FFFFFF;
padding:1px 1px 1px 1px;
}
#products_left table
{
background-color:#FF00FF;
width:185px;
margin-bottom:10px;
}
#products td
{
}
#product_image
{
background-color:#FF00FF;
width:82px;
}
#product_price
{
line-height:17px;
}
#products_right
{
float:right;
background-color:#FFFFFF;
padding:1px 1px 1px 1px;
}
#products_right table
{
background-color:#FF00FF;
width:185px;
margin-bottom:10px;
}
#products td
{
}
#product_image
{
background-color:#FF00FF;
width:82px;
}
#product_price
{
line-height:17px;
}
/* MISC. TEXT AND LINK STYLES */
.text
{
font: normal 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_bold
{
font: bold 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_white
{
font: normal 10px verdana,arial,helvetica,sa
color: #ffffff;
}
.text_liteblue
{
font: normal 10px verdana,arial,helvetica,sa
color: #A0B3DC;
}
.text_price
{
font: bold 12px verdana,arial,helvetica,sa
color: #ff0000;
}
.input
{
font: normal 10px arial,helvetica,sans-serif
color: #000000;
background-color: #ffffff;
}
a
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
a:visited
{
text-decoration: none;
color: #ffffff;
}
a:hover
{
text-decoration: none;
color: #9685BA;
}
a:active
{
text-decoration: none;
color: #ffffff;
}
https://www.experts-exchange.com/questions/21470813/Automatically-increase-div-width-to-fit-text-width.html#14302185
Layout I am trying to achieve:
www.lastwishes.org.uk/kefas/home_demo.htm
...the actual site as it currently is:
www.lastwishes.org.uk/kefas/home.htm
I am trying to get the products laid out properly on the page.
I THINK the use of tables here is acceptable because of the nature of the information to be presented. However I still want to apply CSS to these tables to get them to layout properly.
I thought I could create two divs in the central container - left and right, then float them left and right to get two columns of products. However it doesn't seem to be working quite right...
--------------------------
HTML
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
~ snip ~
</head>
<body onload="window.defaultStat
<div id="page_container">
<div id="banner">
<a href="home.htm"><img src="banner.jpg" alt="Kefas: Outward Call" width=772 height=84></a>
</div>
<div id="left">
<img src="nav_top.gif" alt="">
<div id="nav">
<img id="nav_home" src="home_out.gif" alt="">
<img id="nav_mens" src="mens_out.gif" alt="">
<img id="nav_womens" src="womens_out.gif" alt="">
<img id="nav_spring" src="spring_out.gif" alt="">
<img id="nav_autumn" src="autumn_out.gif" alt="">
<img id="nav_under50" src="under50_out.gif" alt="">
<img id="nav_contact" src="contact_out.gif" alt="">
</div>
<img id="view_basket" src="view_basket_up.gif" alt="">
<img id="nav_arc" src="nav_arc.gif" alt="">
<img id="nav_mountain" src="nav_mountain.jpg" alt="">
</div>
<!-- Let"s do it the easy way - each div is the same, and the bottom image is for css only since it"s pure eye candy -->
<div id="right">
<div class="sidebar">
<img src="news_top.gif" alt="">
<div class="sidebar_text">Kefas
<a href="#">Check it out.</a></div>
<div class="sidebar_text">Andre
<a href="#">Read it here.</a></div>
<div class="sidebar_text">Andre
<a href="#">Read it here.</a></div>
</div>
<div class="sidebar">
<img src="catalogue_top.gif" alt="">
<div class="sidebar_text">Get the latest catalogue <a href="#"> >> </a></div>
</div>
<div class="sidebar">
<img src="featured_product_top.
<div class="sidebar_text">Kefas
</div>
</div>
<!-- new containing div for central area, solves your basket problem as well -->
<div id="content">
<div id="kefas_global">
<a id="basket" href="basket.asp">10 Items £3,990.00</a>
<a href="http://www.kefas.it" alt"kefas global">[Kefas Global Site]</a>
</div>
<!-- and the rest of the content goes here... -->
<div id='products_left'>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_colour' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_size' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='Mr'>Brown &nbs
<OPTION VALUE='Mrs'>Mrs
<OPTION VALUE='Miss'>Miss
<OPTION VALUE='Ms'>Ms
<OPTION VALUE='Dr'>Dr
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
<!-- and the rest of the content goes here... -->
<div id='products_right'>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_colour' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_size' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
<table>
<tr>
<td id='product_image'><A HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A></td>
<td id='product_price' class='text_price'>£60.00<
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Colour:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='Mr'>Brown &nbs
<OPTION VALUE='Mrs'>Mrs
<OPTION VALUE='Miss'>Miss
<OPTION VALUE='Ms'>Ms
<OPTION VALUE='Dr'>Dr
</select>
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'>
<B>Size:</B>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Title'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
--------------------------
CSS
--------------------------
body
{
background-color: #A8AE8D;
text-align:center;
margin:10px 0 10px 0;
}
/* some defaults */
* { text-align:left; }
img { display:block; border:none; }
/* THE MAIN CONTAINER */
#page_container
{
background-color:#999595;
margin:0px auto;
width:772px;
padding-bottom:10px;
overflow:hidden;
}
/* THE BANNER */
#banner
{
background-color:#CCE1AA;
height:98px;
}
/* THE LEFT CONTAINER */
#left
{
background-color:#ffffff;
width:157px;
float:left;
margin:10px 10px 0 10px;
display:inline;
}
#nav img
{
padding:6px 0 0 18px;
}
#view_basket
{
padding:18px 0 0 18px;
}
#nav_arc
{
padding:15px 0 0 0;
}
/* THE RIGHT CONTAINER */
#right
{
width:186px;
float:right;
margin:10px 10px 0 10px;
display:inline;
}
.sidebar
{
margin-bottom:10px;
background: #6A6A6B url(news_bottom.gif) no-repeat bottom left;
padding-bottom:18px;
}
.sidebar_text
{
padding:10px 8px 0px 23px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar p
{
padding:0 0px 0px 12px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar_text a, .sidebar_text a:visited, .sidebar_text a:active
{
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #9FB3DC;
line-height:20px;
}
.sidebar_text a:hover
{
text-decoration: none;
color: #ffffff;
}
/* THE CENTER CONTAINER */
#content
{
float:left;
width:389px;
background-color: #ffffff;
}
#kefas_global
{
background-color: #D0B846;
height:20px;
line-height:17px;
padding-left:5px;
}
#basket
{
background-image:url(baske
background-repeat:no-repea
background-color:#D82827;
height:20px;
line-height:18px;
float:right;
padding-left:25px;
padding-right:5px;
}
#products_left
{
float:left;
background-color:#FFFFFF;
padding:1px 1px 1px 1px;
}
#products_left table
{
background-color:#FF00FF;
width:185px;
margin-bottom:10px;
}
#products td
{
}
#product_image
{
background-color:#FF00FF;
width:82px;
}
#product_price
{
line-height:17px;
}
#products_right
{
float:right;
background-color:#FFFFFF;
padding:1px 1px 1px 1px;
}
#products_right table
{
background-color:#FF00FF;
width:185px;
margin-bottom:10px;
}
#products td
{
}
#product_image
{
background-color:#FF00FF;
width:82px;
}
#product_price
{
line-height:17px;
}
/* MISC. TEXT AND LINK STYLES */
.text
{
font: normal 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_bold
{
font: bold 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_white
{
font: normal 10px verdana,arial,helvetica,sa
color: #ffffff;
}
.text_liteblue
{
font: normal 10px verdana,arial,helvetica,sa
color: #A0B3DC;
}
.text_price
{
font: bold 12px verdana,arial,helvetica,sa
color: #ff0000;
}
.input
{
font: normal 10px arial,helvetica,sans-serif
color: #000000;
background-color: #ffffff;
}
a
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
a:visited
{
text-decoration: none;
color: #ffffff;
}
a:hover
{
text-decoration: none;
color: #9685BA;
}
a:active
{
text-decoration: none;
color: #ffffff;
}
Change the margin on #left to:
margin:10px 0 0 10px;
and change the margin on #right to: margin:10px 10px 0 0;
The floats should create the seperation for you just fine.
Cd&
margin:10px 0 0 10px;
and change the margin on #right to: margin:10px 10px 0 0;
The floats should create the seperation for you just fine.
Cd&
>> I think you should remove that display:inline from #left and #right to get the to float correctly
That's for IE - without it that browser will double the requested margin's.
It seems odd, but it has no detrimental effect on any other user agent...
Sean
That's for IE - without it that browser will double the requested margin's.
It seems odd, but it has no detrimental effect on any other user agent...
Sean
Should there not be a closing div tag for product_left before product_right is open?
If so then it might need to be validated, because when I display the block elemdnt outlines the structure look broken in the content area.
Cd&
If so then it might need to be validated, because when I display the block elemdnt outlines the structure look broken in the content area.
Cd&
ASKER
Thanks COBOLd.
Another silly typo.
I have just updated the code to the site again.
I just have a couple of bugs still to tackle in it.
1. In IE 5.2 on a Mac the content (/* THE MAIN CONTAINER */ #page_container) is not centered in the browser window, but sticks far left.
2. I have introduced a footer to the page - I don't think I have coded this quite right. It works fine on IE6 and Firefox on a PC, but in IE5.2 and Safari on a Mac it looks totally messed up. On IE-Mac the footer sits just below the #banner div.
What have I done wrong?
--------------------------
HTML
--------------------------
<body onload="window.defaultStat
<div id="page_container">
<div id="banner">
<a href="home.htm"><img src="banner.jpg" alt="Kefas: Outward Call" width=772 height=84></a>
</div>
<div id="left">
<img src="nav_top.gif" alt="">
<div id="nav">
<img id="nav_home" src="home_up.gif" alt="">
<img id="nav_mens" src="mens_up.gif" alt="">
<img id="nav_womens" src="womens_up.gif" alt="">
<img id="nav_kids" src="kids_up.gif" alt="">
<img id="nav_spring" src="spring_up.gif" alt="">
<img id="nav_autumn" src="autumn_up.gif" alt="">
<img id="nav_under50" src="under50_up.gif" alt="">
<img id="nav_trade" src="trade_up.gif" alt="">
<img id="nav_contact" src="contact_up.gif" alt="">
</div>
<img id="view_basket" src="view_basket_up.gif" alt="">
<img id="nav_mountain" src="nav_mountain2.jpg" alt="">
</div>
<!-- Let"s do it the easy way - each div is the same, and the bottom image is for css only since it"s pure eye candy -->
<div id="right">
<div class="sidebar">
<img src="news_top.gif" alt="">
<div class="sidebar_text">Kefas
<a href="#">Check it out.</a></div>
<div class="sidebar_text">Andre
<a href="#">Read it here.</a></div>
<div class="sidebar_text">Hill Walking Challenge.<br>
<a href="#">Enter.</a></div>
</div>
<div class="sidebar">
<img src="catalogue_top.gif" alt="">
<div class="sidebar_text">Get the latest catalogue <a href="#"> >> </a></div>
</div>
<div class="sidebar">
<img src="featured_product_top.
<div class="sidebar_text">Kefas
</div>
</div>
<!-- new containing div for central area, solves your basket problem as well -->
<div id="content">
<div id="kefas_global">
<a id="basket" class='white' href="basket.asp">10 Items £690.00</a>
<a href="http://www.kefas.it" alt"kefas global">[Kefas Global Site]</a>
</div>
<!-- and the rest of the content goes here... -->
<div id='products_left'>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
</div>
<!-- and the rest of the content goes here... -->
<div id='products_right'>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
</div>
</div>
<div id="footer_panel" class='text'>
<A class='darkgray' HREF="http://?">home</A> &nbs
<A class='darkgray' HREF="http://?">mens</A> &nbs
<A class='darkgray' HREF="http://?">women</A> &nb
<A class='darkgray' HREF="http://?">kids</A> &nbs
<A class='darkgray' HREF="http://?">spring/summer</A>&
<A class='darkgray' HREF="http://?">autumn/winter</A>&
<A class='darkgray' HREF="http://?">under £50</A>
<A class='darkgray' HREF="http://?">contact</A> &
</div>
<div id="footer_statement" class='text'>This site is operated under license by shopeeze.com</div>
</div>
</body>
</html>
--------------------------
CSS
--------------------------
body
{
background-color: #A8AE8D;
text-align:center;
margin:10px 0 10px 0;
}
/* some defaults */
* { text-align:left; }
img { display:block; border:none; }
/* THE MAIN CONTAINER */
#page_container
{
background-color:#999595;
margin:0px auto;
width:772px;
padding-bottom:0px;
overflow:hidden;
}
/* THE BANNER */
#banner
{
background-color:#CCE1AA;
height:98px;
}
/* THE LEFT CONTAINER */
#left
{
background-color:#ffffff;
width:157px;
float:left;
margin:10px 10px 0 10px;
display:inline;
}
#nav img
{
padding:6px 0 0 18px;
}
#view_basket
{
padding:20px 0 0 18px;
}
#nav_mountain
{
padding:15px 0 0 0;
}
/* THE RIGHT CONTAINER */
#right
{
width:186px;
float:right;
margin:10px 10px 0 10px;
display:inline;
}
.sidebar
{
margin-bottom:10px;
background: #6A6A6B url(news_bottom.gif) no-repeat bottom left;
padding-bottom:18px;
}
.sidebar_text
{
padding:10px 8px 0px 23px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar p
{
padding:0 0px 0px 12px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar_text a, .sidebar_text a:visited, .sidebar_text a:active
{
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #9FB3DC;
line-height:20px;
}
.sidebar_text a:hover
{
text-decoration: none;
color: #ffffff;
}
/* THE CENTER CONTAINER */
#content
{
float:left;
width:389px;
background-color: #ffffff;
display:inline;
}
#kefas_global
{
background-color: #D0B846;
height:20px;
line-height:17px;
padding-left:5px;
}
#basket
{
background-image:url(baske
background-repeat:no-repea
background-color:#D82827;
height:20px;
line-height:18px;
float:right;
padding-left:26px;
padding-right:5px;
}
#basket a, #basket a:visited, #basket a:active, #basket a:hover
{
text-decoration: none;
color: #ffffff;
}
#products_left
{
float:left;
background-color:#FFFFFF;
padding:10px 1px 1px 20px;
}
#products_right
{
float:right;
background-color:#FFffFF;
padding:10px 1px 1px 1px;
}
#products_left table, #products_right table
{
background-color:#FFffFF;
width:180px;
margin-bottom:14px;
}
#product_image
{
float:left;
background-color:#FFFFFF;
}
#product_price
{
float:left;
padding:6px 1px 1px 0;
}
#product_title
{
height:20px;
line-height:18px;
}
#product_input_name
{
width:56px;
}
#product_input
{
width:133px;
}
#more_info
{
float:left;
padding-left:1px;
padding-top:3px;
height:23px;
}
#add2basket
{
float:right;
padding-right:24px;
padding-top:3px;
height:23px;
}
/* THE FOOTER*/
#footer_panel
{
background-color:#CCE1AA;
height:18px;
width:772px;
text-align:center;
line-height:17px;
}
#footer
{
background-color:#A8AE8D;
text-align:center;
height:18px;
width:772px;
}
#footer_statement
{
background-color:#A8AE8D;
text-align:center;
height:20px;
line-height:20px;
width:772px;
}
/* MISC. TEXT AND LINK STYLES */
.text
{
font: normal 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_bold
{
font: bold 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_white
{
font: normal 10px verdana,arial,helvetica,sa
color: #ffffff;
}
.text_liteblue
{
font: normal 10px verdana,arial,helvetica,sa
color: #A0B3DC;
}
.text_price
{
font: bold 12px verdana,arial,helvetica,sa
color: #ff0000;
}
.input
{
font: normal 10px arial,helvetica,sans-serif
color: #000000;
background-color: #ffffff;
}
a
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
a:visited
{
text-decoration: none;
color: #ffffff;
}
a:hover
{
text-decoration: none;
color: #9685BA;
}
a:active
{
text-decoration: none;
color: #ffffff;
}
a.white
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
a.white:visited
{
text-decoration: none;
color: #ffffff;
}
a.white:hover
{
text-decoration: none;
color: #ffffff;
}
a.white:active
{
text-decoration: none;
color: #ffffff;
}
a.darkgray
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #6A6A6B;
}
a.darkgray:visited
{
text-decoration: none;
color: #6A6A6B;
}
a.darkgray:hover
{
text-decoration: none;
color: #6A6A6B;
}
a.darkgray:active
{
text-decoration: none;
color: #6A6A6B;
}
Another silly typo.
I have just updated the code to the site again.
I just have a couple of bugs still to tackle in it.
1. In IE 5.2 on a Mac the content (/* THE MAIN CONTAINER */ #page_container) is not centered in the browser window, but sticks far left.
2. I have introduced a footer to the page - I don't think I have coded this quite right. It works fine on IE6 and Firefox on a PC, but in IE5.2 and Safari on a Mac it looks totally messed up. On IE-Mac the footer sits just below the #banner div.
What have I done wrong?
--------------------------
HTML
--------------------------
<body onload="window.defaultStat
<div id="page_container">
<div id="banner">
<a href="home.htm"><img src="banner.jpg" alt="Kefas: Outward Call" width=772 height=84></a>
</div>
<div id="left">
<img src="nav_top.gif" alt="">
<div id="nav">
<img id="nav_home" src="home_up.gif" alt="">
<img id="nav_mens" src="mens_up.gif" alt="">
<img id="nav_womens" src="womens_up.gif" alt="">
<img id="nav_kids" src="kids_up.gif" alt="">
<img id="nav_spring" src="spring_up.gif" alt="">
<img id="nav_autumn" src="autumn_up.gif" alt="">
<img id="nav_under50" src="under50_up.gif" alt="">
<img id="nav_trade" src="trade_up.gif" alt="">
<img id="nav_contact" src="contact_up.gif" alt="">
</div>
<img id="view_basket" src="view_basket_up.gif" alt="">
<img id="nav_mountain" src="nav_mountain2.jpg" alt="">
</div>
<!-- Let"s do it the easy way - each div is the same, and the bottom image is for css only since it"s pure eye candy -->
<div id="right">
<div class="sidebar">
<img src="news_top.gif" alt="">
<div class="sidebar_text">Kefas
<a href="#">Check it out.</a></div>
<div class="sidebar_text">Andre
<a href="#">Read it here.</a></div>
<div class="sidebar_text">Hill Walking Challenge.<br>
<a href="#">Enter.</a></div>
</div>
<div class="sidebar">
<img src="catalogue_top.gif" alt="">
<div class="sidebar_text">Get the latest catalogue <a href="#"> >> </a></div>
</div>
<div class="sidebar">
<img src="featured_product_top.
<div class="sidebar_text">Kefas
</div>
</div>
<!-- new containing div for central area, solves your basket problem as well -->
<div id="content">
<div id="kefas_global">
<a id="basket" class='white' href="basket.asp">10 Items £690.00</a>
<a href="http://www.kefas.it" alt"kefas global">[Kefas Global Site]</a>
</div>
<!-- and the rest of the content goes here... -->
<div id='products_left'>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
</div>
<!-- and the rest of the content goes here... -->
<div id='products_right'>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
<table>
<tr>
<td colspan=2>
<A id='product_image' HREF="http://?"><IMG SRC='shoe1.jpg' ALT='' BORDER=0></A>
<div id='product_price' class='text_price'>£60.00<
</td>
</tr>
<tr>
<td colspan=2 id='product_title' class='text'><B>2453 Churco Lady New</B></td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Colour:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Colour'>
<OPTION VALUE='Brown'>Brown &
<OPTION VALUE='Blue'>Blue
<OPTION VALUE='Red'>Red
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Size:</B>
</td>
<td id='product_input'>
<select class='input' onkeydown='return tabOnEnter (this, event);' size=1 name='Size'>
<OPTION VALUE='22'>22
<OPTION VALUE='23'>23
<OPTION VALUE='24'>24
<OPTION VALUE='25'>25
<OPTION VALUE='26'>26
</select>
</td>
</tr>
<tr>
<td id='product_input_name' class='text'>
<B>Quantity:</B>
</td>
<td id='product_input'><INPUT class='input' onkeydown='return tabOnEnter (this, event);' NAME='Quantity' SIZE=3></td>
</tr>
<tr>
<td colspan=2>
<A id='more_info' HREF="http://?"><IMG SRC="bttnMoreInfo.GIF" ALT="?" BORDER=0></A>
<A id='add2basket' HREF="http://?"><IMG SRC="bttnAdd2Basket.GIF" ALT="?" BORDER=0></A>
</td>
</tr>
</table>
</div>
</div>
<div id="footer_panel" class='text'>
<A class='darkgray' HREF="http://?">home</A> &nbs
<A class='darkgray' HREF="http://?">mens</A> &nbs
<A class='darkgray' HREF="http://?">women</A> &nb
<A class='darkgray' HREF="http://?">kids</A> &nbs
<A class='darkgray' HREF="http://?">spring/summer</A>&
<A class='darkgray' HREF="http://?">autumn/winter</A>&
<A class='darkgray' HREF="http://?">under £50</A>
<A class='darkgray' HREF="http://?">contact</A> &
</div>
<div id="footer_statement" class='text'>This site is operated under license by shopeeze.com</div>
</div>
</body>
</html>
--------------------------
CSS
--------------------------
body
{
background-color: #A8AE8D;
text-align:center;
margin:10px 0 10px 0;
}
/* some defaults */
* { text-align:left; }
img { display:block; border:none; }
/* THE MAIN CONTAINER */
#page_container
{
background-color:#999595;
margin:0px auto;
width:772px;
padding-bottom:0px;
overflow:hidden;
}
/* THE BANNER */
#banner
{
background-color:#CCE1AA;
height:98px;
}
/* THE LEFT CONTAINER */
#left
{
background-color:#ffffff;
width:157px;
float:left;
margin:10px 10px 0 10px;
display:inline;
}
#nav img
{
padding:6px 0 0 18px;
}
#view_basket
{
padding:20px 0 0 18px;
}
#nav_mountain
{
padding:15px 0 0 0;
}
/* THE RIGHT CONTAINER */
#right
{
width:186px;
float:right;
margin:10px 10px 0 10px;
display:inline;
}
.sidebar
{
margin-bottom:10px;
background: #6A6A6B url(news_bottom.gif) no-repeat bottom left;
padding-bottom:18px;
}
.sidebar_text
{
padding:10px 8px 0px 23px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar p
{
padding:0 0px 0px 12px;
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
.sidebar_text a, .sidebar_text a:visited, .sidebar_text a:active
{
font: normal 10px verdana,arial,helvetica,sa
text-decoration: none;
color: #9FB3DC;
line-height:20px;
}
.sidebar_text a:hover
{
text-decoration: none;
color: #ffffff;
}
/* THE CENTER CONTAINER */
#content
{
float:left;
width:389px;
background-color: #ffffff;
display:inline;
}
#kefas_global
{
background-color: #D0B846;
height:20px;
line-height:17px;
padding-left:5px;
}
#basket
{
background-image:url(baske
background-repeat:no-repea
background-color:#D82827;
height:20px;
line-height:18px;
float:right;
padding-left:26px;
padding-right:5px;
}
#basket a, #basket a:visited, #basket a:active, #basket a:hover
{
text-decoration: none;
color: #ffffff;
}
#products_left
{
float:left;
background-color:#FFFFFF;
padding:10px 1px 1px 20px;
}
#products_right
{
float:right;
background-color:#FFffFF;
padding:10px 1px 1px 1px;
}
#products_left table, #products_right table
{
background-color:#FFffFF;
width:180px;
margin-bottom:14px;
}
#product_image
{
float:left;
background-color:#FFFFFF;
}
#product_price
{
float:left;
padding:6px 1px 1px 0;
}
#product_title
{
height:20px;
line-height:18px;
}
#product_input_name
{
width:56px;
}
#product_input
{
width:133px;
}
#more_info
{
float:left;
padding-left:1px;
padding-top:3px;
height:23px;
}
#add2basket
{
float:right;
padding-right:24px;
padding-top:3px;
height:23px;
}
/* THE FOOTER*/
#footer_panel
{
background-color:#CCE1AA;
height:18px;
width:772px;
text-align:center;
line-height:17px;
}
#footer
{
background-color:#A8AE8D;
text-align:center;
height:18px;
width:772px;
}
#footer_statement
{
background-color:#A8AE8D;
text-align:center;
height:20px;
line-height:20px;
width:772px;
}
/* MISC. TEXT AND LINK STYLES */
.text
{
font: normal 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_bold
{
font: bold 10px verdana,arial,helvetica,sa
color: #202020;
}
.text_white
{
font: normal 10px verdana,arial,helvetica,sa
color: #ffffff;
}
.text_liteblue
{
font: normal 10px verdana,arial,helvetica,sa
color: #A0B3DC;
}
.text_price
{
font: bold 12px verdana,arial,helvetica,sa
color: #ff0000;
}
.input
{
font: normal 10px arial,helvetica,sans-serif
color: #000000;
background-color: #ffffff;
}
a
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
a:visited
{
text-decoration: none;
color: #ffffff;
}
a:hover
{
text-decoration: none;
color: #9685BA;
}
a:active
{
text-decoration: none;
color: #ffffff;
}
a.white
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #ffffff;
}
a.white:visited
{
text-decoration: none;
color: #ffffff;
}
a.white:hover
{
text-decoration: none;
color: #ffffff;
}
a.white:active
{
text-decoration: none;
color: #ffffff;
}
a.darkgray
{
font: normal 11px verdana,arial,helvetica,sa
text-decoration: none;
color: #6A6A6B;
}
a.darkgray:visited
{
text-decoration: none;
color: #6A6A6B;
}
a.darkgray:hover
{
text-decoration: none;
color: #6A6A6B;
}
a.darkgray:active
{
text-decoration: none;
color: #6A6A6B;
}
I don't support Mac, so I don't have one to set it up and play with it. Perhaps Sean knows what kind of a tweak or hack that it needs to kick it into place.
Cd&
Cd&
ASKER
Thanks COBOL.
I don't have one either - I have friends who do who are kindly giving me feedback.
I think I will have to invest in a mini-Mac for testing purposes.
I don't have one either - I have friends who do who are kindly giving me feedback.
I think I will have to invest in a mini-Mac for testing purposes.
It wil be a few weeks (at least) before I could get back to this...
Good idea on the mini-Mac though.
Sean
Good idea on the mini-Mac though.
Sean
ASKER
Hi Sean,
I guess all I would really like to know is...
...you have shown me how to create a layout with a top panel (banner) and then below this a left container, center container and right container. I understand the left and right containers and how they fit together with float...but how do I add a bottom container to all this (the footer). I can use float...I don't think...?? Anyway I haven't used a float statement and I think it is for this reason that Macs don't like it. I think it is more a question of me writing bad CSS because I am still learning rather than it being a question of Macs behaving badly.
...just wondered if anything jumped out at you in the Footer CSS as being bad.
Much appreciated.
holgrave.
I will have a play with the code myself - but it is harder for me to play - test - play not having a Mac myself, I can only bug my friends so much...
I guess all I would really like to know is...
...you have shown me how to create a layout with a top panel (banner) and then below this a left container, center container and right container. I understand the left and right containers and how they fit together with float...but how do I add a bottom container to all this (the footer). I can use float...I don't think...?? Anyway I haven't used a float statement and I think it is for this reason that Macs don't like it. I think it is more a question of me writing bad CSS because I am still learning rather than it being a question of Macs behaving badly.
...just wondered if anything jumped out at you in the Footer CSS as being bad.
Much appreciated.
holgrave.
I will have a play with the code myself - but it is harder for me to play - test - play not having a Mac myself, I can only bug my friends so much...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, will test tomorrow.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
It's okay you ae allowed to stop for a beer each time around aren't you ?
Cd&
Cd&
Absolutely - that's why it's taken so long :-)
BTW holgrave, when you wanto to start looking at modifying behaviour over time in your web apps, that guy that just posted above me is about the best there is.
Sean
BTW holgrave, when you wanto to start looking at modifying behaviour over time in your web apps, that guy that just posted above me is about the best there is.
Sean
Maybe not this weekend.
Tonight I will be in a suite in the casino watching one of th biggest fireworks shows in North America as the kickoff to the biggest party weekend of the summer that incorporate the Canadian Independence Day on Friday and the U.S. Independence Day on Monday (living on the border does have some advantages).
Any post you see from me for the next week will done while I'm drunk, hungover, or passed out. :^)
Cd&
Tonight I will be in a suite in the casino watching one of th biggest fireworks shows in North America as the kickoff to the biggest party weekend of the summer that incorporate the Canadian Independence Day on Friday and the U.S. Independence Day on Monday (living on the border does have some advantages).
Any post you see from me for the next week will done while I'm drunk, hungover, or passed out. :^)
Cd&
ASKER
He he, thanks for all your help guys.
Either way fixed the footer issue on the Mac - like I said still learning.
Sean - no offence taken at all I'm always open to a bit of advice, that's how I learn.
Your advice has been invaluable as usual. I don't quite agree with everything you say, even though it is interesting and thought provoking...
I think my design is OK because it is only on the home page that I will have the 'News', 'Catalogue' and 'Featured Product' sections - so this opens up the rest of the sites pages to more space for content.
As a programmer I want the user to get to what they might be interested in as few as clicks as possible - that means that I want as many products up front in the shop window as possible, what you are suggesting is showing just one product at a time?? In a real shoe shop you would have all the shoes either in the window or on display in the shop so the customer would quickly see what they are interested in, it is only then that they would need more information on the shoe. That is all I am emulating in my website. There is no point showing them detailed information of a product on the home page - for a product they might not be interested in - while also hiding other shoes they might be interested in in the 'back room'.
COBOL enjoy your beer - you sure earn it on this site.
Either way fixed the footer issue on the Mac - like I said still learning.
Sean - no offence taken at all I'm always open to a bit of advice, that's how I learn.
Your advice has been invaluable as usual. I don't quite agree with everything you say, even though it is interesting and thought provoking...
I think my design is OK because it is only on the home page that I will have the 'News', 'Catalogue' and 'Featured Product' sections - so this opens up the rest of the sites pages to more space for content.
As a programmer I want the user to get to what they might be interested in as few as clicks as possible - that means that I want as many products up front in the shop window as possible, what you are suggesting is showing just one product at a time?? In a real shoe shop you would have all the shoes either in the window or on display in the shop so the customer would quickly see what they are interested in, it is only then that they would need more information on the shoe. That is all I am emulating in my website. There is no point showing them detailed information of a product on the home page - for a product they might not be interested in - while also hiding other shoes they might be interested in in the 'back room'.
COBOL enjoy your beer - you sure earn it on this site.
Cd&