Is it possible to make a div invisible without commenting it out? If so, how?
+8
A:
You need to hide that with CSS:
div { /* this will hide all divs on the page */
display:none;
}
If it is a particular div with certain class or id, you can hide it like:
<div class="div_class_name">Some Content</div>
CSS:
div.div_class_name { /* this will hide div with class div_class_name */
display:none;
}
Or
<div id="div_id_name">Some Content</div>
CSS:
div#div_id_name { /* this will hide div with id div_id_name */
display:none;
}
Note: You need to wrap CSS tyles in between <style type="text/css"></style> tags, example:
<style type="text/css">
div#div_id_name {
display:none;
}
</style>
Sarfraz
2010-06-12 08:30:51
@Sarfraz: I've edited your post twice to fix your `div.div_id_name` typo, and each time you've edited over it :P... I give up :P
Matt
2010-06-12 08:37:38
@Matt: Yeah right, did not notice that in copy-paste from class example. Updated. Thanks :)
Sarfraz
2010-06-12 08:42:14
+4
A:
Its Easy. The only thing you need is, adding a style to it, like following example shows:
CSS:
<style type="text/css">
div.myInvisibleDiv {
overflow: hidden;
visibility: hidden;
height: 0;
width: 0;
}
</style>
HTML:
<div class="myInvisibleDiv"><p>My invisible content</p></div>
This div, and it content does definitely not show, and it wont disturb surrounding elements.
Nort
2010-06-12 08:33:32
+4
A:
You can do this by inline style
<div style="display:none"></div>
or by defining CSS Style like In css add
.HideableDiv{display:none;}
and in your HTML write
<div class="HideableDiv" ></div>
Taz
2010-06-12 08:49:41
A:
position: absolute;
left: -99999px; /* big number */
will make the content accessible to most screen readers but will render the element off-screen.
Adam Asham
2010-06-13 17:58:56
wouldn't the browser still have to render it thought? using "display:none" is a much better and less confusing method
NixNinja
2010-06-14 08:17:38
Why the down vote? Just because you may think it's confusing does not mean my suggestion is bad or not helpful. Actually, it's a well-known, standard method when you deal with accessibility. Depending on *why* you want to hide the information, what the information is and how high you set the bar, my suggestion actually would be preferred to display:none.
Adam Asham
2010-06-14 17:19:17
I'm sorry, I think I misunderstood the purpose of the downvote. forgive me?
NixNinja
2010-06-15 06:03:21
@Adam . Just a confusion. If we don't want it to display. Should it be available to screen readers for accessibility or something.
Taz
2010-06-16 07:01:13
A skip navigation link is perhaps not that useful to those with good eye vision but for a screen reader-user, it makes a page easier to navigate.
Adam Asham
2010-06-17 17:19:16
A:
if you want it to be essentially gone from your layout:
.element_class {
display:none;
}
if you want to just make it invisible (but still keeping it's space seemingly empty)
.element_class {
visibility: hidden;
}
and then your element (if a div) would look like this:
<div class="element_class"></div>
basically anything you add the class="element_class" to will be either invisible or completely hidden.
JSD
2010-06-13 20:53:59