eskdale
06-06-2007, 02:32 PM
Hi folks,
Been starting on a new site and want to produce a central div overlapping a slightly larger div to create a bordered edge.
Then using the opacity alpha filter to overlay this over a background photo.
Been reading Stu Nicholls site for tips, but still stuck on the div colour background and using alpha filter.
Code so far is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Flow Therapy Home Page</title>
<link href="inc/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(img/background_photo.gif);
}
-->
</style></head>
<body>
<div id="content">
<img src="img/content_top.gif" width="800" class="bck_img"/>
<div id="outer">
<div id="inner">
<h1>
This is where the text will go</h1>
</div>
</div>
<img src="img/content_btm.gif" width="801" class="bck_img" /></div>
</body>
</html>
CSS
/* CSS Document */
body {
background-image:img/background_photo.gif
}
#content {
width: 800px;
height:auto;
margin: 0px auto 0px auto;
overflow: hidden;
}
#outer {
width: 800px;
height:auto;
margin: 10px auto 10px auto;
background-color: 7ea01d;
filter:alpha (opacity=80);
-moz-opacity:.80;
opacity:.80;
width: 800px;
}
#inner {
width: 800px;
height:auto;
margin: 10px auto 10px auto;
padding-left: 10px;
padding-right: 10px;
background-color: 7ea01d;
filter:alpha (opacity=50);
-moz-opacity:.50;
opacity:.50;
}
.bck_img {
float:left;
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.70;
opacity:0.7;
The opacity is working fine on the two images I have at the top and bottom of the div, but not getting the background colour to appear. Although the filter is working on the text.
I suspect that I have to use a positioning element to get the opacity to work.
I could obviously just use a fixed image as the background and overlay a text box, but this wouldn't allow for growth (or shrinkage) of the text box at a later stage. What I want is an auto central area with the capped curved images at each end.
The images are below.
Any help much appreciated.
The first version of another site I got assistance from here is currently loaded here for those interested, thanks again for your help on that project.
http://www.shadwell-basin.org.uk/index.php
Been starting on a new site and want to produce a central div overlapping a slightly larger div to create a bordered edge.
Then using the opacity alpha filter to overlay this over a background photo.
Been reading Stu Nicholls site for tips, but still stuck on the div colour background and using alpha filter.
Code so far is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Flow Therapy Home Page</title>
<link href="inc/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(img/background_photo.gif);
}
-->
</style></head>
<body>
<div id="content">
<img src="img/content_top.gif" width="800" class="bck_img"/>
<div id="outer">
<div id="inner">
<h1>
This is where the text will go</h1>
</div>
</div>
<img src="img/content_btm.gif" width="801" class="bck_img" /></div>
</body>
</html>
CSS
/* CSS Document */
body {
background-image:img/background_photo.gif
}
#content {
width: 800px;
height:auto;
margin: 0px auto 0px auto;
overflow: hidden;
}
#outer {
width: 800px;
height:auto;
margin: 10px auto 10px auto;
background-color: 7ea01d;
filter:alpha (opacity=80);
-moz-opacity:.80;
opacity:.80;
width: 800px;
}
#inner {
width: 800px;
height:auto;
margin: 10px auto 10px auto;
padding-left: 10px;
padding-right: 10px;
background-color: 7ea01d;
filter:alpha (opacity=50);
-moz-opacity:.50;
opacity:.50;
}
.bck_img {
float:left;
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.70;
opacity:0.7;
The opacity is working fine on the two images I have at the top and bottom of the div, but not getting the background colour to appear. Although the filter is working on the text.
I suspect that I have to use a positioning element to get the opacity to work.
I could obviously just use a fixed image as the background and overlay a text box, but this wouldn't allow for growth (or shrinkage) of the text box at a later stage. What I want is an auto central area with the capped curved images at each end.
The images are below.
Any help much appreciated.
The first version of another site I got assistance from here is currently loaded here for those interested, thanks again for your help on that project.
http://www.shadwell-basin.org.uk/index.php