The HTML code
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="hidden">Hello World</h1>
</body>
</html>
The CSS code
.shown {
display: hidden;
}
When this code is run the heading is still displayed. Why is this happening. I thought the display value of hidden would hid the element from the normal flow of the page.
hidden is not a valid value for display, you are after none. Also, your class name is incorrect, it should be .hidden
.hidden{
display: none;
}
Also, there is another property called visibility that also hides content with visibility: hidden. The difference is display makes it appear as the element has been removed completely from the page, whereas visibility makes the content disappear, but the space the element occupies is still respected.
Actually you have messed up the values of two different CSS attributes i.e. visibility and display.
display
.class_name
{
display:none;
}
Setting the display as none causes the object not to be visible and along with that the space required by the object is not alloted i.e. the invisible object doesn't occupy any space.
visibility
.class_name
{
visibility:hidden;
}
Setting the visibility as hidden causes the object not to be visible but the space required by the object is alloted i.e. it occupies the space it requires although it's not visible.
Reference
you have wrong class try this
<h1 class="shown">Hello World</h1>
and css
.shown {
display: none;
}
Use
.hidden{
display: none;
}
Use
.shown {
display: none;
}
or
.shown {
visibility: hidden;
}
First of all your css tag name is mismatching to your HTML code. And your CSS is wrong as well.
You could either write display: none or visibility: hidden.
Related
I think my classes or ID's are messed up when I try to call it.
CSS:
image#ply : hover .ply-text {
visibility: visible;
}
HTML:
<image id="ply" style="height: 50px; padding:5px;" src="images.png">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Some issues first:
The HTML element for embedding images is called img.
An img element's content model is empty, i.e. it may not have any child elements.
Even if those were not issues, you would not see the effect you're looking for since the text is already visible at the start.
Given that, here's a possible solution:
.ply-text {
visibility: hidden;
}
#ply:hover ~ .ply-text {
visibility: visible;
}
The ~ is a sibling selector that allows one to refer to an element following another.
Images use an <img> tag (not 'image') - that's important to note (as it hasn't been commented on so far). As remarked, you should remove the space between the id and the :hover in your css.
I would advise you remove the inline style and use css or at least add it into your id style/ add extra attributes as a class in the head of the body (css is better!).
In the style, you don't need image/img before the definition of your id, you can just leave #ply{your style} on it's own.
If you want to display the pic on hover, I would use display:block/none instead. Visibility just shows it if it's hidden. (I've done so in the snippet, run and see if it's the desired effect). Also, use an alt tag! I added one. If you want to show/hide the text you could use either but first you have to set the visibility to hidden or display to none... I added a class for ply-text on its own for this.
So your code would read
#ply {
height: 50px;
padding: 5px;
}
.ply-text{
display:none; /* or visibility:hidden*/
}
#ply:hover +.ply-text{
display:block; /* or visibility:visible*/
}
<img id="ply" src="images.png" alt="plyimage">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Hope this helps
I got some code here:
<html>
<head>
<title>Select View</title>
</head>
<body class="class-1 class-2 class-3 class-4 class-5 class-6">
Many divs here
...
...
...
<div id="test">
<p>PHP code here</p>
</div>
</body>
</html>
And I want to hide the div with the test id. My site is based on wordpress, so in css I have to refer to a specific body.
I tried:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
color: red;
}
and the color is working, "PHP code here" is on red color, but when i do this:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
all site dissapears.
Any ideas how to hide only this div?
Just use what you have already
div#test{
display: none;
}
When you called body.class-1, .class-2, .class-3, .class-4, .class-5, and set display: none, it is the expected behaviour, because you are hiding all elements rather than just the test div!
Since you don't repeat the id in other elements you can just use,
#test {
display: none;
}
Just in-case if you have another element (ex: span) with the same id you have to specifically mention that you need to hide the div element with id=test
div#test {
display: none;
}
It is always a good thing to uniquely mark your elements if possible. Since you are dealing with classes if you just mention one class it will select the matching element.
In the below case you used your selection is the whole body,
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
This might be the same case if you just use the below code,
.class-1 {
display: none; //class-1 supposed to pick the whole body here;
}
I'd like to make all div tags invisible except for the one I mark active in html. Below is an extract from my page:
<div id="container">
<div id="1">
invisible
<div>invisible</div>
<div>invisible</div>
</div>
<div id="2" class="active">
visible
<div>visible</div>
<div>visible</div>
</div>
..or via javascript dom:
document.getElementById("2").classList.add('active');
The expected behavior is that just changing the class will render all "active" classes visible and all unmarked classes invisible at all times.
My first attempt, before adding the parent container and selecting with it,
<style type="text/css">
div { display:none; }
div.active { display:block; }
</style>
did not work. It made all divs invisible.
This second attempt, accurately selecting what I really wanted to select, works fine:
<style type="text/css">
div#container>div.active { display:none; }
div#container>div { display:block; }
</style>
Is this the right way to override a default style?
You can use the :not(selector) selector. Reference: w3schools.
Just add to every div yourChoice + active classes and when you want them to disappear, remove the yourChoice class. Then with the :not(.active) { display: none } they are all gone.
Here's a codepen https://codepen.io/sebaLinares/pen/EddNbQ
Hope it's useful
I try to write some css code. Unfortunately I can't change the html code
, only the style part. In my project I have the style in a css file.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<style>
h1.my_class {
visibility: visible !important;
}
</style>
</head>
<body>
<h1 class="my_class" hidden>This is a heading</h1>
</body>
</html>
Can I override the "hidden" that's written in the html code with my css code. What is already written doesn't change anything.
Use display:block instead of visibility. Please see the below code
h1.my_class {
display:block;
}
<h1 class="my_class" hidden>This is a heading</h1>
h1.my_class {
display: inline;
}
Try this instead of what you've written, it should work.
I wonder why the element is hidden in HTML if it's supposed to be shown with CSS anyway? Of course the HTML markup might be something that comes from another source and you have no control over it.
So if you just change you're CSS to this:
h1.my_class {
display: block;
}
That would do it, no need to use !important here either. Here's a fiddle if you want to experiment with it: https://jsfiddle.net/27q7d157/
Well I tried your ideas. I can use
display: block
or
display: inline
but I must use
visibility: visible
too.
For just a text or image just the "display" is good. But for more like a hidden span inside a hidden div I have to use also
visibility:visible
I have a DIV element which is hidden by default. But on hover, I want it to be visible.
This is my current CSS:
.main-menu .left-footer{
display: none;
}
.main-menu:hover + .left-footer {
display: block !important;
}
And HTML:
<div class="left-footer">
<small>
Support Terms of Service Privacy <br />
© 2015 LittleBux. All Rights Reserved
</small>
</div>
What am I doing wrong here?
I am taking example from this topic
They're using conflicting selectors. In the first, .left-footer is a child of .main-menu. In the second example, it's a sibling.
As you haven't posted the bit of code with .main-menu I'm not sure about it's relationship to .left-footer, but you need to make the two rules consistent.
Seems to me like you're getting display and visibility mixed up. display: none; makes the element disappear from the document, meaning you can't interact with it. What you want to use instead is visibility: hidden;, which makes the element hidden but still keep its place on the page. Try changing the first block of code to the following:
.main-menu .left-footer{
visibility: hidden;
}
.main-menu:hover + .left-footer {
visibility: visible;
}