i'm trying to have ornamented border all along the right and left side of the document, but for some reason I have not managed to get the elements with those border ornaments reach 100% height.
What i have right now is:
html {
height: 100%;
}
body {
min-height: 100%;
background-image: url("../img/bgtile.png");
background-repeat: repeat;
background-color: transparent;
font-size: 18px;
}
body:before {
content: "";
background: transparent url("../img/frame-ornament-left.png") repeat-y 11px 0px;
height: 100%;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
body:after {
content: "";
background: transparent url("../img/frame-ornament-right.png") repeat-y;
height: 100%;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
z-index: 0;
}
And no matther what i try, those before and after elements always stay as high as viewport is. I've tried setting min-height to 100% on HTML element too, that indeed made html element as long as body, but those elements with ornaments in them still remain as high as viewport...
Set the body to position: relative, so it will be the context for the pseudo elements, instead of the html, and set bottom: 0 to both pseudo elements:
body {
position: relative;
background-image: url('../img/bgtile.png');
background-repeat: repeat;
background-color: transparent;
}
.content-demo {
height: 800px;
}
body:before {
content: "";
background: red;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
body:after {
content: "";
background: blue;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
<div class="content-demo"></div>
Related
I want to do this:
So far I got this:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 10px 10px 50px 50px;
}
<div class="header"></div>
Codepen.
I can't get the top radius to go outwards the half circle like in the image.
How to do this with CSS?
You cannot make a negative radius on a border.
There is the possibility to make an SVG path or radial gradient... I made a new div as circle and radial gradient on pseudo-elements. It's not perfect, but it will possibly show you the direction to solution :)
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header-circ {
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 500px;
height: 250px;
border-radius: 10px 10px 250px 250px;
}
.header-circ::before, .header-circ::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
z-index: -1;
}
.header-circ::before {
left:-94px;
background: radial-gradient(circle at bottom left, white 0%,white 75%,red 75%);
}
.header-circ::after {
right:-94px;
background: radial-gradient(circle at bottom right, white 0%,white 75%,red 75%);
}
<div class="header"></div>
<div class="header-circ"></div>
I was wondering if it's possible to position the z-index of a :after-pseudo element so that it's behind a link's text. For example;
HTML
Here's a link
SCSS
a {
background: #666:
height: 40px;
padding: 0px 20px;
position: relative;
color: #FFF;
&:before {
/* this is occupied */
}
&:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0; left: 0;
background: #000;
}
}
What I'm trying to achieve here is to display the link's text. This is currently not happening because the :after element is overlapping it. I'd like to put the text to the front without using something like a <span> tag. Note: it should overlap its original background, but not the text.
Is there a way to achieve this, or is this simply impossible?
I found a proper solution. I'll use a box-shadow: inset 0 -3.125rem 0 #000; on the element instead. This way I don't have to use the :after element.
Thank you all for the comments.
You just need to add z-index:-1; to the :after-pseudo
a {
background: #666:
height: 40px;
padding: 0px 20px;
position: relative;
color: #FFF;
}
a:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0; left: 0;
background: #000;
z-index:-1;
}
Here's a link
https://jsfiddle.net/d8htv6a9/
It's as easy as setting the z-index: -1; for the :after pseudo-element.
&:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -1; /* Set this */
background: #000;
}
Here's a JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/
EDIT:
Based on your comment, there is one trick you could use but I don't know if it will go along your animation. You could use a title attribute in the HTML itself and use it as the content of the :after pseudo-element.
a {
position: relative;
background: #666;
height: 40px;
padding: 0px 20px;
position: relative;
color: #FFF;
z-index: 1;
}
a:after {
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
background: #000;
color: white;
text-align: center;
}
Here's a link
Then you can perhaps fade it in/out or whatever you prefer.
Here's a new JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/
I've been using that code on my body, to get a full background with some mi-transparent white background on it :
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
The problem is that the white background doesn't go lower than the screen size as you can see here. Any idea how to fix that ?
It's because body::after isn't fixed, change the css like this :
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
Here is an example with a black background
Instead of using a ::before or ::after pseudo element, you can use css multple backgrounds.
Generate the base64 from this site: http://px64.net/
Apply the background to the body element.
#foo {
width: 400px;
height: 150px;
visibility: visible;
}
#foo {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYPhfDwACggF/yWU3jgAAAABJRU5ErkJggg==) repeat, url(http://www.openkorat.com/wp-content/uploads/2015/08/extra-bg-green.jpg) no-repeat;
background-size: auto, cover;
}
<div id="foo"></div>
Make the ::after element position: fixed.
Fiddle
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: red;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
div {
height: 800px;
}
<div>div</div>
I want to place some content at the bottom right content of a div and I came up with this:
#superDiv,
#childDiv {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#childDiv {
z-index: 30;
float: right;
position: bottom;
}
This is a Plunk I have made
http://plnkr.co/edit/WaP5Pde7CXnAfnW3QybF?p=preview
What am missing?
position: bottom doesn't exist. And you don't need float:right because you are using absolute positions.
#container {
width: 100%;
height: auto;
position: relative;
}
#superDiv {
width: 100%;
height: auto;
}
#childDiv {
position: absolute;
bottom: 10px; /* 5px margin-top + 5px margin-bottom */
right: 0;
}
Hope that helps.
Change your code into this:
#container {
width: 100%;
height: auto;
position: relative;
}
#superDiv {
width: 100%;
height: auto;
z-index:10;
position: relative;
}
#childDiv{
position: absolute;
bottom: 20px;
right: 0;
z-index: 30;
}
#childDiv {
z-index: 30;
position: absolute;
bottom: 0;
right: 0;
}
I've edited your Plunk to do as you want it. I've removed the #childDiv from the
#superDiv {
width: 100%;
height: 100%;
position:relative; /* Note the change in position absolute -> relative */
top: 0;
left: 0;
}
after this I've put your #childDiv to:
#childDiv{
z-index: 30;
float:right;
position:absolute;
right:0;
bottom:0;
}
which positions it at the bottom right of your #superDiv.
I am currently building a chat window and now I am focusing on the styling part. I have set its attributes to fit any window size. But I am having some issue with the div id="bottomPanel". Inside that div I have a textarea that is overlapping and not fitting in properly. I tried changing the position to relative but it is not resolving the issue: How can I the bottomPanel div to fit properly and get the button to be to the right side? JSFIDDLE
Something like this :
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #333;
}
#upperPanel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100px;
}
#chat {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 200px;
background: #666;
overflow: auto;
}
#friends {
position: absolute;
top: 0;
bottom: 0;
width: 200px;
right: 0;
background: #999;
overflow: auto;
}
#friends ul {
text-align: right;
}
#bottomPanel {
height: 100px;
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#bottomPanel textarea {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 120px;
resize: none;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
textarea {
width: 100%;
height: 100%;
position: relative;
}
Here is the Updated Fiddle
The textarea does not seem to work with absolute position + right + bottom sizing technique. The solution is to use a 100% wide and tall textarea wrapped inside desired size div.
In my example, I recycled #bottomPanel instead of adding a new div. I adjusted padding so that its inner dimensions matches the desired size of textarea. The important rules are:
#bottomPanel {
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
/* CHANGED */
height: 80px;
padding: 10px 120px 10px 10px;
}
#bottomPanel textarea {
resize: none;
/* CHANGED */
box-sizing: border-box;
margin: 0;
width: 100%;
height: 100%;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
Put 2 inline divs in the bottom panel. Left and Right the Left is for the textarea, the right is for the button.
Change the #bottomPanel textarea to relative and remove the absolute positions.
Edit:
Another option could be to just put the textarea in the same div as the chat area, and the button in the same div as the user list.
I think what you want to achieve is this Demo.you just did a mistake in arranging textarea