Menu
The layout looks decent on my desktop but the menu and the images are too far to the right on my laptop.. any suggestions?
[url]http://naturalskinscience.com/dev/index.htm
[code=html]<link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen” />
<style type=”text/css”>
div.col1
{
width:300px;
height:100px;
background-color:white;
-webkit-box-shadow: 50px 50px 50px #000000; /* Safari */
box-shadow: 0px 1px 45px 10px #000000;
z-index: 1;
}
</style>
<style type=”text/css”>
img
{
opacity:1.0;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:0.8;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body onload=”MM_preloadImages(‘ser.gif’);mp_onload();”>
<div id=”header”>
</div>
<div class=”colmask threecol”>
<div class=”colmid”>
<div class=”colleft”>
<div class=”col1″ style=”overflow:auto; width: 66%; height: 1330px;”>
<blockquote>
</blockquote>
</div>
<div class=”col2″>
<img src=”NSS_index_logo.gif” style=”opacity: 1;”>
<img src=”home.gif”><img src=”pixel.gif” width=”30px” align=”left”>
<a href=”service_menu.htm” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘ser.gif’)”><img src=”service.gif” alt=”Store” name=”Store” border=”0″ id=”Store”></a><img src=”pixel.gif” width=”30px” align=”left”>
<img src=”specials.gif”><img src=”pixel.gif” width=”30px” align=”left”>
<img src=”app.gif”><img src=”pixel.gif” width=”30px” align=”left”>
<img src=”our.gif”><img src=”pixel.gif” width=”30px” align=”left”>
<img src=”gift.gif”><img src=”pixel.gif” width=”30px” align=”left”>
<img src=”products.gif”><img src=”pixel.gif” width=”30px” align=”left”>
<img src=”contact.gif”><img src=”pixel.gif” width=”30px” align=”left”>
<p><img src=”pix.gif” height=”54px”></p>
</div>
<div class=”col3″>
</div>
</div>
</div>
</body>
</html>[code=html]
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout – remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
}
a {
color:#369;
}
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
z-index: -1 !important;
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* ‘widths’ sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background-image:url(‘bgbg.gif’);
/* right column background colour */
}
.threecol .colmid {
right:17.3%; /* width of the right column */
background:#fff; /* center column background colour */
}
.threecol .colleft {
right:65%; /* width of the middle column */
background-image:url(‘bgbg.gif’);
}
.threecol .col1 {
width:65%; /* width of center column content (column width minus padding on either side) */
left:99%; /* 100% plus left padding of center column */
/*box-shadow: 0px 5px 10px 10px #888;*/
}
.threecol .col2 {
width:16%; /* Width of left column content (column width minus padding on either side) */
left:18%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% – left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
Your help would be greatly appreciated.