homepage Welcome to WebmasterWorld Guest from 54.197.19.35
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
how to display a child without the rest of the list showing
Wayder




msg:4595851
 8:53 pm on Jul 23, 2013 (gmt 0)

Hi,

Iím trying to display a child without the rest of the list showing. I donít think I ďget itĒ, any solutions please?


#list{
display:none;
}
#list li #show1{
display:block;
}

<ul id="list">
<li>one
<ul id="show1">
<li>show1 one</li>
<li>show1 two</li>
<li>show1 three</li>
</ul>
</li>
<li>two
<ul id="show2">
<li>show2 one</li>
<li>show2 two</li>
<li>show2 three</li>
</ul>
</li>
</ul>

 

DrDoc




msg:4595855
 9:04 pm on Jul 23, 2013 (gmt 0)

Ah! I ran into similar problems in my CSS infancy, so I understand why it may not make sense currently. Unfortunately, what you are trying to do cannot be done (as written).

First -- let me explain how the
display property works. Each element is like a cardboard box. You are asking for the outer box (#list) to be closed, but an inner box (#show1) to be open. The browser actually does exactly what you ask it to do, but since the outer box is closed, you still cannot see the contents of the inner open box.

Now, there are certainly ways around this -- or, rather -- there are ways to visually achieve what you are trying to do, but the path there is a bit more round-about. Before going there, however -- I assume this is for a menu or something? Are you setting the
display property dynamically (using JavaScript) or is it hard coded in the stylesheet?
lucy24




msg:4595882
 10:30 pm on Jul 23, 2013 (gmt 0)

I happened to be reading this bit of the CSS spec just a few days ago, so let me give the Horse's Mouth version.

http://www.w3.org/TR/CSS2/visuren.html#propdef-display (auto-linking intentionally disabled)

emphasis mine:
none
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely.
This behavior cannot be overridden by setting the 'display' property on the descendants.


That's the 2.1 wording; 3 is almost identical.

Paul_o_b




msg:4596038
 11:15 am on Jul 24, 2013 (gmt 0)

This is unlikely to be what you need but you can do what you ask using 'visibility' instead of display and unlike display:none you can reveal children even if the parent is hidden.

e.g.

#list { visibility:hidden; }
#list li #show1 { visibility:visible; }

Of course visibility does not remove the element from the flow but just makes it invisible which often is not much use. You can use it in combination with absolute positioning to remove it from the flow but however (as mentioned above) it looks like you are trying to make a dropdown menu and there are better ways to do this.

Wayder




msg:4596151
 5:53 pm on Jul 24, 2013 (gmt 0)

Thanks for the replies.

Thatís an excellent analogy DrDoc and really helps my understanding. Thank you.

This is a menu. The css is hard coded and already set up for the desktop version. I am trying to code for small mobile devices (480px) without making too many changes in the html. This is mainly because I donít want to recode the whole site from scratch because a lot of the html is php generated.

Actually, visibility:hidden; may be what I need because I already plan to absolutely position the child element, unless I get other suggestions of course.

Any additional help/suggestions would be appreciated.

Thank you

DrDoc




msg:4596174
 6:34 pm on Jul 24, 2013 (gmt 0)

visibility: hidden is a perfectly viable option, and appears to also be the best option in this case.

Your other options would involve heavy scripting to hide/show surrounding elements, or to traverse the tree to figure out what should be hidden/visible.

If it works and does what you need it to do,
visibility: hidden is by far the cleanest and easiest to read solution I would be able to think of.
Wayder




msg:4596180
 7:07 pm on Jul 24, 2013 (gmt 0)

Thank you all, that is exactly what I was looking for. I have hidden the whole menu, made it height:0; so it takes up no space and made the child visible when targeted.

#list{
visibility:hidden;
height:0;
}
#show1:target{
visibility:visible;
/*Position, colour and size as required;*/
}
#show2:target{
visibility:visible;
/*Position, colour and size as required;*/
}

<ul id="list">
<li>one
<ul id="show1">
<li>show1 one</li>
<li>show1 two</li>
<li>show1 three</li>
</ul>
</li>
<li>two
<ul id="show2">
<li>show2 one</li>
<li>show2 two</li>
<li>show2 three</li>
</ul>
</li>
</ul>

swa66




msg:4596187
 7:25 pm on Jul 24, 2013 (gmt 0)

You could do it with display:none just as well.

All you need to do is not select the parent, but select all equal level children (with a "*" in the right spot) and then use specificity to display one of them anyway.

e.g.:

#list>* {
display:none;
}
#list>#show1{
display:block;
}

<ul id="list">
<li id="show1">one
<ul>
<li>show1 one</li>
<li>show1 two</li>
<li>show1 three</li>
</ul>
</li>
<li id="show2">two
<ul>
<li>show2 one</li>
<li>show2 two</li>
<li>show2 three</li>
</ul>
</li>
</ul>

Wayder




msg:4596210
 8:40 pm on Jul 24, 2013 (gmt 0)

Hi swa66,

Thanks for your suggestion but that didn't work for me.

visibility:hidden worked the best.

Thanks

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved