Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    78
    Thanks
    1
    Thanked 0 Times in 0 Posts

    why is there white space showing when shrinking browser

    1. When I shrink the browser size the horizontal scrollbar shows which is fine, but when i scroll to the right the background ends and there is like white leftover space.

    2. I want to adjust the opacity of just the background and thats all but when I adjust the opacity it adjust everything else with it.

    css:
    Code:
    body, html {
    	background-image: url('../images/images/background2.jpg');
    	background-repeat: no-repeat;
    	background-size: 100%;
    	margin: 0 auto;
    }
    
    #container {
    	margin-top: 10px;
    }
    
    #header {
    	background: white;
    	text-align: left;
    	width: 966px;
    	height: 140px;
    }
    
    .logo {
    	float: left;
    }
    
    .banner {
    
    }
    
    #menu {
    	background: #f903b6;
    	width: 966px;
    	height: 40px;
    }
    
    .nav a{
    	text-decoration: none;
    	font-family: segoe script;
    	font-weight: bold;
    	font-size: 16px;
    	color: #ffffff;
    }
    
    .nav ul {
    	word-spacing: 8px;
    	font-family: segoe script;
    	color: #ffffff;
    }
    
    .nav ul li {
    	display: inline;
    }
    
    #content {
    	background: #ffffff rgba(00, 0.6);
    	width: 966px;
    	height: 100%;
    }
    
    .title {
    	font-family: "garamond";
    	font-size: 35px;
    	font-weight: bold;
    	color: #336600;
    	line-height: 5px;
    	text-align: center;
    }
    
    .subtitle {
    	font-family: "garamond";
    	font-size: 30px;
    	font-style: italic;
    	font-weight: normal;
    	color: #336600;
    	line-height: 5px;
    	text-align: center;
    }
    
    .text1 {
    	width: 900px;
    	font-family: "garamond";
    	font-size: 16px;
    	color: #000000;
    	font-weight: bold;
    	text-align: left;
    }
    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home - </title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    
      <center>
      <div id="header">
    		<div class="logo">
    			<img src="images/logo/logo9.png" height="197" width="138" /> 
    		</div>
    		<div class="banner">
    			<center><img src="images/images/title3.png" height="111" width="558" /></center>
    		</div>
      </div>
      
      <div id="menu">
    	<div class="nav">
    		<ul>    
    			<li><a href="http://www.#.com/home">Home</a></li> |
    			<li><a href="http://www.#.com/aboutme">About me</a></li> |
    			<li><a href="http://www.#.com/gallery">Gallery</a></li> |
    			<li><a href="http://www.#.com/videos">Videos DL</a></li> |
    			<li><a href="http://www.#.com/chat">Chat</a></li> |
    			<li><a href="http://www.#.com/contact">Contact me</a></li> |
    			<li><a href="http://www.#.com/signup">Sign up</a></li>
    		<ul>
        </div>
      </div>
    
      <div id="content">
         <div class="text1">
          <p class="title">Title here</p> 
          <p class="subtitle">Subtitle here</p>
           
          <p>Text goes here.</p>
    	  
          <p class>Text goes here.</a></p>
        </div>
      </div>  
      <div id="footer"></div>
    </center>
    </div>
    </body>
    </html>
    Last edited by VIPStephan; 01-31-2013 at 09:32 PM. Reason: removed website link upon request by OP

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    1. When I shrink the browser size the horizontal scrollbar shows which is fine, but when i scroll to the right the background ends and there is like white leftover space.

    2. I want to adjust the opacity of just the background and thats all but when I adjust the opacity it adjust everything else with it.
    1. Not so much "like white" as just white I think....You have your background image set to 100%, so when horizontal scrollbars appear the image is still 100% of the viewport, so if you scroll you see the white background.

    2. I assume you are adjusting the opacity of the body element, in which case everything within it will also change opacity. If you want to adjust the background only, create a separate div, and use position:absolute on this div to sit it behind your content. That might give you some different options with problem 1 as well.


  •  

    Posting Permissions

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