...

View Full Version : header image is cut off when scroll bars present



njfail
01-26-2013, 07:55 PM
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 :thumbsup:

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:
http://i48.tinypic.com/2z3nmsk.jpg

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

Here is some of the HTML that might be helpful:


<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:

@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! :)

Excavator
01-26-2013, 09:35 PM
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 -
.dark-gradient, #headerWrapper {
background-color: #00121B;
background-image: -moz-linear-gradient(center top , #00121B, #00283F);
min-width: 1194px;
}

njfail
01-27-2013, 02:05 AM
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 -
.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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum