I have a problem. I'm trying to get a button to click right with CSS :after selector.
.text-bg .text-top-left{
position:absolute;
width:50%;
background:rgba(95,87,79,0.9);
padding:20px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
top:50px;
left:-48%;
}
.text-bg .text-top-left:after{
content:'>';
font-family:'Entypo';
width:20px;
height:10px;
color:black;
background:white;
}
Right now the > is under my content in my text-top-left. But I need it to be on the right side, centered, outside of the box. What do I have to change?
JsFiddle
Tried: position:absolute, float:right, text-align:right
Play around with top,left,right,bottom value in :after selector.
Demo: http://jsfiddle.net/lotusgodkk/w1v07drv/1/
CSS:
.text-bg .text-top-left {
position:absolute;
width:50%;
background:rgba(95, 87, 79, 0.9);
padding:20px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
top:50px;
left:0;
}
.text-bg .text-top-left:after {
content:'>';
font-family:'Entypo';
width:20px;
height:10px;
color:#FFF;
position:absolute; // Add this
top:0; // to place it at the top
right:10px; //to place it extreme right at the offset of 10px
}
For Right:
Change right to 0 or any preferred value.
For Left : Modify left
..and so on
Related
How can I get a child div which is positioned absolutely to not show up when its placed outside the reach of its parent?
https://jsfiddle.net/knp9ebys/9/
.papa {
background:red;
overflow:auto;
width:90px;
height:90px;
}
.baby {
position:absolute;
top:100px;
left:100px;
width:25px;
height:25px;
background:blue;
color:white;
}
Try this:
.papa {
background:red;
overflow:auto;
width:90px;
height:90px;
position:relative; /* add this line */
overflow:hidden; /* add this line */
}
.baby {
position:absolute;
top:100px;
left:100px;
width:25px;
height:25px;
background:blue;
color:white;
}
If you add position:relative; to the parent element then the child element can be positioned within the context of the parent. Adding overflow:hidden; is the trick because this will remove scroll bars... and since the positioning of the child element is outside the parent's bounds, it will make the child appear to be hidden from view.
I there a way to make each border in a div extend 1 or 2 pixels in each way so that they form a cross in each corner?
You can't do it by default css border property. However, you can achieve what you want by trying :before and :after selectors for the div:
<div class="cross-borders"></div>
.cross-borders {
width:200px;
height:200px;
border:1px solid #000;
border-top:0;
border-bottom:0;
position:relative;
margin:20px auto;
}
.cross-borders:before,
.cross-borders:after {
content: ' ';
width:210px;
height:1px;
background-color:#000;
position:absolute;
top:5px;
left:-5px;
}
.cross-borders:after {
top: auto;
bottom: 5px;
}
JSFiddle
How to put the :before behind the span? I know I did this before but I can't remember how.
Here's the fiddle.
HTML
<span>Stack Overflow</span>
CSS
span{
background:#000;
position:relative;
color:#fff;
z-index:20;
}
span:before{
content:'';
background:#000;
position:absolute;
left:50%;
bottom:-10px;
width:20px;
height:20px;
z-index:1;
}
Fiddle
z-index is relative, so for the :before pseudo-element to appear underneath its parent <span>, you can specify a z-index of -1:
span:before{
content:'';
background:#000;
position:absolute;
left:50%;
bottom:-10px;
width:20px;
height:20px;
z-index:-1;
}
jsFiddle Demo
I have two block elements, a header, and a nav. The header has a div inside of it that overflows above the nav. I used z-index to define those items that way, but now I have a items inside of the nav that I'd like to be the most prodominent/highest element on the page, so to appear above the header and it's overflowing elements. Is this possible?
Please see example - http://jsfiddle.net/zAehr/ - I'd like the Nav a items to be above the blue logo class.
My CSS:
#header {
position:relative;
display:block;
height:100px;
width:100%;
overflow:visible;
background:#eee;
z-index:10;
}
.logo {
position:relative;
display:block;
height:250px;
width:250px;
background:#336699;
z-index:10;
}
#navbar {
position:relative;
width:100%;
height:100px;
background:#bbb;
z-index:9;
}
#navbar a {
display:block;
position:relative;
padding:10px;
z-index:100;
float:left;
}
Many thanks SO
take the z-index: 9 off of #navbar
http://jsfiddle.net/pxfunc/zAehr/1/
I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn't show unless I fill it with some content or use absolute positioning.
This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/
With the following CSS:
#middleContent
{
position:relative;
min-height:500px;
height:auto;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:absolute;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
}
However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn't have any content in it (but needs the capability to add content so I can't just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.
change your CSS to :
#middleContent
{
position:relative;
min-height:500px;
height:auto;
overflow: hidden;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:relative;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
http://jsfiddle.net/fXHqL/1/
Add this line to #middleRight
display:block;
it should work.