I'm trying to have a border around the entire HTML page something like a photo frame
there's a solution but it doesnt work for IE7+
anybody have any ideas?
edit 1
thank you for the replies, i think i didnt explain my problem clearly. i've included a sample design
https://dl.dropboxusercontent.com/u/604317/test.jpg
basically it's frame that surrounds the page
edit 2
I've added a fiddlejs which i got from #Sebastian Graz, its almost there but the frame need to fill the content not the only the window
http://jsfiddle.net/xzqDQ/1/
#top, #bottom, #left, #right {
background: url('http://f.cl.ly/items/1P2Q1u0O2P44082N1L3a/Screen%20Shot%202013-07-04%20at%204.25.01%20PM.png');
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 30px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 30px;
}
#top { top: 0; }
#bottom { bottom: 0; }
DEMO:http://jsfiddle.net/umbriel/xzqDQ/
Css:
#top, #bottom, #left, #right {
background: url('http://f.cl.ly/items/1P2Q1u0O2P44082N1L3a/Screen%20Shot%202013-07-04%20at%204.25.01%20PM.png');
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 30px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 30px;
}
#top { top: 0; }
#bottom { bottom: 0; }
body {
border:50px solid orange;
}
Is this what you mean?
Related
I'm trying to keep my code as DRY as possible. Consider this example:
#parent {
position: relative;
#child {
position: absolute;
top: 0;
left: 0;
}
}
Now I want to add a hover effect on the #parent that will alter the #child. I know I can do it like this:
#parent {
position: relative;
#child {
position: absolute;
top: 0;
left: 0;
}
&:hover #child {
transform: scale(1.2, 1.2);
}
}
But I'm not happy with this solution. It isn't completely DRY because #child is declared twice. Another way to do it is like this:
#parent {
position: relative;
}
#child {
position: absolute;
top: 0;
left: 0;
#parent:hover & {
transform: scale(1.2, 1.2);
}
}
This is arguably more semantic, but no more DRY because #parent is declared twice.
Is there a truly DRY way to do this with SASS?
I have minimum of 5 beautiful ways to do it. i will share 1, if you want more i can share more as well.
Using Functions
#mixin onParentHover() {
$rootString: #{&};
$parentIndex: str-index($rootString, " ");
$parent: str_slice($rootString, 0, $parentIndex - 1);
$children: str_slice($rootString, $parentIndex);
#at-root #{$parent}:hover #{$children} {
#content;
}
}
Usage
#parent {
position: relative;
width: 100px;
height: 100px;
#child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
#include onParentHover {
transform: scale(1.2, 1.2);
}
}
}
The Final output
#parent {
position: relative;
width: 100px;
height: 100px;
}
#parent #child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#parent:hover #child {
text-size: 20px;
}
I'm trying to build modal window that will be positioned absolute, 30 pixels from edge of screen.
I've build this css:
.modal {
overflow: hidden;
}
.modal-dialog {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
margin: 0;
}
#media (min-width: 768px) {
.modal-dialog {
width: auto;
margin: 0;
}
}
.modal-footer {
position: absolute;
bottom: 0;
left:0;
right:0;
}
.modal-header, .modal-body, .modal-footer {
padding: 10px;
}
.modal-content {
height: 100%;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-backdrop {
background-color: #fff;
}
.modal-header .close {
margin-top: 3px;
}
.btn {
border-radius: 0;
}
and my results so far looks like this: http://jsfiddle.net/Misiu/LT3YM/
My modal window is correctly positioned, but modal-body isn't sizing, i would like it to take rest of available height of modal - from header to footer.
I can position absolute modal-body and add top and bottom properties, but I'm wondering if there is a better way of doing this.
My solution for now is this code:
.modal-body {
position: absolute;
top: 46px;
bottom: 54px;
overflow-y: scroll;
}
and demo of what I have:
How can I modify my code better so that modal-body will always be correct height? Is positioning it absolutely only option?
http://jsfiddle.net/LT3YM/4/
You should change the values in .modal-dialog. You can make bottom and right 30px too
.modal-dialog {
position: absolute;
top: 30px;
bottom: 50px;
left: 30px;
right: 50px;
margin: 0;
}
Alternatively, this uses 3%: http://jsfiddle.net/LT3YM/7/
.modal-dialog {
position: absolute;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
margin: 0;
}
Looks like this:
I was looking the way to create image view as have Facebook or Google Plus but i can't put the image at middle of div.
This is my code:
.overflow {
background-color: rgba(0,0,0,.9);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overflow .left-img-box,.overflow .right-content-box {
display: inline;
height: 100%;
}
.overflow .left-img-box {
display: block;
left: 0;
margin: auto;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 70%;
}
.overflow .right-content-box {
background: #fff;
position: absolute;
right: 0;
top: 0;
width: 30%;
}
.overflow .left-img-box img {
margin: auto;
max-height: 100%;
}
You can see the example: http://fiddle.jshell.net/N6md8/5/
You can do something css like:
img {
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
max-height:100%;
max-width:100%;}
reference: http://codepen.io/shshaw/full/gEiDt
I beleive you can go with position:fixed as well :)
I couldn't understand why my 3rd background doesn't work?
what I tried is here: http://jsbin.com/yopodusu/1/edit , #page::after background doesn't work.
body {
line-height: 1;
overflow-y: scroll;
background: transparent url(http://i.imgur.com/SwFFw1i.gif) repeat top left;
}
body::after {
content: "";
background: url(http://i.imgur.com/QOSseW6.jpg);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -2;
opacity: .150;
}
#page::after {
content: "";
background: url(http://www.zordor.com/w/1920x1200/6098.jpg) no-repeat right top;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: .150;
background-size: 35%;
}
What am I doing wrong?
regards
You've got this property overriding the element's visibility :
.clearfix:before,.clearfix:after {
content:"\0020";
display:block;
height:0;
visibility:hidden;
}
Add visibility : visible to your #page:after
And height : auto as well, or setup a specific height.
Which gives :
#page::after {
content: "";
background: url(http://www.zordor.com/w/1920x1200/6098.jpg) no-repeat right top;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: .150;
background-size: 35%;
visibility : visible;
height: auto;
}
i need to build a frame all around mi contents that would scroll under the frame
i made a top margin a bottom and a left and right margin
it seems to work correctlly but some times between bottom and middle or top and middle i get a void pixel
and on mobile device, without viewport set it get a little worst
i don't have other idea on how make the same thing in a better way
here an example link
http://jsfiddle.net/zBAPX/
#mask-center-container {
z-index: 1000;
position: fixed;
top: 10%;
bottom: 4%;
left: 0;
right: 0;
width: 100%;
margin: 0;
padding: 0;
}
#mask-center-container-sx {
height: 100%;
width: 21%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-center-container-ce {
height: 100%;
width: 56%;
margin: 0;
padding: 0;
}
#mask-center-container-dx {
height: 100%;
width: 22%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-top {
z-index: 3000;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 10%;
width: 100%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
#mask-bottom {
z-index: 3000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4%;
width: 100%;
background: #000;
opacity: 0.5;
margin: 0;
padding: 0;
}
I only know of one way to effectively click 'through' an element, and that is to use the experimental pointer-events property. Here's a writeup from CSS Tricks:
http://css-tricks.com/almanac/properties/p/pointer-events/
One major flaw: no IE support prior to IE11.