The image caption and content is held in place by the image. When window is resized or image is loading the page content jumps up and is then jumps back down again.
Is it possible to prevent the content from moving in this way?
<div class="profile">
<img src="http://lorempixel.com/g/720/720/nature" alt="" />
</div>
See https://codepen.io/atoms/pen/bRdLVe
Built on Chris Ferdinandi's Kraken CSS framework.
This seems to do the trick:
.profile {
position: relative;
width: 100%;
padding-bottom: 100%;
float: left;
height: 0;
}
.profile img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
and the result:
https://codepen.io/atoms/pen/jwbOYe
Now when you reload the page the text stays in place even when the image has not yet loaded. And you can resize the browser window to reflow the contents with the same result.
Not sure if the CSS is entirely correct but it seems to work.
Firstly, you can add a class to your caption, like following:
<p class="image-caption"><small>Image caption</small></p>
And then add a "hidden" class in CSS:
.hidden {
display: none;
}
Then use jQuery to implement this feature:
$(document).ready( function() {
$(".image-caption").addClass("hidden");
$(".profile img").on('load', function() {
$(".image-caption").removeClass("hidden");
})
});
Note: you need to include jQuery in your HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This depends on if you are going to have consistent image sizes or not. If your images will always be the same size in that spot, you can set a CSS height of the image size on the image (or even your profile div) and that will create the space on the page before the image loads, preventing the jump.
.profile img { height:250px }
If your images will vary in size and you need to avoid distortion, a JS approach like also mentioned here might be a better approach.
Related
I am working on a WordPress theme. Initially its bootstrap template has been created. Currently I have an issue in its slider for the testimonials section.
I am using Owl Carousel to create the slider. I have included the following shortcode inside the div in my index.php file:
<?php
echo do_shortcode('[owl-carousel category="testimonial" singleItem="true" autoPlay="true"]');
?>
The slider includes a statement given by the client with the client's image at the bottom in a circle. For the image, I have its CSS looking like:
.img-circle {
margin-top: 20px;
height: auto;
width: 100px;
}
Though the width of the image has been specified but the image picks up the entire width of the div of which it is a part. I want to display only one client in one slide, so I have used singleItem="true" in the short-code. Have been unable to get the required image dimensions. How to contain the image to the required dimensions?
You have to give the width and height attributes to the img markup. Also, it will need to be display: block in order to ignores owl-carousel's 100% width.
You could also include a wrapper around it, will work better.
CSS
.wrapper-circle {
width: 100px;
height: 100px;
}
HTML
<div class="wrapper-circle">
<img src="" alt="">
</div>
If you can`t edit HTML, try applying CSS to your img tag instead:
display: block;
width: 50px;
height: auto;
Check this for more details: http://owlgraphic.com/owlcarousel/demos/one.html
Is there a quick and easy way to keep a navigation not moving while resizing the window ?
What I have at the moment is something like this which is obviously wrong because proportions will change.
I am not sure if I should use a fixed width though ?
#mainnav {
position: absolute;
left: 30%;
top: 75px;
width: 50%;
}
Thank you for your answers.
It really depends on what kind of page you are creating. If you are creating something responsive/interactive, you may need fixed or absolute navigation, but it's hard to tell from the code that you provided.
A more traditional approach would be to wrap your page content in a container with a fixed width:
<div id="container">
<div id="mainnav">...</nav>
<div id="main-content">...</div>
</div>
CSS
#container
{
width: 1000px;
margin: 0 auto; // will center your container inside page body, even on resize
}
#mainnav
{
display : block;
}
This way your nav will stay together with the content and wont resize. it's also much easier to manage what's inside the navigation element.
I have a setup for a left navigation bar on our website that. The way it is displayed is to have a header image (usually the client's name) at the top of the nav, then to have a table that holds a number of options about what to do. These options vary depending on what the client is. When displaying this nav, there are two images that run down the sides of the primary table, used as borders. These are skinnable images that are one by one pixel images. This way, each client's skin can be a different color while referencing the same image name in the CSS file.
Before we added doc types to these pages, the images were extending to the bottom of the page or the bottom of the content inside of the table, whichever was longer. Now, adding doc types to make the page standard, I cannot get it to do the same thing.
My setup is that I have one DIV as the header which simply holds the header image. Then, I have a DIV as a container with three DIV elements as children. The first and last ones hold the one pixel image as the left and right border and the middle div holds the content table.
I can't set the border image DIVs to 100% height, because the page size will be 100% + the size of the header image. And I can't just rely on the image going to the bottom of the content, because it needs to be the entire length of the page if the content doesn't take up the entire page. I'm at a loss of what to do here, short of using javascript to calculate what the size of the DIVs should be when I resize the page.
By the way, I'm trying to shoot for all browsers, so both IE (at least 9) and Chrome are m test cases. Linking code here to show what my problem is. As you can see, the left, content, and right divs extend past the bottom of the page, which I do not want to happen.
//HTML
<html>
<body>
<div class="NavHeader"> </div>
<div id="NavBody">
<div id="NavLeft"> </div>
<div id="NavContent"> <br> </div>
<div id="NavRight"> </div>
</div>
</body>
</html>
// CSS
html, body {
height: 100%;
}
.NavHeader {
height: 40px;
width: 100%;
background-color: blue;
}
#NavBody {
height: 100%;
}
#NavLeft {
height: 100%;
float: left;
background-color: black;
width: 1px;
}
#NavContent {
height: 100%;
float: left;
background-color: green;
}
#NavRight {
height: 100%;
float: right;
background-color: black;
width: 1px;
}
I've run into a similar case in the past and all I was able to come up with was using javascript...
CSS (as far as I know) doesn't really have that dynamic capability that you are looking for.
I want to make a header div (like a banner) fixed only when the header is trying to go out of the screen as the user scrolls down. Is it possible to do without using JS? For an example in Facebook timeline, if we scroll down a banner floats up as soon as the page's header goes out of the screen. My question is, is it possible to do with only CSS?
In case it is not clear enough, I want to know whether a style "position: fixed" can be applied conditionally like when 80px of the page is scrolled.
Yes. You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.com is doing it.
Update [10/31/2013] - Techcrunch changed their UI recently so you cannot see this there anymore!
Check this demo: http://jsfiddle.net/WDnyb/2/
HTML
<div class="header">Header</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
Relevant CSS
.header {
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
position: relative;
height: 100px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
margin-top: 100px;
}
This can now be done properly and without javascript with position: sticky.
Refer to https://css-tricks.com/position-sticky-2/ for examples.
warning: At the moment of writing, it is not supported on IE11, opera mini, and android's stock browser: https://caniuse.com/#feat=css-sticky
It is not possible using css. You can do using JavaScript or jQuery. Because it need some conditions.
Html----included my content within
<header1>
..............
</header1>
JS
<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 200));
});
});
</script>
i have used above script to make a header fixed,its working fine in googlechrome not in firefox.....
I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;
http://throwbackhero.com/index1.php
The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.
I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.
Can this be done?
EDIT
Okay so clearly my original question was extremely confusing. Here is a picture;
So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...
The easiest way is simply using CSS:
height: 100vh;
Where 'vh' stands as vertical height of the browser window.
Responsive to resizing of brower and mobile devices.
Give body,HTML & main DIV height 100%. write like this:
body,html{height:100%;}
.parent{
min-height:100%;
width:400px;
margin:0 auto;
background:red;
}
Check this http://jsfiddle.net/3VUGt/
The answer from #sandeep is correct. The best way of controlling the most basic container of display in the browser is to control html/body.
Normally, I need the same structure as you design:
1. the content should stay inside the container without overflow scroll, and
2. the container should resize as 100% while the browser is resizing.
So the basic way of doing it is:
html, body {
height: 100%;
}
And I always set the basic container fit both height and width:
html, body {
width: 100%;
height: 100%;
}
NOTE: there could a margin/padding issue for some browser (as user agent stylesheet):
which add a style for some of basic component like body in default (e.g. Chrome 70.0.3538.102):
body {
display: block;
margin: 8px;
}
Check within the developer mode, if that happens, add margin override, this also works for padding:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
And if your page base component looks like:
<body>
<div id="div1">
my html content ...
</div>
</body>
You could just do:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
width: 100%;
height: 100%;
}
This always work for me. Hope it helps. And down here is what I guessed that the target you want to reach.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: relative;
width: 60%;
height: 100%;
background-color: rgb(255,125,125);
float: left;
}
#div2 {
position: relative;
width: 40%;
height: 100%;
background-color: rgb(125,255,125);
float: left;
}
<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>
Add overflow:auto to the wrapper element.
There is no complete CSS solution for this problem. This CSS "issue" has been known for many years. Since CSS has grown in functionality over the years, I thought there may be a complete CSS solution by now. But alas, there is not. I have tried many things and have searched high and low, and the issue remains the same.
To my knowledge, there are only 3 solutions that do not require 3rd party libraries: absolute positioning, faux colums (two-tone repeating background) and JS.
The only two solutions that appeal to me are: faux columns and JS. I prefer the JS solution, since it makes more use of CSS. With JS you don't have to re-work the background image if you want to change the column width or color later on. It is a more adaptable and re-useable solution. The only advantage I can see for creating faux columns is that your layout doesn't break if the client disables JS.
JS solution (wrapper not required): https://jsfiddle.net/Kain52/uec9cLe4/
var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }
JS solution (wrapper required): https://jsfiddle.net/Kain52/7udh55zq/
var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";
Explanation: If you use a div wrapper then you can assign it to the height of the wrapper. If you don't use a wrapper, then you can just set the height of the shortest side to the height of the longest side. If you know that your side menu bar will always be shorter than your content, then you only need two lines of code:
var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";
If you are okay with having some JavaScript run every millisecond on your page, and the content above the white area in question will always be the same pixel height, you could try something along the lines of this...
bodyLeadingFill = // put the size taken up by everything above the white div,
// including margin, padding, border, etc
function resizeElement(){
document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);
This is, of course, assuming that the content above the white box will always be the same size no matter the font or operating system or size of the window.
I didn't actually test this myself, but the concept should work. Look out for the comments that say where to put some info.