homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to make a scrolling div invisible ?
eSite




msg:4364715
 11:05 am on Sep 20, 2011 (gmt 0)

Hi,

I have a header, sidebar and footer that stay in place when the main content scrolls when it's longer than the page.
Problem is that when it scrolls up below the header (which is transparent to show the body's background) it does hide the background (a radial gradient).

N.B. this thread is not about merely hiding an element behind another or hiding the scrollbar.

Screenshot: [img193.imageshack.us...]


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">

<title></title>

<!-- HTML5 tags support for IE http://remysharp.com/2009/01/07/html5-enabling-script/ http://html5shim.googlecode.com/svn/trunk/html5.js -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://domain.net/include/js/html5.js"></script>
<![endif]-->

<script type="text/javascript" src=""></script>
<link href="" media="screen" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<style type="text/css">

html{
height:100%;
/* overflow-y:scroll; */ /*keep scrollbar position present if FF at all times*/
}

body{
height: 100%;
margin: 0px;
padding: 0px;

color: white;
background-color:#000000;
background-image: -moz-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 70%);
background-image: -webkit-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 70%);
background-image: -o-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: -ms-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-repeat: no-repeat;
}

#header_main{
position:fixed;
z-index:10;
left: 0px;
top: 0px;
height: 150px;
width: 100%;

text-align: center;
border: red 1px solid;
}

#section_header{
margin: auto;
width: 970px;

text-align: left;
}

#nav_main{
text-align: right;

background-color: #c37b00;
}

#article_main{
width: 970px;
min-height: 100%;
margin: 0 auto;

border: green 1px solid;
}

#section_article_main{
width: 730px;
/* padding:150px 0 35px 0; */ /*padding protects content from sliding under header & footer.*/
margin: 150px 0 35px 215px;
background-color: #eeefee;
color: black;
border: yellow 2px dashed;
}

#nav_toc{
float:left;/*IE8 needs a floated parent for the fixed div to kill RP/AP bug*/
width: 215px;
}

#section_nav_toc{
position: fixed;
width: 214px;/*15px total width with left border*/
top: 150px;/*total header height*/
bottom: 35px;/*total footer height*/
overflow: auto;/*insure access to text at smaller viewport heights*/

background-color: #001665;
opacity: 0.75;
border: 1px solid white;
}

a{
color: #c37b00;
font-weight: bold;
}

pre{
white-space: pre-line;
}

#footer_main{
position: fixed;
z-index: 10;
left: 0px;
bottom: 0px;
height: 35px;
width: 100%;

text-align: center;
}

#aside_footer_main{
margin: auto;
width: 970px;

border: red 1px solid;
text-align: left;
}
</style>

</head>

<body>

<header id="header_main">
<section id="section_header">

<img src="http://domain.net/include/images/logo/domain.net%20logo%20black%20notINT%20supsamp%20100px.png" alt="domain.net logo" title="Home & About domain.net" />
domain.net
tagline
slogan

<nav id="nav_main">
category 1, category 2, category 3, category 4,
</nav>

</section>
</header>


<article id="article_main">

<nav id="nav_toc">
<section id="section_nav_toc">
TOC
<ul>
<li><a href="#">What is this site about ?</a></li>
<li><a href="#">Who runs this site ?</a></li>
<li><a href="#">How is this site made ?</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Legal Statement</a></li>
</ul>
</section>
</nav>

<section id="section_article_main">

<pre id="pre_main">
<hgroup id="hgroup_main">
<h1>About domain.net</h1>
</hgroup>


<strong>• What is this site about ?</strong>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin enim, condimentum aliquet est vehicula ac.
Aliquam vitae imperdiet orci. Vivamus at nibh ut ipsum tempus vestibulum nec eget eros. Suspendisse vestibulum adipiscing ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi eros, mattis et pharetra vel, pharetra et nisl. Sed in elit vehicula sapien interdum hendrerit. Morbi lacus leo, ultricies eget ullamcorper in, bibendum et arcu. Nunc mollis condimentum ligula at facilisis.
Nulla dui ipsum, semper non ultricies non, sodales et turpis. Praesent pretium tincidunt ipsum non auctor. Fusce rutrum est sed purus iaculis vel fringilla ipsum blandit. Quisque risus metus, eleifend nec condimentum ut, egestas eget enim. Donec et purus et turpis varius vestibulum. Nunc nunc ipsum, laoreet ac feugiat vitae, facilisis eu metus. Cras tristique gravida fringilla.
Pellentesque mollis ante eget metus auctor adipiscing. Nam quis libero nec mauris vestibulum lacinia. Sed sit amet sapien in erat gravida mollis.

Morbi at metus orci, eu mattis enim. Phasellus nec arcu nisl. Sed consequat magna vel lacus facilisis facilisis at ac neque. Nullam pharetra consectetur sapien, placerat posuere ligula dapibus at. Integer et pellentesque arcu. Nulla eu ultrices sem. Donec id cursus libero. Phasellus eu mi quis nisi ultrices tempor et sollicitudin libero. Nam quam orci, rhoncus ut varius id, facilisis eget justo. Ut nec dui massa, in faucibus mauris. Cras non lacus sem, eu faucibus est. Proin aliquet, nibh vel aliquam mollis, ipsum lacus egestas erat, vehicula tempor augue nulla convallis odio. Nullam et enim ligula.

Phasellus fringilla condimentum orci, congue pretium nibh vulputate ac. In sed sollicitudin nisi. Cras id malesuada lorem. Suspendisse potenti. Pellentesque dictum accumsan lorem nec elementum. Aenean sit amet odio id nisi varius suscipit. Nunc consectetur convallis gravida. Ut facilisis gravida purus ac porta. Sed adipiscing urna vitae tellus aliquam vel tincidunt lectus lobortis.
Aenean a risus nec lectus pellentesque rutrum a nec erat. Donec feugiat nisl vitae nisi ultrices bibendum. Nullam diam arcu, vestibulum a gravida eu, lacinia sed diam. Donec odio velit, aliquet a elementum nec, pulvinar a nunc. Pellentesque lorem lectus, condimentum id auctor in, condimentum in arcu. Cras augue urna, pharetra nec pharetra sit amet, vehicula vitae lectus. Ut tristique nisi at eros suscipit molestie. Donec dolor eros, dignissim ut ultricies non, tempus sed nibh.

<figure>
<img src="" alt="" title="" />
<figcaption>
image description
</figcaption>
</figure>

<time datetime="2011-07-13T18:28:05Z"></time>

</pre>

</section>

</article>

<footer id="footer_main">

<aside id="aside_footer_main">
<a href="">About</a>
<a href="">Sitemap</a>
<a href="">Site bug ?</a>
<abbr title="All Rights Reserved.">&copy;</abbr> domain 2011
</aside>

</footer>

</body>

</html>

 

Paul_o_b




msg:4364744
 12:55 pm on Sep 20, 2011 (gmt 0)

You could repeat the gradient in the header and it should cover the scrolling div.

e.g.


#header_main{
position:fixed;
z-index:10;
left: 0px;
top: 0px;
height: 150px;
width: 100%;

text-align: center;
border: red 1px solid;
background-color:#000000;
background-image: -moz-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 70%);
background-image: -webkit-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 70%);
background-image: -o-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: -ms-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-repeat: no-repeat;

}


eSite




msg:4364759
 1:43 pm on Sep 20, 2011 (gmt 0)

Ah, good idea !
I thought both wouldn't match but they do.
I added background-attachment: fixed; so that the first doesn't scroll and it's perfect. And I moved the code to its own rule so that I don't repeat it.

Thanks for the solution !


body, #header_main, #footer_main{
background-color:#000000;
background-image: -moz-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 90%);
background-image: -webkit-radial-gradient(50% 300px, ellipse cover, #0028c2, #000000 90%);
background-image: -o-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: -ms-radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-image: radial-gradient(50% 50%, circle cover, #2213ab, #000029 33%);
background-repeat: no-repeat;
background-attachment: fixed;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved