I have a photo blog on the very final stages and this is the last problem I'm struggling with.
The layout has fixed menu bar on the right and the content flows on the right. When photo is opened from gallery page to it's own, it is supposed to be resized so that either side is not over (for example) 70% of the free space. But not just that. It should also stay in horizontal and vertical center of the right content div.
At this point everything works except when the image is a portrait it goes over the screen.
Is this possible to achieve with only CSS to please the few percent that has JS not activated?
If not, well thats not a deal breaker.
The HTML:
<div id="wrapper">
<div id="left_column">
</div>
<div id="right_column_post">
<div id="post_container">
<img src="img.jpg" width="1000" height="750"/>
</div>
</div>
</div>
The CSS:
#left_column {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index:100;
width: 240px;
height: 100%;
overflow: hidden;
}
#right_column_post{
height: 100%;
width:auto;
margin-left:240px;
position: relative;
}
#post_container {
width:100%;
height:100%;
display: block;
vertical-align: middle;
text-align:center;
}
#post_container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
#post_container img{
max-width:70%;
height:auto;
display: inline-block;
vertical-align: middle;
margin:auto;
position:relative;
}
This is close: http://jsfiddle.net/jcAGj/ but it'll break the layout if implemented as is.
I am not sure what you are actually looking for, but if you want to resize image in aspect ratio then do not give max-width and max-height both, if u do so then at a point it will loose its aspect ratio.
u can give width:100%;
Here i am giving width in percentage
#left_column {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index:100;
width: 40%;
height: 100%;
overflow: hidden;
background:red;
}
#right_column_post{
height: 100%;
width:50%;
margin-left:45%;
position: relative;
}
#post_container {
width:90%;
height:100%;
display: block;
vertical-align: middle;
text-align:center;
}
#post_container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
#post_container img{
width:100%;
max-width:100%;
display: block;
vertical-align: middle;
margin:0 auto;
position:relative;
}
Check this link:
/NEW LINK/
http://jsfiddle.net/madhuri2987/jcAGj/2/
Hope this is what u were looking for.
I got it working ...kind of. I did a stripped down test page and it works:
http://tomiphotography.com/wp-content/themes/Photomi/Test/post-2.html
But when I use the same exact css in the main WP page the image ratio goes haywire and the image isn't centered????:
http://tomiphotography.com/?p=176
:(
Any idea what might be in WP that overrides some css?
HTML:
<body>
<div id="wrapper">
<div id="left_column">
</div>
<div id="right_column_post">
<div id="post_container">
<img src="http://tomiphotography.com/wp-content/uploads/2013/04/Ruka-viimeinen.jpg"/>
</div>
</div>
</div>
</body>
CSS:
html {
height: 100%;
padding:0;
margin:0;
}
body {
background-color: #000000;
height: 100%;
padding: 0;
margin: 0;
background: url(img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrapper {
float: left;
height: 100%;
width:100%;
padding:0;
margin:0;
}
#left_column {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index:100;
width: 240px;
height: 100%;
overflow: hidden;
background-color:#ff0000;
}
#right_column_post{
height: 100%;
width:auto;
margin-left:240px;
position: relative;
}
#post_container {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:8%;
right:80px;
bottom:10%;
left:320px;
}
#post_container img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
Related
I need to overlap image of logo 20px down in a responsive slider. The image of logo must come at front and the responsive slider must be back. Please view live at: http://www.pahari.com.np
**HTML PART:**
<div id="top_banner"> <div id="logo"><img src="image/logo.jpg"> </div> </div>
<div id="slider_bg"> <?php include_once("slider.php"); ?> </div>
<div id="menu_bg"> </div>
<div id="content_bg"> <div id="content"> </div> </div>
**CSS PART:**
<style>
#top_banner{
width: 1000px;
height: 106px;
margin: auto;
}
#logo{
width: 362px;
background: url(images/logo.jpg) no-repeat;
height: 106px;
float: left;
}
#slider_bg{
float: left;
height: 380px;
}
#menu_bg{
background: #B1BB34;
height: 30px;
}
#content_bg{
background: #A562B1;
height: 180px;
margin-top: 25px;
}
#content{
background: url("image/bg.jpg") no-repeat;
width: 1000px;
margin: auto;
height: 180px;
margin-top: 25px;
}
<style>
The easiest way is to position your slider1_container with a negative value for top and adding a negative z-index. ex.:
top:-2em;
z-index:-1
Hope this help!
I would wrap the top banner in another div and work with absolute positioning. Please note that I have taken only part of your code for display purposes on fiddle. You will need to add this to your site accordingly.
Check this out: http://jsfiddle.net/3Z2JZ/
CSS
body{
background: url(images/bg.jpg) #FFFFFF repeat-x;
font: normal 12px verdana;
color: #9C9C9C;
margin: 0;
padding: 0;
}
#top_banner_wrap {
position: absolute;
width: 100%;
}
#top_banner{
position: relative;
width: 1000px;
height: 106px;
margin: auto;
}
#logo{
width: 362px;
background: url(images/logo.jpg) no-repeat;
height: 106px;
float: left;
}
#slider_bg{
float: left;
width: 100%;
height: 380px;
background-color: red;
margin-top: 86px;
}
use
#logo {
position: relative;
z-index:100;
}
for the logo element and it will stay on top of the slider element.z-index should be highest number defined.
I have a horizontally and vertically centred image on a page. I would like it so when the user scrolls down, the content below it actually comes up, as if the top content is fixed. Like this effect here... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
Only problem is for that effect they use the background-attachment: fixed property. I cannot use this as I need the image to be content (it will actually be changed to HTML5 video).
My code is here... http://jsfiddle.net/5jphd/1/
HTML
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
<div class="text">Scroll down</div>
</div>
<div class="wrap">
Here is some content
</div>
CSS
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: absolute;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
}
Is this possible to do with this markup? So when you scroll down the content will rise up and overlap the image.
Ok i have done it, this is what I wanted to achieve. I simply made the video and scroll text position:fixed, and made the main body content position:relative - http://jsfiddle.net/5jphd/4/
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: fixed;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
position:relative;
}
JSFiddle
I think this is what you're essentially asking for. Keep aspect ratios in mind, this is what an hd vieo would probably look like on a 320x480 or so.
#bg {
position:absolute;
position:fixed;
top:0;
width:100%;
height:100%;
margin:auto;
overflow:hidden;
z-index:-1;
}
#bg img { max-width:100%; }
I have 2 divs next to each other.
The wrapper size is width:100%.
The right aligned div is 230px.
The div that is next to the right aligned one needs to be centered in the container to remain responsive.
The left margin was just temporary because it was hugging the left aligned div.
CSS
.wrapper{
width: 100%;
margin: 0 auto;
}
.col-browse{
float: left;
width: 230px;
}
.col-content{
float: left;
width: 1080px;
margin-left: 30px;
}
HTML
<div class="col-browse">
</div>
<div class="col-content">
</div>
Thanks!
EDIT: http://i.imgur.com/8Y7XXAx.png
This is what im getting and i need the middle part to be centered while keeping the left column snapped to left
you can try the below css code.
.wrapper{
width: 100%;
margin: 0 auto;
}
.col-browse{
float: right;
width: 18%;
border: 1px solid #cccccc;
height: 100px;
}
.col-content{
width: 82%;
margin:0 auto;
border: 1px solid #000;
height: 100px;
}
Define width of container of where element will be centered within (this element position: relative; centered element will simply be inside of previous mentioned and margin: 0 auto; have div which is not to be within container (right div), simply float:right; outside of.
Try CSS below:
html,body,.wrapper{
width: 100%;
margin: 0 auto;
}
.wrapper{
position:relative;
}
.col-browse{
position:absolute;
text-align:center;
width: 230px;
}
.col-content{
text-align:center;
width: 1080px;
margin-left: 30px;
}
Demo
If you want it to be centered in all screen sizes then try following fiddle:
Demo2 (Updated)
The following example could help you achieve the style you want
the CSS
.l,.r{
width:30%;
height:200px;
background:red;
}
.l{
float:right;
}
.r{
margin:0 auto;
}
.wrap{
float:left;
width:70%;
background:blue;
}
the html
<div class="wrap">
<div class="r"></div>
</div>
<div class="l"></div>
working Example JSFIDDLE
try using relative values (percent), this will help you to create a responsive website. The example:
http://jsfiddle.net/XkPay/
.wrapper{
width: 100%;
}
.col-browse{
float: left;
width: 18%;
background-color:black;
}
.col-content{
float: left;
width: 82%;
background-color:red;
}
probably this is what you need..
FIDDLE
.wrapper{
width: 100%;
height:500px;
margin: 0 auto;
background-color:Yellow;
}
.col-browse{
float: left;
width: 20%;
height:500px;
background-color:Red;
}
.col-content{
width: 80%;
height:500px;
margin-left:21%;
background-color:Blue;
}
This attempt keeps the width of the sidebar and the width of the centered content constant.
HTML
<div class="right">
<div class="center"></div>
</div>
<div class="left"></div>
Centered to window
Fiddle
CSS
div.left {
float: left;
width: 230px;
height: 20px;
position: relative;
}
div.right {
height: 20px;
position: absolute;
left: 0;
right: 0;
}
div.center {
height: 50px;
width: 50px;
margin: 0 auto;
}
Centered to column
Fiddle
CSS
div.left {
float: left;
width: 230px;
height: 20px;
}
div.right {
height: 20px;
position: absolute;
right: 0;
left: 230px;
}
div.center {
height: 50px;
width: 50px;
margin: 0 auto;
}
Note: I would recommend centered to column, personal design preference. If you center to window the blank space would be off-balance. Again, just my opinion.
looked for other examples but couldn't find any. my image container uses max-width/max-height so the image scales to the container but I can't seem to get it to auto margin top/bottom or vertical align it to the middle without setting a height.
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
}
#container img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
vertical-align: middle;
}
<div id="container"><img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
http://jsfiddle.net/beftR/
I could only get it to work by adding another div named #container2 to your code. I used table/table-cell display type to do it. Here is what I did (jsFiddle here).
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
display:table;
}
#container2 {
display:table-cell;
vertical-align:middle;
}
#container img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="container2">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
</div>
Sorry about my english.
Please, i have a problem with divs, i have 3 divs "with image" horizontally, the images have to be together.
Here is the default view, if the screen is large enough.
If the navigator are resized i lost center with the #div2. The #div1 are aligned to the left, that is not i need.
What i need is the #div2 stay on center, but i don't know to do that. #div1 and #div3 are outside of the navigator, no one div can be resized, are a fixed size.
The html code:
<body id="body">
<div id="wrap">
<div id="baseLeftBg">
</div>
<div id="baseContent">
</div>
<div id="baseRightBg">
</div>
</div>
</body>
The CSS code:
#body {
text-align: center;
height: 100%;
margin: 0 auto;
padding: 0px;
background: #ffffff;
-moz-background-size: cover;
background-size: cover;
float: inherit;
}
#wrap {
width: 1484px;
margin: 0 auto;
text-align:center;
}
#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}
#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
float: left;
}
#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}
How i can do that?
Link to Fiddle: http://jsfiddle.net/murb83/BChLs/
Thanks!!
Making text-align center for wrapper will be helpful. This will show the elements in center.
#wrap {
width: 1484px;
margin: 0 auto;
text-align:center;
}
Other solution could be using absolute positioning like this:
#wrap {
..
position:relative;
..
}
#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
left:0;
}
#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
position:absolute;
top:0;
left:0;
right:0;
}
#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
right:0;
}
Why don't you consider using Javascript for solving your problem?
You should have a container larger as much as you want containing your three divs and with javascript, based on the screen width, you should set the left margin (obviously it could be a negative number).
Then, with JS, you can also handle the event on screen resize for "adjust" the left margin
I found a way to do that with jsQuery.
HTML
<body id="body">
<div id="wrap">
<div id="baseLeftBg">
</div>
<div id="baseContent">
</div>
<div id="baseRightBg">
</div>
</div>
</body>
CSS
#body {
text-align: center;
height: 100%;
margin: 0 auto;
padding: 0px;
background: #ffffff;
-moz-background-size: cover;
background-size: cover;
float: inherit;
}
#wrap {
width: 500px;
height: 300px;
}
#baseLeftBg {
background: #CDCDCD;
width: 100px;
height: 300px;
float: left;
}
#baseContent {
background: #A7A7A7;
width: 300px;
height: 300px;
float: left;
}
#baseRightBg {
background: #CDCDCD;
width: 100px;
height: 300px;
float: left;
}
JSQuery
$(window).resize(function(){
$('#wrap').css({
position:'absolute',
left: ($(window).width() - $('#wrap').outerWidth())/2,
top: ($(window).height() - $('#wrap').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
var $scrollingDiv = $("#wrap");
$(window).scroll(function(){
$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine' );
});
See in action: http://jsfiddle.net/murb83/BChLs/
That is the solution without JS works ok for me at the moment...
#wrap {
margin-top: 5%;
left: 50%;
margin-left: -742px;
position: absolute;
width: 1484px;
height: 776px;
}
Maybe you should try making it dynamic, with percentages like:
#baseLeftBg {
..
width: 20%;
..
}
#baseContent {
..
width: 60%;
..
}
#baseRightBg {
..
width: 20%;
..
}