Whenever I minimize my screen

**Supplement** · 11-16-2011 06:14 PM

my logo on the left disappears ...

http://nssthespa.com/dev/index.html

Here's the code:

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

Code:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* layout */
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;
	
}

**Supplement** · 11-16-2011 08:15 PM

See what I'm talking about?

**tracknut** · 11-16-2011 08:28 PM

Nope. You might mention what browser you're using where you see this issue, and you could also validate and correct your code - that can cause various quirks.

Dave

**Supplement** · 11-16-2011 08:53 PM

I'm testing on Chrome, ie and ff. The palm tree on the left disappears after its minimized to much. I'll validate for sure, thanks for the reminder.

**tracknut** · 11-16-2011 09:07 PM

As I make the browser width smaller, the palm tree gets pushed off the page to the left, and eventually disappears. Is that what you mean? Your center/main section is a fixed width, leaving no room for the stuff outside it...

Dave

**Supplement** · 11-16-2011 09:55 PM

Originally Posted by tracknut

As I make the browser width smaller, the palm tree gets pushed off the page to the left, and eventually disappears. Is that what you mean? Your center/main section is a fixed width, leaving no room for the stuff outside it...

Dave

Hey Dave,

That's precisely what i mean. What's the best way of going about a fix without screwing up my center content area?

**tracknut** · 11-16-2011 10:05 PM

Well, I would set down the keyboard for a minute and decide what you want to have happen when you resize the browser window. You've got several options, and you just need to pick one. All have pros and cons, there is no "best" way unfortunately.
- You could change your center content (.content class) to be a percentage-based area, that is always some percent (e.g. 80&#37

of the window size.
- You could reduce your content (1126px is quite huge) but keep it a fixed size that will fit in most folks' browsers
- You could do some combination of both such that the center window has a minimum fixed size, but grows above that.

Also consider what are you going to do with the palm trees, do they need to be percentage-based as well, or are they a fixed size? What about the menu on the right? What about your navigation along the top?

Once you pick a way, then you need to revisit all the div areas on your page and rework them in that model.

Dave

**Supplement** · 11-16-2011 10:21 PM

I think I might keep the center container and the top menu fixed and shrink it down to about 800px. Additionally, I think I want the logo on the left (palms) to be percentage based.

Scratch the menu on the right, there will be no menu.

**Supplement** · 11-16-2011 10:23 PM

What do you suggest?

Also I have the original work here:

www.nssthespa.com

The problem with that draft was pretty much the same thing, I couldn't get it centered on different size screens.. looks good on my screen at work but it's slightly off centered to the left ... and on my laptop i have to scroll over a bit to the right.

**Supplement** · 11-16-2011 10:38 PM

What's the syntax for something like the "window has a minimum fixed size, but grows above that?"

**Supplement** · 11-17-2011 12:14 AM

I can't seem to fix the container to shrink. It keeps missing the right side when i try to set a width and max-width..

i got the logo and other image to shrink fairly well though.

http://nssthespa.com/dev/index.html

**tracknut** · 11-17-2011 05:21 PM

Let me ask a couple more questions... You say you want the content area fixed at 800px, but the logo to stretch. So when the browser is at 900px, I presume you would want the logo on the left 100px, and the content to the right at 800px. And when the browser is at 1200px, you want the logo to expand to 400px, with the content at 800px to the right? And if the browser is at 800px, what do you want, and when it's at 700px?

Seems like life would be a lot easier if you didn't stretch the logo, and just made it some fixed size.

Dave

**Supplement** · 11-18-2011 09:43 PM

still having just a small margin problem.. perhaps you could help me out again Dave..

http://nssthespa.com/spa/index.html

when the screen is minimized, it just cuts off the left by a few pixels.

**tracknut** · 11-18-2011 09:50 PM

Your .container is 1024 pixels wide, and you're stuffing a main_content of 1123 pixels inside it. Can't fit! Change .container to 1123 to at least be as bit as main_content, and get rid of the -52px margin offset on main_content. I think that should do it.

Dave

**Supplement** · 11-18-2011 10:00 PM

Thanks Dave, not sure how I missed that.

=)

Thread: Whenever I minimize my screen

Thread Tools

Display

Whenever I minimize my screen

I think I'm getting closer

I've canned all the old code and started fresh..

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions