Hi there bejitto101,
have a look at this example, you should be able to adapt it to suit your requirements....
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://mysite.orange.co.uk/azygous/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#box1 {
position:relative;
width:768px;
height:512px;
background-image:url(blood_ball.jpg);
background-repeat:no-repeat;
border:3px double #f00;
margin:30px auto;
}
#box2 {
position:absolute;
width:525px;
height:324px;
top:182px;
left:0;
background-color:#fff;
border:3px solid #000;
opacity:0.5;
filter:alpha(opacity=50);
}
#box3 {
position:absolute;
width:445px;
height:284px;
padding:20px 40px;
top:182px;
left:0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#fff;
}
#box3 h1 {
background-color:#ccc;
text-align:center;
border:1px solid #000;
}
#box3 p {
text-align:justify;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
<div id="box3">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div>
</div>
</body>
</html>
coothead
Reply With Quote
Bookmarks