Good morning everyone!
I was hoping if any you masters would be able to assist - I have a div on a site I am building which has been applied with a CSS of "height: 100%" and been given the "display: table" property. There is another div within this div with a "display: table-cell" and a "vertical-align: middle". However, this code is not centering vertically? Additionally, I have a "margin-left: auto" and a "margin-right: auto" applied yet it does not center horizontally either as it should - any thoughts?
I have 4 animations on the page but the one I am working on right now will only display for mobile phones, so you will either need to use this (http://mobiletest.me/#d=iPhone_5_portrait&u=http:// energyamplified.co.za/home.php) or make sure your view port when visiting (http:// energyamplified.co.za/home.php) is within 227-449 pixels wide.
The CSS:
#animation_wrapper {
height: 100%;
display: table;
}
#media only screen and (min-width: 227px) and (max-width: 449px) { /* Very Small Animation */
div #frameContainer_very_small {
display: table-cell;
vertical-align: middle;
padding-top: 25%;
margin-left: auto;
margin-right: auto;
}
div #frameContainer_very_small iframe {
width: 100%;
height: 100%;
display: block;
}
}
The HTML/JS (which in this viewport, the css elsewhere on the site loads the iframe "animation_very_small.html":
<div id="animation_wrapper">
<div id="frameContainer">
<script type="text/javascript">
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation.html\"></iframe>"
var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"
var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\"> </iframe>"
var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\"> </iframe>"
}
</script>
</div>
<div id="frameContainer_medium">
</div>
<div id="frameContainer_small">
</div>
<div id="frameContainer_very_small">
</div>
</div>
Your time and assistance would be greatly appreciated.
Kind regards,
Byron
Okay, one of the other divs was causing an issue and after I added the height as suggested, it is working now. Thank you for your direction Mr Lister - feel free to add this as an answer if you want me to mark it for you.
Related
I have three div's.
the first two are fixes width,but there width should not be set to permanent size because it could change. (base of the length of text that is there)
then next to those two I have a fluid div that will change his width dynamically when the user change his window size.
how can I set this kind of structure to work? even with the use of javascript
thanks.
I don't think you can have fixed width divs that resize dynamically unless you use javascript. Have you played around with min-width and max-width css attributes?
Have a look at this demo:
for a markup like this:
<div id="contentwrapper">
<div id="contentcolumn">
...
</div>
</div>
<div id="leftcolumn">
...
</div>
<div id="rightcolumn">
...
</div>
CSS
#contentwrapper {
float: right;
width: 100%;
margin-left: -430px;
}
#contentcolumn {
margin-left: 430px;
}
#leftcolumn {
float: left;
width: 230px;
background: #C8FC98;
}
#rightcolumn {
float: left;
width: 200px;
background: #FDE95E;
}
An example: http://jsfiddle.net/sw9422oy/
IF you don't want to set a fixed width then you should use a fluid-fluid-fluid approach like this one: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/
I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.
From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/
First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.
Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}
You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.
I have a div which contains 2 divs, one has fixed height.
I want to make sure that the 2nd div's height is exactly as much as the height of the container div minus the other div's height. This height can't be manually set because it's often resized.
<div id="container" style="height: 50%">
<div id="header" style="height: 30px;">
</div>
<div id="content">
</div>
</div>
i have tried with jquery on resize but i think i wrote something wrong:
$(document).on("resize", "#container", function (event) {
$('#content').height($('#container').height()-$('#header').height());
});
Is there any way (Javascript, CSS) to achieve this?
An alternative to the jQuery method is CSS Flexbox:
#container {
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
See the demo. Unfortunately, this will only work in browsers supporting the latest Flexbox syntax. (http://caniuse.com/#search=flexbox) Backward compatible code is possible using old syntaxes as well, but will be sightly more involved. See David Storey's article at http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ for more on how to do that.
Your main problem seems to be that you have to size the element initially and then keep listening to the resize event:
function handleResize() {
$('#content').height($('#container').innerHeight()-$('#header').height());
}
$(window).on("resize", handleResize);
handleResize();
Also, the resize event should be attached directly to the window.
Otherwise, I recommend the use of innerHeight() for the container as that takes into account padding.
Also I made some fixes to your CSS for this to fully work:
#container {
position: absolute;
width: 100%;
height: 50%;
}
See full fiddle here: http://jsfiddle.net/kjcY9/1/
I have a pure CSS solution for you,
Check out that Working Fiddle
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
CSS:
#container {
height: 300px; /*Whatever fixed height you want*/
}
#container:before {
content:'';
float: left;
height: 100%;
}
#header {
height: 30px;/*Whatever fixed height you want, or not fixed at all*/
background-color: red;
}
#content {
background-color: blue;
/*No height spesified*/
}
#content:after {
content:'';
clear: both;
display: block;
}
so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/
I have a page, where I'm showing images side by side according to the category they belong to, each image array begins with the category it belongs to. Images vary in their width & height, but are put into a div with an absolute height of 330px.
CSS:
.front-index {
margin: 0 1em 0 2em;
}
.front-work {
margin: 0 2em 2em 0;
display: table;
width: 66px;
position: relative;
height: 330px;
background-color:#f0f0f0;
}
.front-work img {
margin: .3em 0 .3em 0;
}
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.wraptocenter * {
vertical-align: middle;
}
.front-index,
.front-work {
float: left;
}
HTML:
<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div>
<div class="front-work">
<div class="wraptocenter">
<img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/>
</div>
</div>
<div class="front-work">
<div class="wraptocenter">
<img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/>
</div>
</div>
…
JSFIDDLE: http://jsfiddle.net/rCAKa/9/
I'd like to align the text to the same line as the first image on the right.
What I had in mind, is that may-be this should be done in jquery. Ie. somehow measure the image distance from the top inside the .front-work div and then assign the value to the .front-index div as an inline code (top: whatever px ).
Maybe someone of you have faced this kind of problem and know a solution to this kind of problem? CSS or JS.
In my humble opinion I don't think that what you're doing is possible through CSS - it requires some simple JavaScript trickery because you have to know the relative position (from the top of the container) of the first image on the right in order to position the text - something which CSS isn't quite designed for.
The strategy in JS would be:
Loop through each element with text that you want to position
Fetch the vertical top offset of the first image to the right (relative to containing parent)
Set top padding matching to top position of image. Alternatively, you can set the top position, paddings or margins of the child elements, or other ways to reposition the text.
$(document).ready(function() {
$(".front-index").each(function() {
var fromTop = $(this).next().find("img").position().top;
$(this).css({
"padding-top":fromTop
});
});
});
I have forked your fiddle, and you can see it in action here - http://jsfiddle.net/teddyrised/LT54V/1/
p/s: On a related note, .wraptocenter * { } is probably not the best (as in, most efficient) selector out there, because if you have many child elements in the element (who may or may have even more child elements), CSS will have to iterate through all of them. Instead, try using .wraptocenter > * { } or just .wraptocenter img { } :)
I first tried to solve the problem using css. After a while I figured out the following logics:
Create a div with the same height as the cell on the right with the display set as table
Make a table-cell div in the first one that centers vertically
In this div make another subdiv with the same height as the image.
The HTML code is then this:
<div class="front-index">
<div class="front-index-inner">
<div style="height:250px;">
<p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p>
</div>
</div>
</div>
and as my CSS part this:
.front-index {
margin: 0 1em 0 2em;
display: table;
height: 330px;
overflow: hidden;
}
.front-index-inner {
display: table-cell;
width: 100%;
vertical-align: middle;
}
You can see the result over here: http://jsfiddle.net/rCAKa/10/
I hope this brings a solution to you that is clear, understandable and useful.
Greetings,
Jef