Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > child div blocks parent div, height problem...

Reply
Thread Tools

child div blocks parent div, height problem...

 
 
HJ
Guest
Posts: n/a
 
      08-28-2006
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

 
Reply With Quote
 
 
 
 
Adrienne Boswell
Guest
Posts: n/a
 
      08-28-2006

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.

--
Adrienne Boswell at work
Administrator nextBlock.com
http://atlas.nextblock.com/files/
Please respond to the group so others can share

 
Reply With Quote
 
 
 
 
HJ
Guest
Posts: n/a
 
      08-29-2006
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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      08-29-2006
HJ wrote:
> 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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
HJ
Guest
Posts: n/a
 
      09-01-2006
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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-01-2006
HJ wrote:
> 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....


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Div Height = Image height. help muggslab HTML 1 02-01-2010 07:41 PM
If a class Child inherits from Parent, how to implementChild.some_method if Parent.some_method() returns Parent instance ? metal Python 8 10-30-2009 10:31 AM
procs/blocks - blocks with procs, blocks with blocks? matt Ruby 1 08-06-2004 01:33 AM
Pass from parent to child, then update parent with child value... Noel Dolan Javascript 0 07-18-2004 05:52 PM



Advertisments