: How to create an overlay div using CSS only (no Javascript)? I'm trying to figure out how to create a div that overlays the page, staying in one place when the page scrolls, such as used

Posted in: #Css

I'm trying to figure out how to create a div that overlays the page, staying in one place when the page scrolls, such as used in this article: Top 5 Botched PC Game Launches. (You will see a bar at the top that doesn't move, with the logo, where gamers call home).

I'm not even sure what the correct terminology is - it's probably not overlay :) But whatever it is, it appears to be done with CSS only, as it shows up when Javascript is disabled.

10.03% popularity Vote Up Vote Down

: It depends on how you remove them. If you use a smart library, like jsoup or tagsoup or neko, you get nothing but benefit. If you use a bad library, it can lose your content for you.

@Miguel251

0 Comments

: Multi Language URLs I'm building an online store that will be supported in 3 languages: English, Traditional Chinese, and Simplified Chinese. My question is whether or not it is a good idea

@Miguel251

Posted in: #Multilingual #Seo #Url

0 Comments

: A pastebin is a web application which allows its users to upload snippets of text, usually samples of source code, for public viewing. You can pick one from this list of pastebin apps that

@Miguel251

0 Comments

: WHOIS service doesn't follow any standard. I know it very well because I'm the maintainer of the Ruby Whois library. The goal of the library is to provide a OOP way to parse and get Whois

@Miguel251

0 Comments

Login to post a comment!

3 Comments

Sorted by latest first Latest Oldest Best

@Heady270

CSS Code

.picColor{
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000 ;
}
.picColor:hover
{
opacity:0.9;
background:#FFFFFF;
width:320px;
height:240px;
}

Full Source...CSS Overlay

Justin

10% popularity Vote Up Vote Down

@Sue5673885

Little word of warning. If for some reason (I'm hoping IE6 gets fully deprecated) you have a real need to support IE6, that browser does not support position:fixed. You might want to use the "_" css property hack to just make it position absolute ( _position:absolute; ) for the case of IE6. Some other properties tweaking might be needed to look similar to non IE6 versions, and to behave in a way that at least is ok to go.

10% popularity Vote Up Vote Down

@XinRu657

#status -bar {
width: 100%;
height: 36px;
position: fixed;
top: 19px;
left: 0;
z-index: 2147483646;
-moz-box-shadow: 0px 0px 3px #8a8a8a ;
-webkit-box-shadow: 0px 0px 3px #8a8a8a ;
box-shadow: 0px 0px 3px #8a8a8a;
background: transparent url("/images/Elements/status-bar/status-bar-bg.png") repeat-x;
}

Page source.

Related reading: CSS Positioning 101 at A List Apart

10% popularity Vote Up Vote Down

Feed

: How to create an overlay div using CSS only (no Javascript)? I'm trying to figure out how to create a div that overlays the page, staying in one place when the page scrolls, such as used

More posts by @Miguel251

: It depends on how you remove them. If you use a smart library, like jsoup or tagsoup or neko, you get nothing but benefit. If you use a bad library, it can lose your content for you.

: Multi Language URLs I'm building an online store that will be supported in 3 languages: English, Traditional Chinese, and Simplified Chinese. My question is whether or not it is a good idea

: A pastebin is a web application which allows its users to upload snippets of text, usually samples of source code, for public viewing. You can pick one from this list of pastebin apps that

: WHOIS service doesn't follow any standard. I know it very well because I'm the maintainer of the Ruby Whois library. The goal of the library is to provide a OOP way to parse and get Whois

Login to post a comment!

3 Comments

Back to top | Use Dark Theme