.box{
opacity: 0.8;
position: absolute;
top: 28px;
left: 45px;
width: 280px;
background: green
}
.box:before{
content: '';
border: 5px solid pink;
margin: 10px;
width: 300px;
}
Tried to make the box with border in the blank gap between box and border. I tried both border in box or :before but the borders are not showing outside the box along with white space.
Appreciate help.
The cleanest way to do it is to use the following CSS:
#box{
position:relative;
z-index:10;
padding:0px;
background:#fff;
border:12px solid #390;
width: 100px;
height: 100px;
}
#box:before {
content:"";
display:block;
position:absolute;
z-index:-1; top:2px;
left:2px;
right:2px;
bottom:2px;
background-color: pink
}
See the DEMO here: http://jsfiddle.net/fvHJq/1/
Depending on your needs, a simple outline might help:
.box {
width: 300px;
height: 300px;
background: #1baaaa;
border: 10px solid #fff;
outline: 5px solid #ff7474;
}
Fiddle
Related
I have a div, padding set to 50px both left and right.
Is it possible to add the purple border?
I cannot add code to the HTML, this should be done with pure css if possible. I tried to trick this with border-image and adding gradients but I could only add like this:
div {
width: 150px;
height: 150px;
background-color: grey;
padding-left: 50px;
padding-right: 50px;
border-top: 5px solid black;
border-image: linear-gradient(to right, white 50px, purple 0%);
border-image-slice: 1;
}
<div>Content</div>
https://jsfiddle.net/u7zq0amc/1/
Use a pseudo element instead:
div {
width: 150px;
height: 150px;
background-color: grey;
padding-left: 50px;
padding-right: 50px;
position:relative;
margin-top:20px;
}
div:before {
content:"";
position:absolute;
height:5px;
top:-5px;
right:50px;
left:50px;
background:red;
}
<div>Content</div>
I have full-width div with a background image in it. The background image has people in it and I'd like to show a tooltip when you hover over each person.
I don't think you can write image maps with % widths so I'm trying to do this with DIVs. Something like this:
<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>
and Css something like this:
.homepageimage{
width:100%;
max-width:2000px;
height:750px;
margin:auto;
margin-top:-50px;
background: url({{ 'homepage_test2.jpg' | asset_url }});
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
clear:both;
overflow:hidden;
}
.artistmap{
height:100%;
border:2px solid red;
float:left;
}
.artistmap:hover{
content:attr(title);
}
#davidmap{
width:10%;
}
#ceceliamap{
width:15%;
}
#erinmap{
width:5%;
}
#aimap{
width:5%;
}
#tommap{
width:10%;
}
Unfortunately depending on the size of the screen the divs won't line up with the people... What's the best way of solving this?
I posted the above code to cssdesk here:
http://cssdesk.com/vmZSD
Thanks!
Here is a FIDDLE that might help you.
CSS
.americangothic {
float: left;
width: 315px;
height: 384px;
background: url(http://www.artic.edu/aic/collections/citi/images/standard/WebLarge/WebImg_000256/190741_3056034.jpg );
background-size: 315px 384px;
position: relative;
}
.changemediv1 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: red;
border: 3px solid gray;
}
.changemediv2 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: blue;
border: 3px solid gray;
}
.face1:hover ~ .changemediv1 {
background-color: green;
}
.face2:hover ~ .changemediv2 {
background-color: green;
}
.face1 {
width: 80px;
height: 110px;
border: 0px solid red;
position: absolute;
top: 70px;
left: 35px;
}
.face2 {
width: 80px;
height: 130px;
border: 0px solid red;
position: absolute;
top: 30px;
left: 180px;
}
img {
width: 315px;
height: 384px;
}
Just remember that all the divs need to be in the same container.
My scenario here:
Inside the div which is mentioned below I need to add Find Out More link in right bottom of the div which should contain different bg-color in other words a box structure with an arrow image at the last.
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
How It should look :
Do you mean like this? Here's a jsfiddle
By setting the parent (.answerbox) to position: relative, I'm able to set .more to position:absolute and position it wherever I like in that box; In this case, bottom right of the container.
HTML
<div class="answerbox">
Find out more
</div>
CSS
.answerbox {
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
}
.more {
background: red;
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
height: 30px;
}
Edit - In case you want an arrow image on the button
Updated Fiddle
CSS
.more {
background: url('http://dc390.4shared.com/img/AgV87Tvx/s7/arrow_small_right.png') no-repeat left center red;
position: absolute;
bottom: 0;
right: 0;
height: 30px;
padding: 0 10px 0 20px; /* Extra padding left to make room for the button */
line-height: 30px; /* Used to center the text vertically. Use the same value as the height.*/
}
Edit - Let the box grow with the content
Updated Fiddle
CSS
.answerbox {
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
padding: 10px 10px 40px;
}
did you mean something like this:
<div class="answerbox">
<a href='#' class="findout">
find out more..
</a>
</div>
and
.findout
{
position:relative;
top:120px;
left:20px;
background-color:white;
color:Red;
}
see fiddle
I used 2 div's with fixed positioning, and after resize - opera doesen't redraw elements.
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
}
#label {
position: fixed;
bottom:0px;
left: 50%;
background-color: transparent;
z-index: 9999999;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
<div id="wrapper">
<div id="label">content</div>
</div>
U can see this bug here
http://jsfiddle.net/6Cm6J/1/
Just load page in Opera browser and resize window.
Pls help
Write this css
Live Demo
css
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
bottom:0;
left:0;
right:0;
}
#label {
position: relative;
bottom:0px;
left: 50%;
background-color: transparent;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
i put div with class="inner-box2" after div with class="inner-box".
HTML:
<div class="box">
<div class="inner-box"></div>
<div class="inner-box2"></div>
</div>
CSS:
.box {
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box {
border: solid 10px blue;
position: absolute;
height:150px;
width:380px;
}
.inner-box2 {
border: solid 10px green;
}
Now, I need to show div(inner-box2) after div(inner-box) but in my Code div(inner-box2) show in under div(inner-box). how to fix this? See Online Demo
If you are putting an element below the absolute position, you can add a margin to bump down your next element the distance required to "skip" the absolute item's space and presence. That way in the code, the item is still below your absolute item, but still visually appears below it.
Absolutely-positioned items need to have top|bottom + left|right defined.
Is this what you are shooting for http://jsfiddle.net/4bqzz/22/? I've modded your css a bit, and then floated the boxes left. You can play around with the sizes, borders, etc... But I assume they were so thick just to demonstrate where they were. Like so:
.inner-box {
border: solid 5px blue;
float:left;
height:150px;
width:360px;
}
.inner-box2 {
border: solid 5px green;
float:left;
height:150px;
width:20px;
}
if you want to use absolutely positioned elements in this example, this would be how to do it: http://jsfiddle.net/4bqzz/106/
.box
{
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box
{
border: solid 10px blue;
position: absolute;
height: 150px;
width: 380px;
}
.inner-box2
{
border: solid 10px green;
position: absolute;
top: 170px;
height: 210px;
width: 380px;
}