www.webdeveloper.com
Results 1 to 15 of 15

Thread: Whenever I minimize my screen

  1. #1
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Question Whenever I minimize my screen

    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;
    	
    }

  2. #2
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    See what I'm talking about?

  3. #3
    Join Date
    Aug 2006
    Posts
    1,943
    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

  4. #4
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    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.

  5. #5
    Join Date
    Aug 2006
    Posts
    1,943
    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

  6. #6
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Quote Originally Posted by tracknut View Post
    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?

  7. #7
    Join Date
    Aug 2006
    Posts
    1,943
    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

  8. #8
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    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.

  9. #9
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    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.

  10. #10
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    What's the syntax for something like the "window has a minimum fixed size, but grows above that?"

  11. #11
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Cool I think I'm getting closer

    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

  12. #12
    Join Date
    Aug 2006
    Posts
    1,943
    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

  13. #13
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

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

    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.

  14. #14
    Join Date
    Aug 2006
    Posts
    1,943
    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

  15. #15
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Thanks Dave, not sure how I missed that.

    =)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles