I need to make template as it shown on picture below:
I succed with top square but failed with alligning the bottom one - can't move it to the bottom left corner.
The code is:
<style>
.red_top {
background-color:red;
position:absolute;
width:65px;
height:65px;
z-index:-1;
}
.red_bottom {
align:right;
verical-align:bottom;
background-color:red;
position:relative;
width:65px;
height:65px;
z-index:-1;
top:-35px;}
.main_cont
{
border:1px solid blue;
margin-top:25px;
margin-left:25px;
min-height:100px;
z-index:1;
background-color:#FFF;
}
</style>
<body style="margin: 60px 50px;">
<div style="width:100%; border:1px solid #000;">
<div class="red_top"> </div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"> </div>
</div>
https://codepen.io/anon/pen/OxavGL
What I need to do for red_bottom div proper placing?
.red_top {
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
}
.red_bottom {
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
bottom: 0;
right: 0;
}
.main_cont {
border: 1px solid blue;
margin: 25px;
min-height: 100px;
z-index: 1;
background-color: #FFF;
}
<div style="width: 100%; border: 1px solid #aaa; position: relative;">
<div class="red_top"> </div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"> </div>
</div>
body {
margin: 60px 50px;
}
.Wrap {
position: relative;
width: 100%;
}
.main_cont {
position: relative;
background-color: #FFF;
border: 1px solid blue;
margin-top: 25px;
margin-left: 25px;
min-height: 100px;
}
.main_cont::before,
.main_cont::after {
content: "";
position: absolute;
background-color: red;
width: 65px;
height: 65px;
z-index: -1;
}
.main_cont::before {
top: -33px;
left: -33px;
}
.main_cont::after {
bottom: -33px;
right: -33px;
}
<div class="Wrap">
<div class="main_cont">Content Here</div>
</div>
Try This:
body {
margin: 5%;
}
.Wrap {
position: relative;
width: 100%;
}
.main_cont {
position: relative;
background-color: #FFF;
border: 1px solid blue;
min-height: 100px;
text-align: center;
}
.main_cont::before,
.main_cont::after {
content: "";
position: absolute;
background-color: red;
width: 50px;
height: 50px;
z-index: -1;
}
.main_cont::before {
top: -25%;
left: -3%;
}
.main_cont::after {
bottom: -25%;
right: -3%;
}
<div class="Wrap">
<div class="main_cont">Content Here</div>
</div>
CSS:
.main_cont::before {
content: '';
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
top: 0;
left: 0;
}
.main_cont::after {
content: '';
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
bottom: 0;
right: 0;
}
.main_cont {
border: 1px solid blue;
margin: 25px;
min-height: 100px;
z-index: 1;
background-color: #FFF;
}
HTML:
<div style="width: 100%; border: 1px solid #000; position: relative;">
<div class="main_cont">Content Here</div>
</div>
Here you go:
.mainDiv {
position: relative;
width: 500px;
height: 700px;
border: 1px solid black;
background-color: white;
}
.red_top {
background-color:red;
position:absolute;
left: -31px;
top: -31px;
width:65px;
height:65px;
z-index:-1;
}
.red_bottom {
background-color:red;
position:absolute;
bottom: -31px;
right: -31px;
width:65px;
height:65px;
z-index:-1;
.main_cont {
border:1px solid blue;
margin-top:25px;
margin-left:25px;
min-height:100px;
z-index:1;
background-color:#FFF;
}
<body style="margin: 60px 50px;">
<div class="mainDiv">
<div class="red_top"></div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"></div>
</div>
You can use the following solution without using additional <div> elements for the red boxes. This solution is using :before and :after to create the red boxes.
div.container {
border:1px solid #000;
position:relative;
width:100%;
}
div.main {
background:#fff;
border:1px solid blue;
margin:33px;
min-height:100px;
position:relative;
width:auto;
}
.red-box:before, .red-box:after {
background:red;
content:"";
height:65px;
position:absolute;
width:65px;
z-index:-1;
}
.red-box:before {
left:0;
top:0;
transform:translate(-50%, -50%);
}
.red-box:after {
bottom:0;
right:0;
transform:translate(50%, 50%);
}
<div class="container">
<div class="main red-box">Content Here</div>
</div>
Related
The below code does not work, perhaps because I am using class and id in the same div. I know they are supposed to work.
Reference: Can I use DIV class and ID together in CSS?
.PB {
position: relative;
margin: 0 auto;
background-color: #000;
width: 201px;
height: 422px;
z-index: 1;
}
#pb1-1 {
position: absolute;
margin: 0px;
background-color: green;
width: 65px;
height: 98.5px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
#pb1-2 {
position: absolute;
margin: 0px;
background-color: yellow;
width: 65px;
height: 98.5px;
top: 0px;
right: 0px;
bottom: 0px;
left: 68px;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
#pb1-3 {
position: absolute;
margin: 0px;
background-color: red;
width: 65px;
height: 98.5px;
top: 0px;
right: 0px;
bottom: 0px;
left: 136px;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
.pu:hover {
font-size: 24px;
background-color: #999999;
}
<div class="PB">
<div id="pb1-1" class="pu">1 </div>
<div id="pb1-2" class="pu">2 </div>
<div id="pb1-3" class="pu">3 </div>
</div>
Can someone tell me what I am doing wrong?
You need to overwrite your :hover CSS rules using !important, because id's are always given more preference than classes. Like:
.pu:hover {
font-size:24px !important;
background-color:#999999 !important;
}
Have a look at the updated snippet below:
.PB {
position:relative;
margin:0 auto;
background-color:#000;
width:201px;
height:422px;
z-index: 1;
}
#pb1-1 {position:absolute; margin:0px; background-color:green; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:0px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
#pb1-2 {position:absolute; margin:0px; background-color:yellow; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:68px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
#pb1-3 {position:absolute; margin:0px; background-color:red; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:136px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
.pu:hover {
font-size:24px!important;
background-color:#999999!important;
}
<div class="PB">
<div id="pb1-1" class="pu">1 </div>
<div id="pb1-2" class="pu">2 </div>
<div id="pb1-3" class="pu">3 </div>
</div>
Hope this helps!
This is because style of your ID's are overriding class styles (including with hover effect).
More information about cascading order can be found here: https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
In your example, I would avoid using !important, and use only classes to define styles:
.PB {
position: relative;
margin: 0 auto;
background-color: #000;
width: 201px;
height: 422px;
z-index: 1;
}
.pu {
position: absolute;
margin: 0;
width: 65px;
height: 98.5px;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
.pb1-1 { background-color: green; left: 0; }
.pb1-2 { background-color: yellow; left: 68px; }
.pb1-3 { background-color: red; left: 136px; }
.pu:hover {
font-size: 24px;
background-color: #999999;
}
<div class="PB">
<div class="pu pb1-1">1 </div>
<div class="pu pb1-2">2 </div>
<div class="pu pb1-3">3 </div>
</div>
You can try this with pseudo classes
.PB {
position: relative;
margin: 0 auto;
background-color: #000;
width: 201px;
height: 422px;
z-index: 1;
}
.pu {
position: absolute;
margin: 0;
width: 65px;
height: 98.5px;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
.pu:nth-child(1) { background-color: green; left: 0; }
.pu:nth-child(2) { background-color: yellow; left: 68px; }
.pu:nth-child(3) { background-color: red; left: 136px; }
.pu:hover {
font-size: 24px;
background-color: #999999;
}
<div class="PB">
<div class="pu">1 </div>
<div class="pu">2 </div>
<div class="pu">3 </div>
</div>
Click here!
Add <style type="text/css"> attribute. That's your problem. It will work.
I am trying to place my leftbody and rightbody over top of my MidBody but it doesnt seem to work. I thought placing the Midbody to relative and the left and right bodies to absolute with a z-index would help but it doesnt. So i am clueless right now. Any help would be greatly appreciated.
.Header {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: calc(50%-16px);
height: 425px;
float: left;
margin-left: 3px;
position: absolute;
z-index: 1;
}
#rightbody {
background-color: #F1F1F1;
width: calc(50%-16px);
height: 425px;
float: right;
position: absolute;
z-index: 1;
}
<div class="Header"></div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
</div>
<div class="footer"></div>
I changed
float:left; -> left:0;
float:right; -> right:0;
and
width:calc(50%-16px); -> width:50%;
Final css :
.Header {
background-color:#CCCCCC;
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
}
.MidBody {
background-color:#141414;
width: calc(100%-16px);
height: 850px;
margin-top:3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color:#CCCCCC;
width:calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color:#F1F1F1;
width:50%;
height:425px;
left:0;
margin-left: 3px;
position: absolute;
z-index: 9999;
}
#rightbody {
background-color:#F1F1F1;
width:50%;
height:425px;
right:0;
position: absolute;
z-index: 9999;
}
<div class="Header"></div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
</div>
<div class="footer"></div>
Use position: fixed; instead of position: absolute;
I want to make this shape :
there supposed to be 3 div shapes like this. I built already some shape, but I want to see how this shape will fit in my website
I already built this :
codepan
css example for what i did :
.mainOuterDiv{
height:300px;
overflow:hidden;
background:#FFF;
}
.middDiv{
width:70%;
height:75px;
background-color: #0CF;
margin:0px auto;
position:relative;
margin-top:50%;
}
.innerLeft{
position: absolute;
left: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,215deg);
background-color: #0CF;
}
.innerRight{
position: absolute;
right: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,145deg);
background-color: #0CF;
}
.textDiv{
z-index:9999;
width:100%;
height:100%;
position:absolute;
background-color: #0CF;
}
is there a way to make this in css ?
Here is the responsive version with skewY i have used :pseudo elements
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
position: relative;
}
.content {
background: white;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
}
.shadow {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: 18%;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: -1;
}
.shadow:before,
.shadow:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
bottom: -28%;
border: 1px solid black;
}
.shadow:before {
left: -30%;
transform: skewY(-23deg);
}
.shadow:after {
right: -30%;
transform: skewY(23deg);
}
.ribbon {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: -1px;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: 1;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
top: -28%;
border: 1px solid black;
}
.ribbon:before {
left: -30%;
transform: skewY(23deg);
}
.ribbon:after {
right: -30%;
transform: skewY(-23deg);
}
hr {
margin: 20px;
0
}
<div class="container">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>
<hr>
<div class="container" style="width:200px; height:200px;">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>
There is some example :
.container
{
position:relative;
width:400px; height:302px;
overflow:hidden;
}
.mainDiv
{
height:300px; width:300px;
background-color:white;
border:solid 1px black;
position:absolute;
left:0;right:0;margin:auto;
}
.middDiv
{
height:55px; width:70%;
background-color:lightblue;
position:absolute;
bottom:0;left:0;right:0;
margin:auto;
z-index:10;
}
.leftDiv, .rightDiv
{
position:absolute;
bottom:26px;
width:30%;height:48px;
background-color:blue;
z-index:10;
}
.leftDiv
{
left:-13%;
transform:rotate(30deg) skew(30deg);
}
.rightDiv
{
right:-13%;
transform:rotate(-30deg) skew(-30deg);
}
.leftBDiv, .rightBDiv
{
position:absolute;
width:13%; height:47px;
bottom:59px;
background-color:black;
z-index:9;
}
.leftBDiv
{
left:-12%;
transform:rotate(-30deg) skew(-30deg);
}
.rightBDiv
{
right:-12%;
transform:rotate(30deg) skew(30deg);
}
<div class="container">
<div class="mainDiv">
<div class="middDiv"></div>
<div class="leftDiv"></div>
<div class="rightDiv"></div>
<div class="leftBDiv"></div>
<div class="rightBDiv"></div>
</div>
</div>
I use different colors for middle, left and right blocks so You can see it.
If You will use border for those divs, You have to change positions: left, right and bottom for all of them.
There is fiddle example, too.
Hello can anyone help me i have this buttons and i want to make the transition off each one of them when i put my mouse over each one but seems to work only for the first button even that each button have a different class. seems that :hover dont work for all.
CSS code:
.first{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.second{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.last{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
#type{
border-radius:100%;
border: none;
height: 100%;
width:100%;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1{
border-radius:15%;
border:none;
height: 100%;
width:100%;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type2{
border:none;
height: 100%;
width:100%;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
.first:hover #type{
transition:2s;
left:0;
};
.second:hover #type1{
transition:2s;
left:0;
};
.last:hover #type2{
transition:2s;
left:0;
};
HTML code:
<html>
<head>
<title>buttons</title>
<link href="style.css" rel="stylesheet" media="all">
</head>
<body bgcolor="#F6CED8">
<!-- <div clas="gen"> -->
<div class="first">
<button type="submit" id="type">Click Here!</button>
</div>
<div class="second">
<button type="submit" id="type1">Click Here!</button>
</div>
<div class="last">
<button type="submit" id="type2">Click Here!</button>
</div>
<!-- </div> -->
</body>
</html>
http://jsfiddle.net/4L3ec/
I changed the width and height to 100px instead of % , b.c I couldn't even see the buttons without that. But the fiddle I posted works great now.
.first {
width: 100px;
height: 100px;
position: relative;
border:2px solid black;
}
.second {
width: 100px;
height: 100px;
position: relative;
border:2px solid black;
}
.last {
width: 100px;
height: 100px;
position: relative;
border:2px solid black;
}
#type {
border-radius:100%;
border: none;
width: 100px;
height: 100px;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1 {
border-radius:15%;
border:none;
width: 100px;
height: 100px;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
#type2 {
border:none;
width: 100px;
height: 100px;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
.first:hover #type {
transition:2s;
left:0;
}
.second:hover #type1 {
transition:2s;
left:0;
}
.last:hover #type2 {
transition:2s;
left:0;
}
.body {
width: 100%;
height: 100%;
}
Here jsfiddle answer for that.
.first{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.second{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.last{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
#type {
border-radius:100%;
border: none;
width: 100px;
height: 100px;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1 {
border-radius:15%;
border:none;
width: 100px;
height: 100px;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
#type2 {
border:none;
width: 100px;
height: 100px;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
.first:hover #type {
transition:2s;
left:0;
}
.second:hover #type1 {
transition:2s;
left:0;
}
.last:hover #type2 {
transition:2s;
left:0;
}
Your CSS is not valid. Remove the extra ; after the } and it will work
.first {
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.second {
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.last {
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
#type {
border-radius:100%;
border: none;
height: 100%;
width:100%;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1 {
border-radius:15%;
border:none;
height: 100%;
width:100%;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type2 {
border:none;
height: 100%;
width:100%;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
.first:hover #type {
transition:2s;
left:0;
}
.second:hover #type1 {
transition:2s;
left:0;
}
.last:hover #type2 {
transition:2s;
left:0;
}
Fiddle
Demo jsFiddle
I have div color azure I want to fill the width area in the middle column no meter what size will be.
is there any solution with css3/css no jQuery ?
i need it like this picture:
the ststus current like this:
many Thx.
Demo jsFiddle
the code html:
<div id="frame">
<div id="inside_window">
<div id="Yellow"></div>
<div id="Green"></div>
<div id="Blue"></div>
<div id="Red"></div>
<div id="ver"></div>
<div id="hor"></div>
<div id="ver2"></div>
</div>
</div>
the code css:
html, body{
height:100%;
background-color: azure;
}
#frame
{
position: relative;
background-color: black;
height: 100%;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
}
#Yellow
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: Yellow;
z-index:10;
display:table;
left:0px;
top:0;
}
#Green
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: green;
z-index:10;
right:0px;
top:0;
}
#Blue
{
position: relative;
height:100%;
min-width:65.8%;
-webkit-border-radius: 0px;
margin: 0 auto;
background-color: #62A9FF;
z-index:10;
display:table;
font-size:220%;
left:0px;
top:0px;
}
#Red
{
position: absolute;
height: 150px;
width: 100%;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: red;
z-index:10;
border: 1px solid black;
left:0px;
bottom:0px;
}
#inside_window
{
width:100%;
height:100%;
margin:0 auto;
position: relative;
border: 1px solid black;
background-color: brown;
-webkit-transform: rotate(0deg);
-webkit-transform-origin:50% 50%;
}
#ver
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
left:150px;
top:0px;
z-index:1;
}
#hor
{
position: absolute;
height: 5px;
width: 100%;
margin: 0;
background-color: white;
left:0px;
bottom:150px;
z-index:20;
}
#ver2
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
right:150px;
top:0px;
z-index:1;
}
Try removing the following CSS from your blue code:
position: relative;
display:table;
There are many ways to acheive a layout like this. Supposing that you could alter the order of your content, you could always try the "Holy Grail" layout method.