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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    header image is cut off when scroll bars present

    Hey guys.
    I'm a beginner with CSS and HTML, I can handle the basics and follow tutorials.
    I copied and pasted a bunch of HTML, CSS, and JS from a layout, and deleted all the JS and a lot of the HTML and CSS that I wasn't using. I tried sifting through it and getting rid of everything that wasn't being used on my pages, and I customized things for myself.

    Also, the owner of the template told me it was okay to do this

    The problem I'm having, is whenever there are horizontal scroll bars, the header image gets cut off. So its spread across 100% of the original screen position, but if you scroll to the side, the image not there. When there are no horizontal scroll bars, it works fine.

    Heres an image of the problem:


    And you can see it live at http://valueviewmedia.com

    Here is some of the HTML that might be helpful:
    Code:
    	<head>
    		<link type="text/css" href="/style.css" rel="stylesheet">
    		<meta content="width=device-width, initial-scale=1.0" name="viewport">
    		<title>ValueViewMedia</title>
    		<link rel="icon" type="image/png" href="/vvmfavicon16.png">
    	</head>
    	<body>
    		<div id="headerWrapper">
    			<div id="header">
    				<div id="networkname">
    					<h1><a href="/"><img alt="ValueViewMedia" src="/valueviewmedia.png"></a></h1>
    				</div>
    				<nav class="topbar" id="usernav">
    					<ul>
    						<li class="menu"><a class="menu" name="Settings" title="Log in to your ValueViewMedia Publisher or Advertiser account." href="#">Log in</a></li>
    						<li><a title="Talk with a support representative." href="/contactus">Contact Us</a></li>
    					</ul>
    				</nav>
    			</div>
    		</div>
    		<div class="navtabsWrapper">
    			<nav id="navtabs">
    				<ul>
    					<li id="tab-dashboard" class="selected"><a title="Home Page." href="/">Home</a></li>
    					<li id="tab-campaigns"><a title="Information on becoming a ValueViewMedia Publisher." href="/publishers">Publishers</a></li>
    					<li id="tab-sites"><a title="Learn about advertising on the ValueViewMedia network." href="/advertisers">Advertisers</a></li>
    				</ul>
    			</nav>
    		</div>
    Here is some of the CSS that might be helpful:
    Code:
    @charset "UTF-8";html,body{
    margin:0;padding:0
    }
    
    @media screen and (-webkit-min-device-pixel-ratio: 0){
    .imageNav .selectedsub a:after{
    top:12px !important
    }
    }
    
    body {
      color: #67818E;
      overflow: auto;
      line-height: 1;
    }
    
    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, u, i, center, ol, ul, li, footer, header, menu, nav, section {
      border: 0 none;
      font: inherit;
      margin: 0;
      padding: 0;
      vertical-align: baseline;
    }
    
    #headerWrapper {
      height: 112px;
      width: 100%;
    }
    
    .dark-gradient,#headerWrapper{
    background-color:#00121b;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#00121b), to(#00283f));
    background-image:-webkit-linear-gradient(top, #00121b, #00283f);
    background-image:-moz-linear-gradient(top, #00121b, #00283f);
    background-image:-ms-linear-gradient(top, #00121b, #00283f);
    background-image:-o-linear-gradient(top, #00121b, #00283f);
    background-image:linear-gradient(top, #00121b, #00283f)
    }
    
    #header, #navtabs, #maincontent, #footer {
      margin: 0 auto;
      padding: 0px 25px;
      max-width: 1140px;
      min-width: 800px;
      width: 1140px;
    }
    
    .topbar {
      float: right;
      overflow: visible;
      z-index: 600;
    }
    
    .topbar ul {
      display: block;
      float: left;
      margin: 0 10px 0 0;
      position: relative;
    }
    
    ol, ul {
      list-style: none outside none;
    }
    
    .topbar ul li.menu {
      position: relative;
    }
    
    .topbar ul li {
      display: block;
      float: left;
      font-size: 13px;
    }
    
    li {
      color: #505050;
    }
    
    .topbar ul li.menu a.menu:after {
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #FFFFFF;
      content: &darr;
      display: inline-block;
      height: 0;
      margin-left: 4px;
      margin-top: 8px;
      opacity: 0.5;
      text-indent: -99999px;
      vertical-align: top;
      width: 0;
    }
    
    .topbar ul li a {
      display: block;
      float: none;
      line-height: 19px;
      padding: 7px 14px;
      text-decoration: none;
    }
    
    .navtabsWrapper {
      background-image: url("//adzerk-www.s3.amazonaws.com/nav_bg.png");
      border-top: 1px solid #4FB3CB;
      clear: both;
      height: 41px;
      position: relative;
      width: 100%;
    }
    
    .navtabsWrapper #navtabs ul li {
      border-left: 1px solid #059EC4;
      border-right: 1px solid #0480AE;
      display: inline-block;
      float: left;
      font-size: 14px;
      height: 41px;
      line-height: 41px;
      padding: 0 12px;
      text-transform: capitalize;
    }
    
    .navigation-font, .navtabsWrapper #navtabs ul li, .navtabsWrapper #navtabs ul li a, .imageNavContainer ul li a {
      font-family: 'PT Sans Narrow',Helvetica Neue,Helvetica,Arial,Sans-serif;
    }
    
    .navtabsWrapper #navtabs ul li.selected {
      background-color: #DBDFE1;
      background-image: -moz-linear-gradient(center top , #DBDFE1, #FEFEFE);
      border-left: 2px solid #DCE1E6;
      border-top: 1px solid #FFFFFF;
      bottom: 6px;
      left: 1px;
      margin-left: -2px;
      padding-top: 5px;
      position: relative;
    }
    
    .navtabsWrapper #navtabs ul li {
      border-right: 1px solid #0480AE;
      display: inline-block;
      float: left;
      font-size: 14px;
      height: 41px;
      line-height: 41px;
      text-transform: capitalize;
    }
    
    .navigation-font, .navtabsWrapper #navtabs ul li, .navtabsWrapper #navtabs ul li a, .imageNavContainer ul li a {
      font-family: 'PT Sans Narrow',Helvetica Neue,Helvetica,Arial,Sans-serif;
    }
    
    .imageNavContainer ul {
      margin: 0 auto;
      max-width: 1140px;
      min-width: 800px;
    }
    
    .imageNavContainer ul .campaigns:before {
      background: url("//adzerk-www.s3.amazonaws.com/ados/icon_sprites.png") repeat scroll 329px 20px transparent;
      content: " ";
      float: left;
      height: 18px;
      width: 20px;
    }
    
    .imageNavContainer ul li {
      display: inline-block;
      height: 40px;
      margin: 16px 32px -12px 10px;
    }
    
    .imageNavContainer ul li a:before {
      margin-right: 5px;
    }
    
    .imageNavContainer ul li a {
      display: block;
      float: left;
      font-size: 14px;
      margin: 4px 0 0 5px;
      text-transform: capitalize;
    }
    
    .imageNavContainer ul .advertiser:before {
      background: url("//adzerk-www.s3.amazonaws.com/ados/icon_sprites.png") repeat scroll -109px 20px transparent;
      content: " ";
      float: left;
      height: 18px;
      width: 20px;
    }
    
    .navtabsWrapper #navtabs ul li.selected a {
    text-shadow:0 1px 0px #fff;
    }
    
    .navtabsWrapper #navtabs ul li a{
    text-shadow:0 1px 0px #002339;
    }
    
    .navtabsWrapper{
    background-image:url("//adzerk-www.s3.amazonaws.com/nav_bg.png");
    width:100%;
    clear:both;
    height:41px;
    position:relative;
    border-top:#4fb3cb solid 1px;
    }
    
    .navtabsWrapper #navtabs ul li{
    text-transform:capitalize;
    display:inline-block;
    border-left:1px solid #059EC4;
    border-right:1px solid #0480AE;
    float:left;
    height:41px;
    line-height:41px;
    padding:0 12px;
    font-size:14px;
    }
    
    .navtabsWrapper #navtabs ul li a{
    color:#FFFFFF;
    text-decoration:none;
    text-transform:capitalize;
    font-size:16px;
    display:block;
    }
    
    .navtabsWrapper #navtabs ul li a:hover{
    text-decoration:underline;
    }
    
    .navtabsWrapper #navtabs ul li.selected{
    background-color:#dbdfe1;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#dbdfe1), to(#fefefe));
    background-image:-webkit-linear-gradient(top, #dbdfe1, #fefefe);
    background-image:-moz-linear-gradient(top, #dbdfe1, #fefefe);
    background-image:-ms-linear-gradient(top, #dbdfe1, #fefefe);
    background-image:-o-linear-gradient(top, #dbdfe1, #fefefe);
    background-image:linear-gradient(top, #dbdfe1, #fefefe);
    border-left:2px solid #dce1e6;
    border-top:1px solid #FFFFFF;
    bottom:6px;
    left:1px;
    margin-left:-2px;
    padding-top:5px;
    position:relative;
    }
    
    .navtabsWrapper #navtabs ul li.selected a{
    color:#002339;
    }
    
    .navtabsWrapper #navtabs ul li#tab-dashboard.selected{
    background-color:#DCE1E6;
    background-image:none;
    }
    
    .navtabsWrapper #navtabs ul li:hover{
    color:#fff;
    }
    
    #navtabs ul .selected{
    background-color:#DCE1E6;
    }
    
    .navtabsWrapper #navtabs ul li#tab-dashboard.selected{
    background-color:#DCE1E6;
    background-image:none;
    }
    Hopefully someone can help me with this problem!
    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello njfail,
    Your repeated background image only repeats in the visible part of your header. Once you scroll over to the part that was not visible, the page is already done loading so no more repeated image.

    Look what a min-width can do for you -
    Code:
    .dark-gradient, #headerWrapper {
        background-color: #00121B;
        background-image: -moz-linear-gradient(center top , #00121B, #00283F);
        min-width: 1194px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello njfail,
    Your repeated background image only repeats in the visible part of your header. Once you scroll over to the part that was not visible, the page is already done loading so no more repeated image.

    Look what a min-width can do for you -
    Code:
    .dark-gradient, #headerWrapper {
        background-color: #00121B;
        background-image: -moz-linear-gradient(center top , #00121B, #00283F);
        min-width: 1194px;
    }
    Thank you Excavator that worked like a charm!


  •  

    Posting Permissions

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