I would like to hide this:
https://i.imgur.com/nStKvPS.jpg
What should I add in custom CSS?
In your css file:
#banner-694641362 {
display: none;
}
Tip: You also can use opacity: 0; or visibility: hidden;.
display: hidden makes an element invisible, but it still affects the rendering of surrounding elements. display: none removes the element from the document flow, so it doesn't affect other elements' rendering.
display: none;
That will stop it from being shown
Related
How can I make a link that appears when the mouse is over the main area like a youtube comment.
I have this code - but when the mouse is over the .showme class it's not visible like the showhim element.
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
Maybe you want the inner div to be in the flow of the outer. In that case use
.showhim:hover .showme{
display : inline-block;
}
Or, if you want to display the inner div on :hover for the inner div too, use
showme{
visibility: hidden;
}
.showhim:hover .showme{
visibility: visible;
}
Just one thing: Maybe you tested with IE 6. The dirty one from Redmond doesn't know :hover on elements other than <a/>. He doesn't know display: inline-block either by the way.
Is it possible to use the :not() selector/pseudo thing with :after?
So for example if I have the following:
li:hover > ul
{
display: block;
}
li:after
{
content: " ";
width: 200px;
height: 200px;
background: #cccccc;
position: absolute;
top: -100px;
left: -100px;
}
What happens is that if a person HOVERS over the content that is created by the after it will also make the child menu display block. In other words hovering other the LI or the AFTER content is acknowledged as hovering the LI. How would I stop this, so it only does the display block when hovering the ACTUAL LI and NOT the content created using AFTER.
I thought about: li:hover:not(:after) > ul { display: none; } but hasn't worked...
Also tried: li:after:hover > ul but also didn't work.
Any ideas for this? It might seem trivial but it's causes some issues in my design so need to stop it doing it asap.
As you observe, :hover styles on an element will be triggered when hovering over its contents, including descendants and pseudo-elements. However, you can't prevent :hover styles on an element from applying to its :after pseudo-element, nor can you use :not() to select :after pseudo-elements (this is explicitly disallowed by the spec).
This is by design, so the only way around it is to not use :after, but use JavaScript to generate some other element that you can append to the li and cancel the :hover effect on.
Actualiy it is possible with the use of the attribute "pointer-events" and assign it to none in the pseudo-element :after or :before .
So it would be -> pointer-events: none; in the pseudo-element.
I have the following code
a.rollover {
background-image: url('sprite.jpg');
display: block;
width: 191px;
height: 143px;
}
However it only appears if I include the property display and set it to block. If I remove it, it does not appear. Why is that?
<a> are display:inline by default, and width/height aren't applied to inline elements. You can use display:inline-block to allow for sizing and still keep it inline.
I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:
h3 {
background-color: #333;
color: white;
display: inline-block;
}
This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?
Assume I can use CSS3.
try this:
h3:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
display:block;
width:auto;
This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.
How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?
h3 ~ * { display: block }
The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.
I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.
Assuming this is your h3 styling,
h3 {
display: inline-block;
}
Then just wrap it in a div.
<div>
<h3>My heading</h3>
</div>
I've had to do something similar with inline nav items that need breaking at certain points. Does this work?
h3:after {
content: "\A ";
line-height: 0;
white-space: pre;
display:inline-block;
}
I seem to remember IE7 having an issue with it.
If you don't need to center h3, this may help:
h3 {
background-color: #333;
color: white;
display: inline-block;
float: left;
clear: left;
}
Total noob question, but here.
CSS
.product__specfield_8_arrow {
/*background-image:url(../../upload/orng_bg_arrow.png);
background-repeat:no-repeat;*/
background-color:#fc0;
width:50px !important;
height:33px !important;
border: 1px solid #dddddd;
border-left:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-left-radius:0px;
margin:0;
padding:2px;
cursor:pointer;
}
HTML
<span class="product__specfield_8_arrow"> </span>
Fiddle
Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not.
Thanks.
Span is an inline element. It has no width or height.
You could turn it into a block-level element, then it will accept your dimension directives.
span.product__specfield_8_arrow
{
display: inline-block; /* or block */
}
Try using a div instead of the span or using the CSS display: block; or display: inline-block;—span is by default an inline element which cannot take width and height properties.
Inspired from #Hamed, I added the following and it worked for me:
display: inline-block; overflow: hidden;
Span takes width and height only when we make it block element.
span {display:block;}
As per comment from #Paul, If display: block is specified, span stops to be an inline element and an element after it appears on next line.
I came here to find solution to my span height problem and I got a solution of my own
Adding overflow:hidden; and keeing it inline will solve the problem just tested in IE8 Quirks mode
spans are by default displayed inline, which means they don't have a height and width.
Try adding a display: block to your span.
Span starts out as an inline element. You can change its display attribute to block, for instance, and its height/width attributes will start to take effect.
Use this all problem solve way
Try it..
span.product__specfield_8_arrow
{
display: inline-block;
}
span {display:block;} also adds a line-break.
To avoid that, use span {display:inline-block;} and then you can add width and height to the inline element, and you can align it within the block as well:
span {
display:inline-block;
width: 5em;
font-weight: normal;
text-align: center
}
more here
There are now multiple ways to mimic this same effect but further tailor the properties based on the use case. As stated above, this works:
.product__specfield_8_arrow { display: inline-block }
but also
.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table
This JSFiddle shows how similar these display properties are in this case.
For a relevant discussion please see this SO post.
The way I deal with this is to use a borderless, read-only input tag and then you can set the attributes as desired:
<input type="text" readonly
style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;"
[value]="statusMessage">