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 :)
Related
I'm trying to make a layout where the banner, the navigation and footer always stay fixed while you can scroll the content. I have seen some kinda similar layouts here but the actual page content is not limited there. What I want now is to center anything, but you better you maybe need something visual - what I got so far:
html
<body>
<div id="container">
<div id="banner"></div>
<div id="main">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
}
#container {
margin: 0 auto;
height: 100%;
width: 800px;
margin-top: 20px;
background-color: black;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
}
#main {
height: 100%;
width: 100%;
}
#nav1 {
height: 100%;
width: 150px;
float: left;
background-color: yellow;
}
#nav2 {
height: 100%;
width: 100px;
float: right;
background-color: yellow;
}
#content {
height: 100%;
width: 100%;
background-color: white;
}
#footer {
width: 100%;
height: 30px;
background-color: lime;
}
jsfiddle: http://jsfiddle.net/gLhd6sno/1/
When scrolling I want only the content in the white area to move, also I cant figure out how to disable overflow without breaking that layout. Maybe you have an idea?
Thank you.
Here is one way of doing it that relies on absolute positioning.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
margin: 0;
}
#container {
width: 800px;
left: 50%;
margin-left: -400px;
background-color: black;
position: absolute;
top: 20px;
bottom: 0;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
position: absolute;
top: 0;
}
#main {
width: 100%;
position: absolute;
top: 100px;
bottom: 30px;
}
#nav1 {
width: 150px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#nav2 {
width: 100px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#content {
position: absolute;
top: 0;
bottom: 0px;
left: 150px;
right: 100px;
background-color: tan;
border: 2px dotted blue;
overflow: auto;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
height: 30px;
background-color: lime;
}
See demo: http://jsfiddle.net/audetwebdesign/k9nsvt3t/
If you shrink the height, you will see a scroll bar appear around the content area,
which may do the trick. The rest of the page elements are static regardless of the
amount of content in the main area.
On many places I found this code to make a video responsible, but it doesn't work for me.
<div id='wrapp'>
<iframe id='player' src="//www.youtube.com/embed/VWSL2SykovA?rel=0"></iframe>
</div>
css
#wrapp {
position: relative;
padding-bottom:75%; // video is 4:3 aspect ratio
padding-top: 25px;
height: 0;
width:70%;
margin:15px auto;
z-index:2;
border:medium ridge #b30000;
border-radius:9px;
}
#player{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
video, i.e. iframe is too tall.
Here is the FIDDLE
Your proportions seems to be faultives.
Try that css settings proposed by Zurb Foundation
#wrapp {
height: 0;
margin-bottom: 16px;
margin-left: 30px;
overflow: hidden;
padding-bottom: 67.5%;
padding-top: 25px;
position: relative;
}
#player {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
jsFiddled here
Here's a screen capture of nhZBV/4
If you apply box-sizing: border-box; it works fine!
Check out updated fiddle: http://jsfiddle.net/nhZBV/2/
This worked for me:
#wrapp {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
Example:
http://jsfiddle.net/nhZBV/3/
I want to vertical center a text inside a responsive div but I really don't find the way to do it without new CSS3 tricks..
Here a fiddle : http://jsfiddle.net/M8rwn/
.iosSlider {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* slider */
.iosSlider .Slider {
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
float: left;
width: 100%;
}
.iosSlider .Slider .Slide img{
width: 100%;
height: auto;
}
.slider-prevContainer {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 50%;
color: #595e62;
text-align: center;
}
.slider-nextContainer {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
opacity: 1;
color: #595e62;
background: blue;
}
.slider-next {
position:absolute;
height: 50%;
width: 100%;
top: 25%;
text-align: center;
vertical-align: middle;
background: red;
box-sizing: border-box;
font-size: 50px;
}
#single-slider {
float: left;
width: 500px;
height: 500px;
min-width: 0;
margin: 0;
border: none;
background: #000;
}
Okay, I think I have a solution.
Adjusted HTML:
<div class="slider-next">
<div id='slider-next-inner'>
>
</div>
</div>
Added CSS:
#slider-next-inner{
position:relative;
top:50%;
margin-top:-30px;
/* Margin-top is 1/2 the elements height (currently it is 59px) */
}
Link: http://jsfiddle.net/M8rwn/18/
I'm attempting to have an overlay of an image. I've done it a bit before but for some reason today I'm obviously forgetting something. It seems to take the width of the entire page and not its parent:
#work_item {
position: relative;
width: auto;
}
#work_item img {}
#work_item a {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
background: #000;
color: #FFF;
}
<div id='work_item'>
<img src="" />
Click Here!
</div>
Any Help?
#work_item {
display: inline-block;
position: relative;
left: 0px;
top: 0px;
z-index: 1;
height: auto;
width: auto;
}
#work_item img {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#work_item a {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 30;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
color: #FFF;
}
<div id='work_item'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" />
Click Here!
</div>
Demo: http://jsfiddle.net/38v3h/
Add this code, if you meant the #work_item:
#work_item {
position: relative;
width: auto;
display: inline-block;
}
Fiddle: http://jsfiddle.net/CRY3g/
div is a block element which occupy the whole width of the its parent regardless of the width of its content. There are many ways to make the div #work_item to wrap the content.
display inline-block;
#work_item {
position: relative;
width: auto;
display inline-block;
}
you can also float the div:
#work_item {
position: relative;
width: auto;
float: left;
}
I try to add a box shadow and a gradient border using images and css pseudo-elements.
I tried that code:
.box:before {
content: url('box-shadow.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
z-index: -1;
bottom: -9px;
line-height: 0;
}
.box:after {
content: url('box-border.png');
position: absolute;
width: auto;
height: auto;
max-width: 100%;
bottom: -5px;
right: 0px;
}
But the added images don't resize when the parent div resizes, whereas it works by adding the image manually.
See that fiddle http://jsfiddle.net/5TG3E/2/
I try from my side may be that's help you. Write like this:
.box:after {
content:'';
position: absolute;
z-index: -1;
bottom: -9px;
margin: 0 auto;
top:0;
left:0;
right:0;
background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
-moz-background-size:100% 9px;
background-size:100% 9px;
}
.box:before {
content:'';
position: absolute;
bottom: 0px;
right: 0px;
left:0;
top:0;
background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}
Check this http://jsfiddle.net/5TG3E/6/