child div blocks parent div, height problem...

[HJ]

Hi, I am pretty new in CSS. What I want to do is to have a child div to
cover the parent div, so all the text links (actually anything) in the
parent div are NOT clickable. Basically, the child div needs to have
the same width and height as the parent div.

The following is some sample code:
//*************************************************************
<STYLE type="text/css">
.front {
width:100%;
height:100%;
border:2px solid #00C;
background-color:#C0C0C0;
position:absolute;
</STYLE>

<DIV>
<div class="front"></div>
Some text...
<p><a href="http://www.yahoo.com">Yahoo</a></p>
Some more text...
</DIV>
//*************************************************************
The problem with the code is that, the parent div does not have a
height. So the child div doesn't have a height value to cover the whole
parent div.

The problem I am facing now is that the height of the parent div is
dynamic. The content in the parent div is generated dynamically in for
loop. So I can't define a height for the parent div in the code.

If there is any work around in this, please help me out here...
Thanks a lot.
HJ

 

[Adrienne Boswell]

HJ wote:

Hi, I am pretty new in CSS. What I want to do is to have a child div to
cover the parent div, so all the text links (actually anything) in the
parent div are NOT clickable. Basically, the child div needs to have
the same width and height as the parent div.

The following is some sample code:
//*************************************************************
<STYLE type="text/css">
.front {
width:100%;
height:100%;
border:2px solid #00C;
background-color:#C0C0C0;
position:absolute;
</STYLE>

<DIV>
<div class="front"></div>
Some text...
<p><a href="http://www.yahoo.com">Yahoo</a></p>
Some more text...
</DIV>
//*************************************************************
The problem with the code is that, the parent div does not have a
height. So the child div doesn't have a height value to cover the whole
parent div.

The problem I am facing now is that the height of the parent div is
dynamic. The content in the parent div is generated dynamically in for
loop. So I can't define a height for the parent div in the code.

If there is any work around in this, please help me out here...
Thanks a lot.
HJ

1. Do you have a URL? It might be easier that way.
2. I don't quite understand why you need to cover the parent. Why
bother? If you don't want something to be clickable, don't make it a
href, and then you won't have to worry about it. It would be confusing
and frustrating for the user, who _thinks_ something is a link, and
can't click on it. Links want to be links.

 

[HJ]

Thanks for the reply. The idea is to have a html file that can be used
by 2 kinds of users. One can only see the block, one can actually click
on the links.

So for the first kind of user, I want to have a transparent image to
cover the html block.

The following is the code I got now.
//*******************************************************

<style type="text/css">
#inner{
background-image: url("../images2/misc/clear.gif");
z-index: 1;
width:100px;
border:1px solid #ddd;
}

#inner2{
z-index: -1;
position:relative;
width:400px;
}
</style>


<DIV>
<div id="inner">
<div id="inner2">
<p>Left Content goes here</p>
<p>Left Content goes here</p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p>Left Content goes here</p>
<p>Left Content goes here</p>

</div>
</div>
</DIV>
//*******************************************************

clear.gif is the transparent image. Now the image is growing as the
content grows. So the whole problem is solved.

However, this only work in IE, Firefox ignores the Z-index, because in
inner2 the z-index is -1. In Firefox the whole black is just a big
white space. After change the z-index to become 2 and 1, the content
shows up, but it doesn't appear to follow the order. inner2 show on top
of inner.

So any solutions...

Thank you so much.
HJ

 

[Jonathan N. Little]

Thanks for the reply. The idea is to have a html file that can be used
by 2 kinds of users. One can only see the block, one can actually click
on the links.

So for the first kind of user, I want to have a transparent image to
cover the html block.

The following is the code I got now.
//*******************************************************

<style type="text/css">
#inner{
background-image: url("../images2/misc/clear.gif");
z-index: 1;
width:100px;
border:1px solid #ddd;
}

#inner2{
z-index: -1;
position:relative;
width:400px;
}
</style>


<DIV>
<div id="inner">
<div id="inner2">
<p>Left Content goes here</p>
<p>Left Content goes here</p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p>Left Content goes here</p>
<p>Left Content goes here</p>

</div>
</div>
</DIV>
//*******************************************************

clear.gif is the transparent image. Now the image is growing as the
content grows. So the whole problem is solved.

However, this only work in IE, Firefox ignores the Z-index, because in
inner2 the z-index is -1. In Firefox the whole black is just a big
white space. After change the z-index to become 2 and 1, the content
shows up, but it doesn't appear to follow the order. inner2 show on top
of inner.

So any solutions...

Yeah! Far better to dynamically generate the page with server-side
script of your choice and for one create the links other just plain text.

<?php
if($visitor=='privileged'){
include_once("listOfLinks.php");
}
else {
include_once("plainTextList.php");
}
?>

This will *always* work in all browsers.

 

[HJ]

Thanks for the reply. If we use two different php files for the
condition, then the problem should be solved.

However, this issue involves a lot of html files and for each file we
have to create another one with exact content but all the link
disabled.

We decided not to go that way...So the problem remains...

Any help?

Thanks a lot for the replies earlier!

HJ

 

[Jonathan N. Little]

Thanks for the reply. If we use two different php files for the
condition, then the problem should be solved.

However, this issue involves a lot of html files and for each file we
have to create another one with exact content but all the link
disabled.

We decided not to go that way...So the problem remains...

Any help?

Thanks a lot for the replies earlier!

Okay, no problem instead of having the links file a HTML pull from a TSV
(Tab Separated Values) text file or other database source

*HREF TEXT
aboutus.php About Us
produces.php Our Produce Line
....

Then use...

<?php
if($visitor=='privileged'){
insertMyLinks("theLinksData.txt");
}
else {
insertMyList("theLinksData.txt");
}
?>

....where function 'insertMyLinks' makes a list of links from the two
fields in the file 'theLinksData.txt' or the function 'insertMyList'
just uses the first field to make the plain text list. Only one data
source to maintain.

Simple! Make the program for for you....