Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
Regular Coder
Join Date: Aug 2010
Posts: 125
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: ↓
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!
PM User | 2
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 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;
}
PM User | 3
Regular Coder
Join Date: Aug 2010
Posts: 125
Thanks: 2
Thanked 0 Times in 0 Posts
Quote:
Originally Posted by
Excavator
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!
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 09:22 AM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
