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/
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 try to implement the following effect by using the :before but I have problem with the z-index.
My code is like this:
.container {
background : #FFF;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item:before {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
The problem now, is that the container seems to cover the :before element.
For the moment I don't mind about the "MIDDLE AGE" item.
How can I overcome this issue ?
Add the following CSS styles:
.container {
position: relative;
z-index: 1;
}
Code in JSfiddle: https://jsfiddle.net/5cq5576k/
Try this:
.container {
background : #FFF;
position: relative;
float: left;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item-border {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item-border"></div>
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
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;
}
Here is my JSFiddle thus far.
What should I do to make sidebar stretch vertically (height) on the entire page? Right now it stretches to the original height of web browser window, but when there is more content inside the container, the sidebar does not stretch with it.
HTML:
<div class="main-content">
<div class="sidebar">
menu
</div>
<div class="content">
... a bunch of content ...
</div>
</div>
CSS from the above JSFiddle:
html, body {
width: 100%;
height: 100%;
}
.main-content {
width: 100%;
height: 100%;
}
.sidebar {
width: 100px;
float: left;
background-color: #000;
color: #fff;
min-height: 100%;
}
.content {
width: 200px;
float: left;
}
I don't think there is a "pure" css solution for this issue. The problem is that your sidebar is 100% height of it's parent container. And it's parent container main-content is 100% height of it's parent (the window). So for your content to be the same height as main-content's inner content you would then have to set a pixel height value to main-content.
However you could easily resolve this with jquery.
var sidebar = $('.sidebar');
var content = $('.content');
if (content.height() > sidebar.height() )
sidebar.css('height', content.height());
else
sidebar.css('height', sidebar.height());
Fiddles:
http://jsfiddle.net/up7Zg/29/ and http://jsfiddle.net/up7Zg/30/
try this
.sidebar {
position: absolute;
top: 0;
bottom: 0; /* this line, and the one above, confer full-height */
left: 0;
width: 30%;
background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}
I want this result Demo
instead this Demo
Demo jsFiddle
How to move the div menu to end right side of div Container , So the menu will be on the right side.
I dont want position absolute because when you change the width size of the window page, the menu will hide the background of the image background Frog+Snake.
Many Thanks.
The code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {
background-color : black;
background-image : url('pic/bg1.png');
background-size : 100% 700px;
background-repeat : no-repeat;
margin : 0;
margin-left : -100px;
padding : 0;
}
.imageContainer {
position : relative;
margin-left : auto;
margin-right : auto;
top : 10px;
background-size : 1000px 500px;
width : 1000px;
height : 500px;
overflow : hidden;
}
#Container {
background-image : url('pic/1/3.jpg');
background-repeat : no-repeat;
z-index : 0;
}
.layer {
position : absolute;
width : 1000px;
height : 500px;
padding : 0;
margin : 0;
}
#parrot {
z-index : 5;
}
#frog_snake {
z-index : 4;
}
#fly {
z-index : 3;
}
#crok {
z-index : 2;
}
#leafvarible {
position : absolute;
padding : 0;
margin-left : auto;
margin-right : auto;
display : block;
top : 10px;
left : 100px;
width : 1px;
height : 1px;
z-index : -1;
}
#pos {
top : 50px;
left : 10px;
color : white;
font-size : 16px;
}
#status {
position : absolute;
top : 350px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status1 {
position : absolute;
top : 375px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status2 {
position : absolute;
top : 400px;
left : -100px;
color : red;
font-size : 20px;
padding-left : 120px;
}
#fps_count {
position : absolute;
top : 10px;
right : 10px;
width : 150px;
font-size : 20px;
color : white;
font-family : 'Happy Sans', cursive;
border : red solid 1px;
}
#loading {
background : blue;
background-image : url('pic/FrogGameBackGround.jpg');
background-repeat : no-repeat;
background-size : 1000px 500px;
z-index : 10;
}
#loading > #barCont {
width : 400px;
height : 20px;
position : absolute;
top : 300px;
left : 50%;
margin : -10px 0 0 -200px;
background : black;
}
#loading > p {
position : absolute;
top : 275px;
left : 50%;
z-index : 11;
}
#bar {
width : 0;
height : 20px;
position : absolute;
left : 0;
background : #F3FF67;
}
#menu {
float : left;
width : 200px;
height : 500px;
position : relative;
left : 10px;
top : 0;
background-image : url('pic/menu.png');
border : red solid 1px;
clear : both;
}
#StartButton {
position : absolute;
right : 25px;
top : 300px;
width : 200px;
text-align : center;
color : white;
font-size : 35px;
text-shadow : 4px 4px 4px black;
cursor : pointer;
}
#speaker {
position : absolute;
right : 150px;
top : 350px;
width : 50px;
}
</style>
</head>
<body>
<div id= "Container">
<canvas id="A1" class="layer"></canvas>
<canvas id="A2" class="layer"></canvas>
<canvas id="A3" class="layer"></canvas>
<canvas id="A4" class="layer"></canvas>
</div>
<div class="imageContainer" id="loading">
<p id="loadText">Loading...</p>
<div id="barCont">
<div id="bar"></div>
</div>
</div>
<canvas id="A5"></canvas>
<div id="menu">
<!-- Button Start Game -->
<input id="StartButton" type="button" value="Start Game"/>
<!-- Loading sounds -->
<div id="speaker">speaker</div>
</div>
<script></script>
</body>
</html>
use position relative instead of absolute and use float:right; and/or float:left;
on both your main page and on your menu.
also what is that A5 thing for?
Remove all position property from #menu and set it to display:flex; and later add following margin margin:0 0 0 auto; . This will make menu align to right side no matter what is screen size is.