I want to set rounded inside border border-radius ,(not outer border-radius) to my element without nested div's.
My idea is like this picture:
html source on
jsfiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#s{
width:200px;
height: 200px;
border:8px solid green ;
border-radius:8px;
background-color: red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="s" >
</div>
</body>
</html>
Is this possible in css3?
You can but it won't be usable I presume, since there is z-index: -1; once there is another background it will go behind it...
#s {
position: relative;
width:200px;
height: 200px;
border-radius:8px;
background-color: red;
margin:0 auto;
}
#s:before {
content:'';
z-index: -1;
background-color: green;
position: absolute;
top: -8px;
left: -8px;
width: 216px;
height: 216px;
}
Demo
It's possible to fake this with a couple of extra properties being outline and box-shadow.
CODEPEN DEMO
CSS
#s{
width:200px;
height: 200px;
border-radius:8px;
background-color: red;
margin:0 auto;
outline:8px solid green;
-webkit-box-shadow:0 0 0 8px green;
}
NB. The outline by itself will leave a gap where the rounded corners are. The box-shadow merely fills in the gap.
Related
I want the border to be positioned inside the image,
red background just to show the border.
#example {
border: 50px dotted black;
background: red;
width:600px;
}
img{
width:100%;
height:auto;
}
<div id="example">
<img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
You can use i, it doesn't affect the box-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#example {
display: inline-block;
position: relative;
width: 600px;
}
#example:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 50px dotted black;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
</style>
<div id="example"><img
src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600" />
</div>
</body>
</html>
You can use outline, it doesn't affect the box-model
outline: 50px dotted black;
outline-offset: -50px;
Try to add outline and outline-offset to (img) looks like the example below:
#example {
border: 50px dotted black;
background: red;
width:600px;
}
img{
width:100%;
height:auto;
outline: 10px solid rgba(0,0,0, 0.5);
outline-offset: -10px;
}
<div id="example">
<img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
perhaps you can make an absolute div, you can use that div to cover the image and make a border from that div. that will make the border looks inside the image
#example {
width:600px;
position: relative;
}
img {
width:100%;
height:auto;
}
.absolute {
position: absolute;
top: 0;
box-sizing: border-box;
border: 50px dotted black;
width: 100%;
height: 400px;
}
<div id="example">
<img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
<div class="absolute"></div>
</div>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
I was wondering how i can achieve the following:
I have two divs. One is positioned absolutely, while the other is a simple block element. I need the block element to actually overlap the absolutely positioned container.
Here's a picture of what i need to do:
The red box is positioned absolutely, the blue box is a normal block element (inside a flexbox, but i don't think that changes anything, correct me if im wrong)
I've tried achieving this with z-index, but it doesn't seem to work.
Thanks
Edit: Here's a fiddle to show more or less my code.
https://jsfiddle.net/xzp284vn/
<div class="container">
<div class="block">
</div>
<div class="absolute">
</div>
</div>
.container {
display: flex;
justify-content: flex-end;
position: relative;
width: 400px;
height: 300px;
}
.block {
border: 1px solid blue;
width: 40px;
height: 300px;
}
.absolute {
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 40px;
background: yellow;
}
.red{
height:100px;
border: 1px solid red;
}
.blue{
border: 1px solid blue;
width: 150px;
position: absolute;
right:30px;
top:9px;
height:300px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
</body>
</html>
This is what you are looking for..
Hey guys I got an image which is half faded out and when you hover over it, it will fade into the screen. I also have a box which i made so when you hover over that it will change color. However the problem is if i make the box go around the image the only thing that works is the box changing color, so its overlapping the other image. Anyway to fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>
<style>
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px;
top: -550px;
left: 740px;
}
.meh:hover
{
opacity:1.2;
filter:alpha(opacity=100);
}
.border
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
text-align:center;
top: -650px;
}
.border:hover
{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="meh">
<img src="http://lorempixel.com/50/50" alt="meh">
</div>
<div class="border">
</div>
</body>
</html>
Why is there top: -550px; values are given??
I have removed those values here.
Method - 1 (to get the hover effect for the entire divs)
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px;
}
.meh:hover
{
opacity:1.2;
filter:alpha(opacity=100);
}
.border
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
text-align:center;
}
.border:hover
{
border: 1px solid red;
}
DEMO
Method - 2 (To give separate hover effect for both the div )
Just add display:inline to .meh
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px; display:inline
}
DEMO
Let me try...
<style>
.meh
{
z-index: 500;
width: 200px;
height: 200px;
text-align: center;
}
.meh img {
margin-top: 50px;
opacity:0.5;
filter:alpha(opacity=40);
}
.meh img:hover {
opacity:1.2;
filter:alpha(opacity=100);
}
.border {
z-index: -1;
background: transparent;
position: absolute;
top: 0;
height: 200px;
width: 200px;
border: 1px solid black;
}
.border:hover{
border: 1px solid green;
}
</style>
I don't know if this is the style you are trying to achieved. I've changed your css since your approach is to perform the ":hover" selector on the elements image and div.box. I haven't really tried performing in css two hovers at the same time. I would suggest you do it on jquery or javascript if you'd like.
You can try this out and comment your css.
<div class="main"></div>
<style>
.main{ background-color:black;
position:absolute;
width:???;
height:??;
</style>
How to center the div main and make its height and width almost 100% with 20px gap from each side of the screen.
The width of a block element is already 100% by default.
All you need do is add padding or margin to create your "gap".
<style>
.main{ background-color:black;
position:absolute;
margin: 0 20px;
height:100%;
}
</style>
edit
I missed your absolute positioning.
With absolute positioning, I'd use this:
#main {
background: #a00;
position: absolute;
top: 0;
left: 50px;
right: 50px;
height: 100%;
}
DEMO FIDDLE
Hey now define this css
<style>
.main{
background-color:black;
position:absolute;
margin:20px;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
This would center align the div with 50px space on left and right side.
.main {
margin: 0 50px; /* [top,bottom] [left,rigth] shorthand syntax */
width : 100%;
}
You can do :
<style>
.main{ background-color:black;
position:absolute;
width:100%;
height:100%;
margin:20px;
</style>
You can use the new calc() attribute in CSS3:
.main
{
margin: 0 auto;
background-color:black;
color: #fff;
position:absolute;
width: -webkit-calc(100% - 20px);
height: -webkit-calc(100% - 20px); /*repeat with other browsers codes*/
}
This tells the div to be 100% wide/high but remove 20px while keeping it in the center.
IT can be used in IE9 (not below)m Firefox 4.0, Chrome 19 and Safari 6. So it might not be the best solution..
http://jsfiddle.net/Kyle_Sevenoaks/wVUat/
Since you are using absolute positioning you could try this:
<div class="main"></div>
<style>
.main {
background-color: black;
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 100%;
}
</style>
How about solution below:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style>
#mask {
background-color: rgba(0, 0, 0, .5);
opacity: 0.5;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="mask" />
</body>
</html>
Please find it at http://jsfiddle.net/balkon_smoke/yPF8Y/2/
I am attempting to layout a site:
http://kenzshop.com/Brandon/index
I cannot get the main content area (blue colored)to align correctly.
The header (red) has a fluid with, the sidebar (yellow) has a fluid height, the main content area should be fluid width and height, but I cannot figure out how to get it to align correctly.
It should align width-wise with the header.
Can anyone see what my issue is?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"></meta>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"></meta>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="main"><!--<iframe src="http://www.cnn.com/"/> --></div>
<div id="sidebar"></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#header{
height: 80px;
border: 1px solid black;
padding: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color:red;
}
#main{
position:absolute;
left:0;
top:90px;
right: 263px;
padding:0;
margin-top: 12px;
margin-left: 5px;
margin-bottom:5px;
height:99% !important; /* works only if parent container is assigned a height value */
width:100%;
border:1px solid black;
background-color:blue;
}
iframe{
margin: 5px;
display:block;
width:100%!important;
height:100%!important;
}
#sidebar{
position:absolute;
right:0;
top:102px;
padding:0;
margin-right:5px;
margin-bottom:5px;
width:250px;
height:99%; /* works only if parent container is assigned a height value */
border:1px solid black;
background-color:yellow;
}
Since their are little to no variables, this is easily solved by relying on position: absolute, without affecting flexibility.
The HTML:
<header class="header"></header>
<div class="content">
<iframe src="http://www.cnn.com/"></iframe>
</div>
<div class="sidebar"></div>
The CSS:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header,
.content,
.sidebar {
position: absolute;
border: 1px solid black;
}
.header {
top: 5px;
right: 5px;
left: 5px;
height: 80px;
background: red;
}
.content,
.sidebar {
top: 90px;
bottom: 5px;
}
.content {
left: 5px;
right: 260px;
}
.content iframe {
width: 100%;
height: 100%;
}
.sidebar {
right: 5px;
width: 250px;
background: green;
}
Take a look at it here: http://jsfiddle.net/joplomacedo/WBRCj/
Something like this?
HTML:
<div id="header"></div>
<div id="main"></div>
<div id="sidebar"></div>
CSS:
#header {
height: 60px;
background: red;
margin-bottom: 10px
}
#main {
width: 68%;
background: blue;
float: left;
height: 800px;
}
#sidebar {
width: 30%;
background:yellow;
float: right;
height: 800px;
}
And the Fiddle
P.S. Wasn't sure whether to base it off your current site, or your image posted, as both seem to follow different concepts. Did image for now.