I have a header containing several elements. The most important parts are a slider, a banner-overlay and 3 so called 'pijlers'. The slider and banner-overlay respond perfectly but the 'pijlers' don't. They are in the right position for when the screen width is full width but when you resize the screen to a smaller width they don't move along with it to the left so they fall of the screen.
Please don't mind the pictures used, it's just for demo purposes
Fiddle: http://jsfiddle.net/kzv8L6yn/
CSS
body {
width:100%;
max-width:1000px;
margin: 0;
height:auto;
}
header {
width:100%;
height:600px;
}
.headerslider {
width:100%;
height 100%;
:
}
.site-navigation {
width:100%;
}
#custom-login {
float:left;
margin-left:25px;
}
.main-navigation, .headerslider, #banner-overlay, #pijler-wrapper {
position : absolute;
top : 0;
left : 0;
}
#banner-overlay {
z-index : 10;
width:100%;
}
#pijler-wrapper {
z-index : 10;
width:100%
}
.pijler {
background-color : white;
width : 27%;
position : absolute;
opacity : 0.8;
}
.pijler:hover {
opacity : 1.0;
}
#safe {
top : 170px;
left : 900px;
}
#durable {
top : 252px;
left : 900px;
}
#innovative {
top : 334px;
left : 900px;
}
HTML
<div id="page" class="site">
<header class="site-header" role="banner"> <img src="http://tsk.nu/en/wordpress/wp-content/themes/atahualpa373/images/header/TSK-header1_1280x150.gif" id="banner-overlay"/>
<div id="pijler-wrapper"> <img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="safe"/>
<img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="durable"/>
<img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="innovative"/>
</div>
<div class="headerslider">
<img src="http://www.markbsplace.net/images/CloudsOnTheHorizon-1280-x600.jpg" id="headerslider" />
</div>
</header>
<div>
You have the piljer positioned absolutely, so no matter what you do they will always be the exact distance from the left (900px) of the container they are in or in fact the closest container not statically positioned.
In order for them to respond, you should either use percentage positioning or if they are supposed to hug the right hand side, position them from the right instead, depending on what type of effect you are trying to achieve. For example:
#durable {
top : 252px;
right : 50px;
}
Related
I'm trying to get an element to "float" between two other elements by using the position : sticky attribute.
But I'm not getting the desired effect, and I can't figure out why.
I want copy to float between the bottom of upper and the top of lower.
Here is a visual illustration of what I'm trying to achieve
.page {
background-color : grey;
height : 1000px;
position : relative;
}
.container {
background-color : red;
position : absolute;
top : 35%;
height : 300px;
}
.upper {
height : 50px;
}
.copy {
position : sticky;
bottom : 0px;
}
.lower {
height : 50px;
position : absolute;
bottom : 0px;
}
<div class="page">
<div class="container">
<div class="upper">
<h1 class="hero">This is the title</h1>
</div>
<div class="copy">This should float between the upper and lower div</div>
<div class="lower">
<button class="cta">This is a CTA</button>
</div>
</div>
</div>
You're actually really close. You just need to change to use top instead of bottom in the .copy class.
CSS:
.copy {
position: sticky;
top: 16px;
}
Also note that the top value will be the position where the element becomes sticky, so if you want to scroll when it is in the middle of the window, use top: 50vh;.
Update:
It's surprisingly tricky to get position: sticky to work with bottom: 0, but here's a working example.
I want to create responsive popup banner with close button here is my simple scenario:
<div class="banner">
<img src="...">
X
</div>
And my CSS:
.banner img{
max-width:100%;
max-height:100%;
position:absolute;
}
.close-btn{
position:absolute;
right:0;
z-index:2;
color:red;
background:#000;
padding:4px;
}
As you can see I stretch image depending on width and height.
Problem: I want close-btn to stick to the right side of the image and overlap it. To solve this the banner must be the same width as the image. If banner has position:absolute its width and height of course is 0.
Is it possible to achieve only with CSS?
Here is fiddle: http://jsfiddle.net/fjckls/qq590xz5/
I need image to be responsive to width and height
To make your image fully width AND height responsive, first off, you need to alter your units. You're currently using %'s which is all well and good, but for the 'fully height responsive' concept, the % units aren't much help.
Instead, you should look into using vh (view-height) and vw (view-width) units, since these are for the actual viewport that the user can see currently.
In order to position your 'x' over the top right of your image, you're going to have to alter your css slightly.
You could possibly include a css rule for your banner, first off. Something like:
.banner {
position:relative;
display:inline-block;
}
Whilst removing the 'position:absolute' rule from your image, since now your banner div will be the size of your image (not the default '100% of screen' that divs are set to originally).
This leaves us one problem, you haven't actually set where abouts you want the 'x' to appear vertically, so it will default to 'where it would position normally', which, in this case, would be below the image. To tackle this, you would need to add a top: or bottom: declaration to your 'x' class, and in my case, i've chosen to set it to the top (top:0;).
The overall fiddle can be shown here
or here:
.banner img {
max-width: 100vw;
max-height: 100vh;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
z-index: 2;
color: red;
background: #000;
padding: 4px;
}
.banner {
position: relative;
display: inline-block;
}
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> X
</div>
I have updated the link
http://jsfiddle.net/qq590xz5/3/
<div class="banner">
<div style="position:abolute;">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
</div>
.banner img{
max-width:50%;
max-height:100%;
}
.close-btn{
position:absolute;
z-index:2;
color:red;
top:1%;
background:#000;
padding:4px;
}
Have a look
Thanks
try this..
Html
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
CSS
.banner{
position:relative;
width:200px;
}
img{
max-width:100%;
}
.close-btn{
position:absolute;
right:0;
top:0;
z-index:1;
color:red;
background:#000;
padding:4px;
}
Fiddle Demo
I found a solution that keeps the image centered horizontally and the x button on the top right of the image. It involves:
1) Making the .banner absolutely positioned, with margins from each window edge. This centers the entire .banner, however you might want to use fixed position if you need it to scroll along with the user's viewport.
It'll work as long as there aren't any other positioned elements as its parents.
.banner {
position: absolute;
top: 5%;
left: 25%;
right: 25%;
bottom: 5%;
}
2) Making a thing that sticks around the image, which will serve as a positioning guide for the little X.
<div class="shrinkwrap">
<img src="...">
X
</div>
.shrinkwrap {
/* shrink-wraps this div around its content;
as a side-effect, lets this div be centered with text-align: center; */
display: inline-block;
/* new positioning context! */
position: relative;
/* keeps the responsiveness */
max-width: 100%;
height: 100%;
}
3) Positioning the shrinkwrapper to always be in the center of the .banner.
.banner {
/* ... */
text-align: center;
}
.close-btn {
/* ... */
top: 0;
}
The finished version of this is here: http://jsfiddle.net/boxmein/qq590xz5/5/
What I want is for the image to scale down as the browser window scales. Would making it a background image be a better solution?
#home-feature5 {
height:618px;
width:1210px;
position:relative;
}
.photo {
bottom: 37px;
position: absolute;
z-index: 1;
left: 20px;
}
.photo img {
max-width:100%;
height:auto;
}
.bg {
background-color:#f88b5c;
width:100%;
height:95px;
bottom:0;
left:0;
position:absolute;
}
Fiddle: http://jsfiddle.net/9LLr7m6w/
I think you should make the whole site responsive:
#home-feature5 {
height:618px;
width:1210px;
position:relative;
max-width: 100%;
}
fiddle
Set the width attribute of the image as a percentage instead of fixing it. Doing so, it should be able to scale accordingly.
For example, let’s say you have an image that has a natural size of 1210px x 618px in a 1400px wide document. Below 1400px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (1210 / 1400 ) × 100 = 86.43%
When I want the image to scale down with the page I do something like this.
body{
width=100%;
}
#home-feature5 {
height:618px;
width:1210px; //might want to change this to a percentage
position:relative;
}
.photo {
position: absolute;
left: 20px;
width:50%; //the div will be 50% of its container (#home-feature5)
}
.photo img {
width:100%; // will be 100% of its container (.photo)
}
<!-- with html something like this -->
<div id="#home-feature5">
<div class="photo">
<img alt="whatever missing" src="whatever.png">
</div>
</div>
I have an image that is bigger than its container div. When the browser/screen resizes, it should make the image bigger or smaller but always keeping the center of the image centered inside the div. One example of this is the following website: http://www.qdoba.com/ . They have their images centered as you resize the screen making it very well responsive. What I have at the moment only makes it resize horizontally but not vertically. This is what I have so far:
.swiper-container {
width: 100%;
height: 300px;
color: #fff;
text-align: center;
overflow: hidden;
}
.slide{
width:100%;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
Its pretty simple. [Jump to the end of the answer for the updated Fiddle]
HTML
<div class="slide">
<span class="Centerer"></span><div class="Centered">
<img src='http://imageshack.us/a/img19/3207/15p0213.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
CSS
*
{
margin: 0;
padding:0;
}
html, body
{
height: 100%;
}
.slide
{
text-align: center;
height: 100%;
width: 100%; /*not really needed*/
}
.Centerer
{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*you don't always want your centered stuff to be 100% width, so its in a different rule*/
.Content
{
width: 100%;
}
.Content img
{
max-width: 30%; /*so you can see the responsive alignment and size*/
}
If you don't set any height to the Slide, it will always have the exact height of its content, so it will look like there is no vertical alignment.
Check out this Working Fiddle
EDIT
I didn't understood you correctly.
Check out this New Fiddle
<div class="slide">
<img src='images/test.jpg' />
<div class="title">Slide 1</div>
</div>
<style>
.slide{
width:100%;
display:table-cell;
vertical-align:middle;
height: 200px; /* you have to make height static */
}
.slide img{
width:100%;
}
</style>
Ok I finally got an answer to my question. Perhaps I was not explaining it correctly but what I initially needed was to make sure the center of my image was vertically centered inside a div. The answer could not be done with just HTML and CSS but javascript needed to be implemented. so here it is CHECK OUT FIDDLE:
<style>
.swiper-container {
width:100%;
}
.slide{
width:100%;
max-height: 200px;
overflow: hidden;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
<script>
$(document).ready(function(){
var imageHeight, wrapperHeight, overlap, container = $('.slide');
function centerImage(){
imageHeight = container.find('img').height();
wrapperHeight = container.height();
overlap = (wrapperHeight - imageHeight)/2;
container.find('img').css('margin-top', overlap);
}
$(window).bind("load resize", centerImage);
});
<script>
I had a very similar problem to you, also for a responsive slider component that I was building.
My requirements:
The slider container must have a 100% width against the viewport and it must have a fixed height.
The images within the slider must stretch to the full width of the slider.
The images must maintain their aspect ratio so they are not distorted.
The images must always be vertically aligned to the middle of the slider container to create a "center crop" effect for any of the image which doesn't fit within the restricted height of the slider container.
I managed to achieve this without the use of any javascript based on principles from the following smashing magazine post: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2
Here is a generic form of my html, without any noise, to illustrate how to solve this problem:
<div class="container">
<img src="http://lorempixel.com/640/480/animals/1" />
</div>
And here is the minimal css required:
.container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 100%;
}
You can see a fiddle of this in action here: http://jsfiddle.net/8kjfasbt/
It's a very basic implementation, focusing on the problem, but you could easily take this and drop it into a slider implementation and add fancy media queries for some extra effect.
You could of course modify the CSS to give the image other dimensions, pixel or percentage, it would still center. :)
On my page I have 3 dividers, for a header, content, and footer. I want to make my iframe inside my content divider stretch to the screen height, along with the divider that contains it (minus the height of the header and footer). How do I do this?
You can absolutely position your header/content/footer divs and relatively position the iframe within the content div:
HTML--
<div id="header"></div>
<div id="content">
<iframe></iframe>
</div>
<div id="footer"></div>
CSS--
#header {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100px;
background : red;
}
#content {
position : absolute;
top : 100px;
bottom : 100px;
left : 0;
width : 100%;
background : green;
}
#content > iframe {
position : relative;
width : 100%;
height : 100%;
background : purple;
}
#footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 100px;
background : blue;
}
Here is a jsfiddle: http://jsfiddle.net/jasper/dghW4/