help please

 

Here's the code:

 

<head>

<link rel="stylesheet" type="text/css" href="css.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>


 <!--[if IE 7]>
       <link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>



<script type="text/javascript">

   $(document).ready(function(){

       $(window).bind("resize", resizeWindow);

       function resizeWindow(e){

           var newWindowWidth = $(window).width();



           // If width width is below 600px, switch to the mobile stylesheet

           if(newWindowWidth < 600){                $("link[rel=stylesheet]").attr({href : "mobile.css"});              }           // Else if width is above 600px, switch to the large stylesheet             else if(newWindowWidth > 600){

               $("link[rel=stylesheet]").attr({href : "style.css"});

           }

       }

   });

</script>



</head>
<body>
        <div class="container">
         <div id="header">

   <div id="Layer-14" class="Home  Service Menu   Special"  >
      <a href="index.html">Home</a> | <a href="service_menu.html">Service Menu</a> | <a href="index.html">Specials</a> | <a href="index.html">Appointments</a> | <a href="our_staff.html">Our Staff</a> | <a href="index.html">Gift Cards</a> | <a href="index.html">Products</a> </div>	     

	</div><!--header-->
	 <div id="main_content">






	 <div class="con_top">      <img src="http://nssthespa.com/Layer-6.png" style="left:1100px;
top:450px;
position:relative;">




<img src="http://nssthespa.com/Layer-7.png" style="left:910px;
top:410px;
position:relative;">


<img src="http://nssthespa.com/Layer-15.png"style="right: 685px;
top:36px;
position:relative;">


</div>



						 <div class="con_bot"><div id="Layer-5" class="Layer 3 copy"  ><div></div>




	</div>			
</div>

<div id="Layer-15" class="Group 4 copy 5"  >
    </div>




     <div id="Layer-6" class="Shape 4"  >

 </div>

</body>
</html>

 

 

 

CSS

 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color: #000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background: url(burlap2.gif) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
line-height:18px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}


.container {
width:1126px;
   margin:0 auto;
text-align: left;

}
/*header*/
#header {
width: 100%;
   text-align: left;
height:120px;
background:none;
position:relative;
margin:0px 0 0 0;
font-size: x-large;
}
.logo{
width:331px;
height:126px;
display:block;
float:left;
margin: 8px 0 0 0;
padding:0;
}




.con_top{
  width: 1024px;
   text-align: left;
margin:-100px 0  0 0;
padding:0;
background:url(/images/cont_top.png) no-repeat 0 0;
height:174px;
position:absolute;
z-index:-1;
}
.con_bot{
  width: 1024px;
   text-align: left;
margin: 0px 0 0 0;
padding:0;
background:url(/images/cont_bot.png) no-repeat ;
height:174px;
position:absolute;
}
.con_left{
float:left;
width:230px;
margin:-40px 0  0  30px;
padding:15px;
height:600px;
border-right:5px solid #1d3d41;
}
.con_left h2{
color:#000;
font-weight:700;
font-size:18px;
margin:0 0  15px 0;
}
.pic
{
margin:0  24px  0  0;
}
.pic2
{
margin:-40px  24px  0  0;
float:left;
width:213px;
height:280px;
}
.con_right{
width:665px;

background:none;
padding:5px;
float:left;
margin:0 0 0  0px;
}
.rght_top{

height:279px;

padding:5px;
float:left;
margin:0px;
border-bottom:5px solid #254649;
}
.img5{
float:right;
margin:-60px 100px 15px 0;
padding:0;
}
.rght_bot{
 height:288px;

float:left;
margin:0px 0 0  0px;
}



.one_third{
width:202px;
float:right;
margin:0 0px 0 0;
padding:7px;
height:320px;
border-right:5px solid #254649;
z-index: 4;
}




ul.pak{
width:180px;
margin:0 0 0 15px;
}
ul.pak li{
list-style:circle;
line-height:20px;
}
ul.pak li.hd{
list-style:none;
margin:0 0 5px 0;
font-weight:700;
}
a.more{
background:  url("images/more.png")  center  left no-repeat;
float:right;
width:70px;
height:33px;
display:block;
}
.inner{
margin:5px  18px  15px  8px;
padding:0;
height:410px;
}



/* You named this layer Layer 3 copy */

/* You named this layer Shape 4 */
#Layer-6 {
 position: absolute;
 left: 652px;
 top: 210px;
 width: 234px;
 height: 244px;
 z-index: -2;
}


/* You named this layer Hours  Monday 9am - 7pm Tuesd */
#Layer-7 {
 position: absolute;
 right: 220px;
 top: 630px;
 width: 164px;
 height: 170px;
}

#Layer-14 {
 position: absolute;
 left: 245px;
 top: 47px;
 width: 861px;
 height: 25px;
 font-size:x-large;
}






a.noborder, ul.foo_links li a.noborder{
border-style:none;
margin:0;
padding:0 0  0  4px;
}
ul.foo_links li a.noborder{
border-style:none;
margin:0;
padding:0 4px  0  25px;


}
ul.foo_links li {
background: url(images/li_img.png)  no-repeat 0px 11px;

}
ul.foo_links li a,ul.foo_links li a:visited{
color:#fff;
}
ul.foo_links li a:hover{
color:#f3686d;
background: url(images/a_bg.gif)  repeat-x  0px 0px;
padding:5px 35px 5px 0;
}
.center{
text-align:center;
color:#fff;
margin:0;
padding:0;
}

#main_content{
   width: 1126px;
   text-align: left;
margin:0px 0 300px -10px ;
padding:0px;
background:url(cont_mid.png) repeat-y 0 0;
height:600px;
}
.con_top{
   width: 1126px;
   text-align: left;
margin:-100px 300px 0 0;
padding:0;
background:url(cont_top.png) no-repeat 0 0;
height:174px;

z-index:-1;
}
.con_bot{
   width: 1126px;
   text-align: left;
margin: 550px 0 0 0;
padding:0;
background:url(/6/cont_botxxx.png) no-repeat ;
height:250px;
}	

.Layer-5 {
width: 1300px;
margin: 0;
z-index: -6;

}

Are you fellas seeing the same thing?

I can't see class="logo" anywhere in your markup. If you are referring to the image Layer-6.png in class="con_top"> then there could be a problem as class="con_top" is position: absolute; inside .container and #maincontent and neither of those has position: relative to control the position: absolute of .con_top. The position: absolute is taking its position from the corner of the window instead of the corner of a parent div.

.con_top has two styles, make sure they don't conflict (they do at present).

 

Position: absolute needs top or bottom and left or right styles which you don't have.

 

.con_top has a background-image cont_top.png, is that your logo or Layer-6.png inside it?

 

The image Layer-6.png inside .con_top has style="left:1100px; top:450px; position:relative;" and I expect that is throwing it out of its div.

 

It's a bit of a mess.

Edited November 17, 201114 yr by Wickham

There are better ways of resizing a website based on width. Look at media queries

Thanks guys, I'm going to have a look at some other options right now, primarily the media queries. I've dabbled with them a bit but I'm thinking that's the right way to go as well.

 

cheers!