Need to assemble the following features in one html file using CSS [Archive]

View Full Version : Need to assemble the following features in one html file using CSS

arn

06-13-2005, 04:37 PM

Hi,

I’m desperately looking for some help. I’ve done all my best but been not able to assemble the following features in one html file using CSS!

a) I want to have a background image stretched to fit the browser window (width:100%;height100%) that I’m able to do …. But
b) At the same time want to show random images on refresh (all stretched to fit) – have a java script for this but can’t integrate it with the top CSS feature
c) To make things further complicated, I want to set the transparency of the contents div (on top of background image div) to 50% … I’m able to do this but it also make the text transparent!!! I’ve checked a tutorial (http://www.domedia.org/oveklykken/css-transparency.php) to overcome this situation but the problem is if I play around with the div position (absolution/relative) I can’t place the contents div on top (and centrally aligned) on the background layer!!!

Here is the structure

Bg image div stretched to fit the browser window
Contents div centrally aligned on top of the bg image div but transparent
Text/table div for all the copy and flash

I hope it makes sense what am saying and would really appreciate if any one could help me :(

Gibberish

06-13-2005, 05:56 PM

Try using a more descriptive title. Most people ignore posts that say Urgent, Immediate, or any of those demanding type words.

Also can't help anything without seeing some code to help debug.

arn

06-13-2005, 06:51 PM

Try using a more descriptive title. Most people ignore posts that say Urgent, Immediate, or any of those demanding type words.

Also can't help anything without seeing some code to help debug.

Gibberish:

Here is the code
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div id="container"><img src="background.jpg" width="100%" height="100%"></div>
<div id="contents">
<table width="850" border="0" cellpadding="10" cellspacing="0">
<tr valign="top">
<td width="100%" colspan="2" valign="bottom"><span class="title01 style1"><strong>Heading</strong></span></td>
</tr>
<tr>
<td colspan="2">Copy .... </td>
</tr>
<tr>
<td colspan="2"><strong><span class="caps">Footer</span></strong>
<noscript> </noscript> </td>
</tr>
</table>
</div>
</body>
</html>
You can use any background image to see the effect.

LJK

06-27-2005, 06:06 AM

Hi -
In this case, an image mock-up of what you're trying to do might be more helpful...I was confused why the 'container' div closes before the next begins - usually a container holds the content/isn't closed until after the last element.

The only thing I can think of offhand would require you to setup the js as a large, container div - not using the css but the script to change the content of the div. Place a second div within it and use all of the opacity filter methods you can to get it a transparent white. [Set the width and height and margins, etc. so that it sits properly with the bkgnd. div.]

Within this second, smaller div try making a paragraph but with 100% opacity and see if it'll show up! Of course, it won't resize to fit the browser unless you set the width to be % instead of px.

Good luck,
El