#border {
position: static;
z-index: 1;
width: 120px;
height: 120px;
margin-left: 92% ;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
margin-left: 93%;
z-index: 2;
color: white;
font-weight: bold;
}
<div id="border"></div>
<div id="text">Users online</div>
I can't post the image here, cuz I have less than 10 reputation, so try to imagine it please. I want to place it's "Users online" inside the border, how should I do this? Thanks.
I'm assuming you are trying to have an element with a semitransparent background.
Since you are using the opacity property on the element with an id of border.
The problem here is that z-index will not have any effect, if the position is set to static, which is the default value for div elements.
The other thing is, that you should be using a relative positioned parent to make your life easier and have more control over the elements since positioned elements will leave the normal document flow and result in new stacking order.
Here you can find good information on the the z-index property, stacking and the document flow.
This is one solution to your problem.
body {
background:black;
}
.holder {
position:relative;
}
#border {
position: absolute;
z-index:1;
right:0;
width: 120px;
height: 120px;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
position: absolute;
z-index:2;
right:0;
width: 120px;
height: 120px;
padding: 15px;
text-align: center;
color: white;
font-weight: bold;
}
<div class="holder">
<div id="border"></div>
<div id="text">Users online</div>
</div>
But i would actually try to solve this with a different approach, because i find the above solution a bit to complex and it involves to much positioning, so if all you need is a semitransparent background just make use of the background property with an rgba value. Here is an example.
.user-panel {
float:right;
height: 120px;
width: 120px;
padding: 15px;
border-radius: 11px;
/* fallback for browser that do not support rgba */
background: #ccc;
/* semitransparent background */
background: rgba(0, 0, 0, .2);
text-align: center;
color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
<header>
<div class="user-panel">Users online</div>
</header>
Hope that helps.
Change
position: static;
to
position: absolute;
for #border. That way, border will be "removed from the flow" (i.e. other elements will ignore it). You may need to adjust the margin-left property for #text so it properly aligns.
Fiddle: https://jsfiddle.net/xzdmLt33/1/
Related
I'm trying to emulate this effect via CSS:
The reason this is an issue is because it needs to be re-usable. The red underline's size should be dictated by the text length, but also overflow its container in a predictable manner, e.g.:
<div>
<h1>This</h1>
<h1>Cool</h1>
<h1>Effect</h1>
</div>
The red underline should extend outside the div by 10px on the left, and then also overflow the text itself by roughly 50px on the right. So, all told, the red line is +60 pixels wider than the text itself.
How can I achieve this effect without doing it manually each time? I've had no success with pseudo elements, and box-shadow won't extend on the left and right as I need it to.
Pseudo elements was the answer for me. Setting z-index on the :after element to get it positioned behind the parent element is a neat trick. The elements can't be block elements, but other than that it seemed straightforward.
html {
min-height: 100%;
}
body {
min-height: 100%;
background: linear-gradient(to bottom, #0b122f 0%, #17457d 100%);
padding: 20px;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1:before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
z-index: -1;
}
<div>
<h1>This</h1>
<br />
<h1>Cool</h1>
<br />
<h1>Effect</h1>
</div>
use <h1><span>This</span></h1> make effect in span and adjust red box to use padding to were's you want :
h1 span {
position: relative;
font-size: 100px;
font-weight: 300;
margin: 0;
padding:0 0 0 20px;
}
h1 span::before {
content: "";
background: red;
height: .25em;
position: absolute;
bottom: .15em;
z-index: -1;
width: 100%;
left: 0;
}
like: https://jsfiddle.net/bdmpqkme/1/
All this examples mentioned above by lalit bhakuni and JasonB work really well, but only when you don't have any section with a background behind this underlined text.
The z-index: -1 will put the line you want behind the text like you want and also behind any other parent sections. In case any of these parent sections have a background, the line will be hidden (behind).
Other solution, not so clean, but solves all our problems is by adding an extra element inside of your heading:
HTML
<div class="div-with-background">
<h1><span>This</span></h1>
<br />
<h1><span>Cool</span></h1>
<br />
<h1><span>Effect</span></h1>
</div>
CSS
.div-with-background {
background-color: #333;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1::before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
}
h1 > span {
position: relative;
}
In this case, we don't even need to use the z-index property.
I have a parent element .box with overflow: hidden;
I have a child element .segment which has an ::after
I need to position ::after outside of .box but still be able to see it even though .box is overflow: hidden;
<div class="box">
<div class="segment">
::after // This ::after is displayed outside of the parent but isn't visible because of `overflow: hidden;`
</div>
</div>
.box needs to be overflow: hidden; so that the parents border-radius is shown.
CSS for ::after
.segment::after {
content: '';
position: absolute;
top: -30px;
left: 0px;
width: 100%;
height: 30px;
background-color: ...
}
Here is JSFiddle: https://jsfiddle.net/o73ft5k2/
Does anyone know how I can keep overflow: hidden; so border radius works but also allow the ::after pseudo-element to appear outside of the parent?
You can't do it if the overflow:hidden is in place. There is a better way to achieve the same effect without using overflow:hidden as it is just not needed to achieve this effect. Check this updated jsfiddle:
https://jsfiddle.net/o73ft5k2/1/
You can simply apply border-radius on particular elements. Also, notice `box-sizing: border-box" on an after element as padding had to be added for the text to align properly.
As far as I'm aware, you can't. You would need to apply the border-radius to the elements instead of the parent in this case.
* {
padding: 0px;
margin: 0px;
}
body {
background: white;
padding: 40px;
}
.box {
display: inline-block;
height: 30px;
line-height: 30px;
/*border-radius: 30px;*/
color: white;
}
.segment {
position: relative;
display: inline-block;
width: 150px;
padding-left: 5px;
padding-right: 5px;
}
.segment:first-child, .segment:first-child:after {
border-radius: 30px 0 0 30px;
}
.segment:last-child, .segment:last-child:after {
border-radius: 0 30px 30px 0;
}
.red {
background: red;
}
.blue {
background: blue;
}
.segment:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.5);
transition: top 0.3s;
}
.segment:hover::after {
content: 'hello world!';
color: white;
top: -30px;
}
<div class="box">
<div class="segment red">
curved border
</div>
<div class="segment blue">
hover broken
</div>
</div>
I'm trying to have a background image to the right of a div, which isn't covering the whole div.
Right now it's like this (div1 is background-color):
<div id="div1">
<div id="image"></div>
Text
</div>
CSS:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius:4px;
height:40px;
clear:both;
overflow: hidden;
}
.image {
background: url("url here");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position:absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
But is it possible to have the image shown in it without having it as a div inside div1? Like using :after, :before or something else? I only want the div image to show to the right of div1 and be X width.
For an background image to show on pseudo-elements like ::after and ::before you should include content: ''; on them.
I've fixed (you were trying to target ids with class selectors) and added the mentioned background image on on this fiddle. But it goes like this:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius: 4px;
height: 40px;
clear: both;
overflow: hidden;
}
.div1::after {
content: '';
background: url("https://unsplash.it/200/300");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position: absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
<div class="div1">
Text
</div>
There are several ways to place an image to the right of a div. You should consider displaying the image with an image tag as follows:
Also, in your html you define ids, then in css you need to use # isntead of .. Check Difference between id and class in CSS and when to use it
A way to do this:
HTML:
<div id="div1">content</div>
<img id="image" src="url"/>
CSS:
#div1 {
display:inline-block;
float:left;
}
#img {
float:left;
}
By default, div containers stretch their width all the way to match 100% the width of their parent container. Setting 'display:inline-block' will make it wrap their content and allow stacking different containers (including images) to the sides.
This is a test of :before and :after, with which you can place text or an image before and after each HTML element.
p.test:before {
padding-right: 5px;
content: url(/pix/logo_ppk.gif);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}
In my navigation I have a protruding red box. I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out among the other elements I put in the black box. The problem is that it's margin is also effecting the layout of separate elements' children bellow it. When I add a negative margin to the child elements of the section bellow it does overlap but I want the red box to be on-top. I use z-index and it doesn't seem to work.
Here's my example on Jsfiddle:
http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
To use z-index, you need to specify a position (like absolute, fixed, or relative).
And the last line written is wrong:
z-index = 99;
The correct way to write it is:
z-index: 99;
How about: http://jsfiddle.net/1qsuvhnd/30/
change the ribbon to position: absolute; and fix the z-index = typo :D
Now you don't need that margin hack!!
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index: 99; /* take that equal out and make it a colon */
position: absolute; /* position: absolute to the rescue!!!! */
}
You need to specify a position CSS rule for the nav div for the z-index to work correctly, like this:
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index:99;
position: relative;
}
Here is the new jsFiddle link:
http://jsfiddle.net/1qsuvhnd/54/
i am trying to put text over image it works but is there a better way to do it. should i use a different html tag for the text.
any suggestions
http://jsfiddle.net/8rDda/
body{
background-color:#F0F0F0 ;
color:#000305;
font-size: 87.5%;
font-family: Arial,'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
width:80%;
margin:2% auto;
}
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main img{
width:80%;
height:auto;
margin: 6% 10%;
float: left;
}
.main h2 {
color:white;
position: absolute;
margin:50px;
margin-left: 50px;
width: 100%;
}
Maybe one solution could be, that you set the image as background-image for your div. And edit the test in it. So you jut have a single div, which you must edit.
http://jsfiddle.net/QX36R/1/
http://jsfiddle.net/8rDda/1/
I would use absolute positioning instead of float.
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
position: relative; //keep children absolutely position constrained to this element.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main h2 {
color:white;
position: absolute;
margin: 6% 10%;
top: 0;
left: 0;
}
You could also use z-index and different divs. But at last you need position:absolute; with different positions or margin-top: -whatever with position:relative;. There is not really a right or wrong approach to do this. As long as it works on your site, it is all fine.
You can use <div> tag means creating one div and put it on the top of image or set any position or else link it with another div which will be your image. There are plenty of things you can do with <div> tag.
Example.
<div style="abcd">
top: 99;
left: 99;
position: absolute;
z-index: 1;
visibility: show;">
<!-- content will go here -->
</div>