I have the following HTML code:
<div id="bg">
<span id="topnav">
About Us | Contact Us | Media Room | Events | Career Opportunities
</span>
<input type=text size=25 id=insidebgtext />
</div>
The CSS code:
#bg {
position: absolute;
background: url('bg.png');
height: 50px;
width: 100%;
z-index: 1;
}
#insidebgtext {
position: absolute;
top: 25%;
right: 20%;
background-color: #FFFFFF;
z-index: 2;
}
#topnav {
position: absolute;
top: 40%;
left: 20%;
z-index: 5;
color: #FFFFFF;
font-family: Verdana, Tahoma;
font-size: 11px;
}
I didn't set a background for the span but why is the span inheriting the page's red background color and not have any background at all?
bg is the parent of your span. So if you provide the background to the parent bg and not giving any background to child then child is automatically uses the background-color of parent.
If you don't want to use the same background for span you need to give the other color. Background :none will not work in this case.
You can understand it like this. Assuming there is layer of parent which is having background:red and the child is place over it and having no background, in that case background of child will automatically red.
So you have to put a background-color of child which looks like it has no background like this
#topnav {
background:#FFF
}
JS Fiddle Demo
Do not give it a background in first place :)
* {
background-color: #CCCCCC;
padding: 0px;
margin: 0px;
}
Think it twice before using a global selector and do not forget about it
Not an answer, just a reminder :)
It is because child elements inherit the properties of their parent element.
If you want to remove it, then you need to reset the background property of that element yourself.
span { #topnav would be in the place of span
/* here */
}
The background of the parent (#bg) is being applied:
background: url('bg.png'); // this line from #bg
Related
I am looking to create this effect with css: https://i.stack.imgur.com/zpzVC.png
Since I don't know how this effect is called, I haven't been able to find a solution online and I can't make it work on my own unfortunately.
The effect repeats a few times on different titles with different sizes. The border should begin on the half of the first letter.
Who can help me?
I'd use the :after pseudo class on the span element to accomplish this.
body {
background: #3E9CE2;
color: white;
font-family: sans-serif;
} /* Just for looks */
h1 span {
position: relative;
display: inline-block;
}
h1 span:after {
position: relative;
display: block;
content: "";
background: #DE2F2D;
z-index: -5;
height: 22px;
top: -19px;
left: 7px;
}
<h1>This is our <span class="offset-background">showcase</span></h1>
The position and display attributes on the span itself make sure the :after element is properly positioned (directly underneath the span) and has the same width as the text.
The pseudo element has to define its height and a position offset, as well as a negative z-index to make sure it's drawn behind the text.
Here is an example of what you seem to be looking for. The solution I used is to offset a box around the text and negatively offset the text the same amount.
h1 span { position: relative; display: inline-block; }
.blue-sq{
background-color:blue;
display:inline-block;
}
.offset-red{
position:relative;
top:22px;
background-color:red;
height:18px;
}
.inner-text{
position:relative;
top:-22px;
left:-6px;
}
<div class="blue-sq">
<h1>View our
<span class="offset-red">
<span class="inner-text">showcase</span>
</span>
</h1>
</div>
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
I have a list which has round elements in it. They have a image in the background and on hover the other div is supposed to become visible as an overlay. It works so far, however there is still a visible border, indicating that the hovered div is not perfectly overlaying the other rounded element.
HTML:
<ul>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
height: 140px;
}
li {
width: 140px;
height: 140px;
margin: 0;
padding: 0;
display: inline-block;
border-radius: 70px;
background: url(http://www.nationalflaggen.de/media/flags/flagge-thailand.gif);
}
.hover {
border-radius: 70px;
width: 140px;
height: 140px;
}
.hover:hover {
background-color: rgba(255,255,255,.9);
}
I added a fiddle since I really don't know how to make them perfectly overlapping.
Thanks for your help.
UPDATED THE FIDDLE:
http://jsfiddle.net/pL9Aa/1
Looks like a sub-pixel problem -- the browser does a bunch of math to determine the smoothness of a curve using square pixels. And sometimes it doesn't render how you might expect.
You can simply remove the border-radius rule from the :hover pseudo class if you are keeping it transparent.
.hover {
width: 140px;
height: 140px;
}
Fiddle
If it needs to be round, I would override your image using the same element, instead of a nested element, like so:
li:hover {
background: white;
}
Fiddle2
You could add:
li:hover {
background:none;
}
to ensure that the background on the li is gone.
It's weird though - does look like a rendering bug.
Assuming that you are going to have text or other content in the overlay, it's worth noting that setting the background to be slightly transparent (e.g. rgba(255,255,255,0.8)) makes the rendering error less noticeable.
Just change #hovers border-radius: 62px;
If your hover is only meant to cover the element, you do not need to put a border-radius on the hover element. Simply removing that line will resolve your issue:
.hover {
width: 140px;
height: 140px;
}
http://jsfiddle.net/pL9Aa/3/
If in the production envirionment you can actually use a background color, you could also use a box-shadow
demo: http://jsfiddle.net/j4NFB/
.hover:hover {
background-color: #FFF;
box-shadow: 0 0 0 1px #fff;
}
I have made a fiddle for reference: http://jsfiddle.net/kLFn9/
The overflow:hidden in question is highlighted.
Basically, i'm using :hover:after to show a tool tip. but the parent element has overflow: hidden on it. How can i force the element hovered to escape the parent element?
Relevant CSS:
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden
Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.
You can use margin-top and padding-top.
padding-top will extend your parent area, but a negative margin-top will keep it in the expected position.
It will look like you're escaping the overflow, but in fact you're not.
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
background-clip: content-box; /*use this to constrain the background color within the content-box and do not paint the padding */
padding-top: 200px; /* space required to display the tooltip */
margin-top: -150px; /*200px - 50px of the original margin*/
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
<div>
<span data-name="here">hover</span>
</div>
This may introduce pointer events problems, but you can fix them using pointer-events then.
I am using simple z-index for force the element hovered to escape the parent element. Please check
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: fixed; /* Here I replaced position abosolute to fixed */
top: 10px; /* Here I replaced top -150px to 10px */
left: 250px; /* Here I replaced positionleft 0 to 250px */
z-index:99999;} /* Here I added new z-index property to 99999 */
<div>
<span data-name="here">hover</span>
</div>
There is no way using plain CSS to overflow a parent elements borders with a child, if it was set to overflow:hidden;. On possible CSS option is to use a sibling element to that one which has overflow:hidden; set and show that as popup.
I'm not sure what your trying to get at, but I recreated a tooltip framework for you to view. It's basically smoke and mirrors where I call :hover and the .class associated with it.
http://jsfiddle.net/WE8Dw/
Hope this helps.
In some cases you can escape with div{position: absolute;}
You can set child's position to fixed.
Take a look at this screenshoot first:
That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.
Here is the orange background style and the white box itself:
Orange background:
body {
margin: 0;
padding: 0;
background: url("../img/back.png") repeat-x top #fff;
text-align: left;
color: #8a5225;
}
White box:
#box {
background: url("../img/box.png") no-repeat;
width: 163px;
height: 41px;
float: right;
position: relative;
}
Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...
You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.
http://jsfiddle.net/5bsty/
<div class="one">First div</div>
<div class="two">Second div</div>
div.one {
background: #c74d12;
z-index: 3;
position: relative;
}
div.two {
position: relative;
top: -10px;
z-index: 1;
background: white;
}
use a z-index and you should be done.. give the orange background a higher z-index
I think you look like this
You take two div and parent div define position relative and child div define absolute properties and z-index is compulsory .
css
div.one {
background: #c74d12;
position: relative;
z-index:2;
}
div.two {
position: absolute;
top:11px;
background: green;
left:0;
right:0;
z-index:1;
}
Html
<div class="one">First div</div>
<div class="two">Second div</div>
Check to live demo http://jsfiddle.net/rohitazad/5bsty/3/
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex
Reffer this..:( ?