-4

How do you make a bar like this?

GeorgePotter
  • 889
  • 1
  • 10
  • 18
Will
  • 1
  • 1
  • 1

2 Answers2

4

Here's a good start:

<div style="position: fixed; bottom: 0; background-color: #ccc;">Hello</div>
Jeremy
  • 22,188
  • 4
  • 68
  • 81
  • Thats helpful but i know how to make one like that i want one just like that with the onmouseover transperency and such. – Will Feb 04 '11 at 01:38
  • Transparency is kind of tricky, and is handled differently in various browsers. See this article: http://css-tricks.com/css-transparency-settings-for-all-broswers/ – bbosak Feb 04 '11 at 01:43
  • 1
    @Will - Then maybe update your question with detail? – Jeremy Feb 04 '11 at 01:51
1

This is an example of what you would start with if you added the first answer with the link in the comment.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Hello!</title>
</head>

<style>
#TransparentDiv{
    position:fixed;
    bottom:0;
    background: #ccc;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

#TransparentDiv:hover{
   filter:alpha(opacity=100);
   -moz-opacity:1;
   -khtml-opacity: 1;
   opacity: 1;
}
</style>

<body>

<div id="TransparentDiv">Hello World - Some more text to make this easier to read.</div>

</body>

</html>
Robert
  • 400
  • 8
  • 23