CODEWITHSUNDEEP
css
Felix Alcala
Felix Alcala

Reputation: 2935

CSS: Showing only a relevant subset of a DIV

I need to style some HTML-Markup I have no direct control of and am trying to show just a relevant subset of a div, while hiding everything else.

The div to style

<div id="spam_and_ham_mix">
    Irrelevant, looooooooong text (--> should be hidden)
    <div id="ham">Important stuff (--> should be visible)</div>
</div>

The desired result

I want that only the "important stuff" to show up, while hiding everything else.

1st attempt 

#spam_and_ham_mix { display:none; }  /* CSS-Weight 100 */
#spam_and_ham_mix #ham { display:block; }  /* CSS-Weight 200 */

Result: the div remains completely hidden, showing nothing at all.

2nd attempt 

#spam_and_ham_mix { visibility:hidden; }  /* CSS-Weight 100 */
#spam_and_ham_mix #ham { visibility:visible; }  /* CSS-Weight 200 */

Result: The irrelevant text is invisible, but it still takes the same space as if it were visible (which is in line with the CSS-specification but not the desired result):

Question

What can I do about it?

I am looking for a CSS-only solution (if possible).

Upvotes: 1

Views: 294

Answers (3)

Jared Farrish
Jared Farrish

Reputation: 49238

NOTE - This answer is intended for situations that exist that are not expected to impact search engine optimization (SEO). In other words, print stylesheets and sites/pages where the content is not meant to be crawled by search engines. Doing what's below in those situations may cause a search engine to determine the site is manipulating content, thus possibly negatively affecting search placement or resulting in a ban of some sort. I do not have any evidence this is the case, but be careful if this is your situation.

This seems to work in all the browsers I tested (FF13, Chrome, Opera 12, IE7-9):

#spam_and_ham_mix {
    font-size: 0; 
}
#ham {
    font-size: 15px; 
}

http://jsfiddle.net/userdude/kqUUN/

Feels "hacky" (and not as in "-sacky"), but so do negative margins.

Note as well, you have to be careful with specificity:

#spam_and_ham_mix,
#spam_and_ham_mix .ham {
    font-size: 0;
}
.ham {
    font-size: 15px;
}

http://jsfiddle.net/userdude/kqUUN/1/

.ham as the lone selector will be overridden by the more "specific" selector, ie, other one.

Upvotes: 3

Joonas
Joonas

Reputation: 7305

Since you mentioned images and such, perhaps approach like this could work for you:

http://jsfiddle.net/lollero/nYFWw/

CSS:

#spam_and_ham_mix { 
    visibility: hidden;
    height: 0px;
    position: relative;
    overflow: visible;
}
#spam_and_ham_mix #ham { 
    visibility: visible;
    position: absolute;
    top: 0px;
    left: 0px;
}​

HTML ( same as yours ):

<div id="spam_and_ham_mix">
    Irrelevant, looooooooong text (--> should be hidden)
    <div id="ham">Important stuff (--> should be visible)</div>
</div>

You could set #spam_and_ham_mix { width: 0px; } but then you'd most likely want to give #spam_and_ham_mix #ham a width.

Upvotes: 2

Vexter
Vexter

Reputation: 1172

Here you go: http://jsfiddle.net/kqUUN/12/

The only problem there is, you'll have to set the height of the #spam_and_ham_mix manually to whatever you want. Hope this helps.

Upvotes: 1

Related Questions