I am trying to remove a division but I am not able to remove the <div> tag. So I wanted to know if I can hide a division by adding some css codes on the page. The division I am trying to hide is <div id="views" class="menu">.... </div>
Any help?
Add the following CSS to your page or CSS file:
div#views { display:none; }
If you require the div to still occupy the space on the page, use the following instead:
div#views { visibility:hidden; }
Try
#views
{
display: none;
}
in your css
Related
This is my Div Class, I have included the entire code below. I need to hide this on Wordpress on my site. How do I go about it?
I tried .
section_wrapper clearfix {
display : none;
}
In Custom CSS but does not work. How do I hide this?
<div class="section_wrapper clearfix">
Example Code Below:
<div class="section_wrapper clearfix">
<!-- additional HTML content -->
</div>
since section_wrapper and clearfix are classes so to give them styling you have to include .(dot) before them and you have to use only one among 2 of them.
for example
.section_wrapper{
display:none;
}
If you write like this
.section_wrapper .clearfix{
display:none;
}
It means you are giving styling to the element having class clearfix which is under the element having class section_wrapper
You need to target them as classes in CSS (i.e. with .s in front of the class names). Also, since the classes are from the same element, you need to get rid of the space between the class names:
.section_wrapper.clearfix {
display: none;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've tried using
#div{
display: hide;
}
but its not working.
simple 'display:none' is the easiest way.
If you are showing and hiding dynamically, you can set a hidden class and use it like with jquery:
HTML
<div id="mydiv" class="hidden"></div>
CSS
.hidden
{
display: none;
}
jQuery
$(function () {
$('#mydiv').removeClass('hidden');
});
Try display:none
#div{
display:none;
}
Use:
div {
visibility: hidden;
}
This will more or less make the element invisible, but it will still take up space.
Or use:
div {
display: none;
}
This will remove the element and the space it takes off the page completely.
Check for the selector while applying css property to it.
If your 'div' is a tag name like
<div>Your content </div>
You need to use
div { // just the tag name
display : none;
}
else,
if it is the id of html element like
<p id="div">Your content</p>
//or
<div id="div"><Your content</div>
You should use
#div { //'id' with '#' before
display : none;
}
#CMadi is right but a good way of doing this is to create the following css class:
.hidden {
display:none;
}
Now you can re-use class on as many divs as you want to hide by applying it to said div.
<div id="myDivId" class="hidden"></div>
This is also great if you want to dynamically make it invisible using javaScript in the following way.
var element = document.getElementById("myDivId");
element.classList.add("hidden");
Were you using jQuery you could hide an element with the following line of code.
$("#myDivId").addClass("hide");
And make it visible again with the following:
$("#myDivId").removeClass("hide");
I might not be explaining this too well, but I'm trying to apply the alternating div:nth class to just the indicated div (al-articles), but its getting applied to each child div inside <div class="al-articles"> - any pure css solution? This is for a WP category archive page and I want the post excerpts to have alternating background colors.
Below is the css I'm using
.al-articles {
Padding:0;
}
.al-articles div:nth-child(odd) {
background:#cccac6;
}
.al-articles div:nth-child(even) {
background:#f0eeec;
}
Thanks in advance
This is happening because you're telling the CSS to apply those styles to ALL divs that are children of .al-articles, not the .al-articles div itself.
Try this:
.al-articles:nth-child(odd) {
background:#cccac6;
}
.al-articles:nth-child(even) {
background:#f0eeec;
}
Just give an id to the main div
eg
<div id="main">
Content goes here!!!
</div>
and put inside it whatever you want.
Then to style it:
#main{
style goes here
}
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
Is it possible to make a div invisible without commenting it out? If so, how?
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>
More Information :)
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>
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.
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.
position: absolute;
left: -99999px; /* big number */
will make the content accessible to most screen readers but will render the element off-screen.
May be, its not the required solution, but you can tackle this kind of issues by these little tricks.
You can use jQuery to achieve the solution.
If you want to totally hide/show the div, then you can use:
$('#my_element').show()
$('#my_element').hide()
Or if you want that your div become invisible and its still existing in the page, then you can use efficient trick:
$('#my_element').css('opacity', '0.0'); // invisible Maximum
$('#my_element').css('opacity', '1.0'); // visible maximum