child div blocks parent div, height problem...

Discussion in 'HTML' started by HJ, Aug 28, 2006.

  1. HJ

    HJ Guest

    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
    HJ, Aug 28, 2006
    #1
    1. Advertising

  2. 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
    Adrienne Boswell, Aug 28, 2006
    #2
    1. Advertising

  3. HJ

    HJ Guest

    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
    HJ, Aug 29, 2006
    #3
  4. 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
    Jonathan N. Little, Aug 29, 2006
    #4
  5. HJ

    HJ Guest

    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! :D

    HJ
    HJ, Sep 1, 2006
    #5
  6. 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! :D


    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
    Jonathan N. Little, Sep 1, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. davout
    Replies:
    0
    Views:
    539
    davout
    Apr 18, 2004
  2. Jeff Rodriguez
    Replies:
    23
    Views:
    1,078
    David Schwartz
    Dec 9, 2003
  3. matt
    Replies:
    1
    Views:
    238
    George Ogata
    Aug 6, 2004
  4. Noel Dolan
    Replies:
    0
    Views:
    214
    Noel Dolan
    Jul 18, 2004
  5. Bitswapper
    Replies:
    5
    Views:
    116
    Prasad, Ramit
    Aug 27, 2013
Loading...

Share This Page