Hi is it possible to fix the logo position when #body is riched. Basically I would like to do something like this to have logo which is in the middle of the front page and when scroll down the logo to move as well and to get smaller until rich the #body then it has to stack on top like fixed menu.
Here is a fiddle [http://jsfiddle.net/jaQFZ/200/][1]
Code is like:
HTML
<html>
<body>
<header>
<div data-0="top:40px;" data-600="top:1100px;width:50px;" id="logo"> Logo </div>
</header>
<section id="body"> Body </section>
</body>
</html>
CSS
body, html{
height:100% !importatn;
}
header{
position:relative;
height:100%;
background:#c00;
}
#logo{
position:absolute;
margin:0 auto;
border:1px solid;
width:100px;
height:100px;
margin-left:50%;
}
#body{
background:#ccc;
height:500px;
}
JS
skrollr.init()
Thanks for any help.
Related
I want to build a page in three sections:
A header of fixed height
A main section that is liquid
A footer of fixed height
I want the page to have a minimum height so that the bottom of the footer is flush with the bottom of the window. I want the main section in the middle to stretch, even when the contents of the main section are too short.
I know I could probably do this with JavaScript but I'd prefer to use a CSS solution if there is one.
I've tried various versions of the following code, but the main section is only expanding as far as its contents will push it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body, header, main, footer {
width:100%;
display:block;
}
body{
display:block;
position:relative;
height:100%;
min-height:100%;
padding:0;
margin:0;
}
header{
background-color:#ccc;
height:100px;
}
footer{
height:100px;
background-color:#ccc;
}
main {
border:1px solid #f00;
}
#wrapper{
height:100%;
min-height:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</div>
</body>
</html>
I do believe something like this would work. Demo
<div class="container-main">
<div class="header">header</div>
<div class="wrapper">
<div class="container-fluid">
<div class='one '>one</div>
<div class='two '>two</div>
<div class='three '>three</div>
</div>
</div>
<div class="footer">footer</div>
</div>
CSS:
html, body {
color:#fff;
width:100%;
height:100%;
margin:0;
}
.container-main {
display:table;
width:100%;
height:100%;
box-sizing:border-box;
background:#efefef;
padding:4px;
border:1px solid red;
}
.wrapper {
display:table-row;
height:100%;
}
.container-fluid {
display:table-cell;
padding:10px;
background:#e1e1e3;
border:1px solid blue;
}
.one {
background:#888;
}
.two {
background:#666;
}
.three {
background:#555;
}
.one, .two, .three {
height:80px;
}
.footer {
background:#000;
display:table-row;
}
.header {
background:#000;
display:table-row;
}
I can't seem to center my image slider, seems like an easy fix but I can't get it to center dead in the middle of my page (centered left & right, centered top and bottom) Any suggestions?
The image slider is #logo-and-slider in the CSS
Heres the jsfiddle: http://jsfiddle.net/gZDVL/13/ (thanks to #MaggiQall)
And here is a live link to it: http://jtcraddock.ie/boards/
I don't understand.
Is this your desired result?
<div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/2.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/3.jpg" alt="1"/></div>
I closed your img-tags. with />
http://jsfiddle.net/gZDVL/2/
I am not very sure about whether you want to include the logo in the content to be centered. I have shown the idea below. I have added some borders to clearly display how the elements are laid out. If you don't want to include logo remove it from the HTML structure. Basically what I have done is placed the content in a table-cell element with the content center aligned horizontally with middle vertical alignment. That places the content at "dead center" as you wanted :-) See the fiddle at http://jsfiddle.net/linuxexpert/WYadL/
HTML:
<html>
<body>
<div class="outer-box">
<div class="inner-box">
<div class="innermost-box">
<div class="logo">
Logo
</div>
<div class="controller">
<
</div>
<div class="scroller">
Image scroller
</div>
<div class="controller">
>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width:100%;
height:100%;
}
.outer-box {
display:table;
width:100%;
height:100%;
}
.inner-box {
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
border:1px solid red;
text-align:center;
}
.innermost-box {
display:table;
height:50%;
width:80%;
margin:0px auto;
border:1px solid blue;
}
.innermost-box > * {
display:table-cell;
height:100%;
vertical-align:middle;
border:1px solid green;
}
.logo {
width:40%;
}
.controller {
width:5%;
}
.scroller {
width:50%;
}
The footer should remain in the bottom even when i re size the page. In my case footer is overlapping the contents when i re size the height of the page.
.body{
background: #00b7ea; /* Old browsers */
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
height: 100%;
}
.container{
min-height:100%;
position: relative;
}
.formContainer{
width:30%;
height: 100px;
background-color:#fff;
margin:auto;
padding-top: 0;
border-radius:5px;
box-shadow:5px 5px 55px #9999;
padding-bottom:60px;
}
.footer{
position:absolute;
width:100%;
bottom:0;
height:60px;
background-color:#333;
}
<body class="body">
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
<footer class="footer">
</footer>
</div>
</body>
You should move footer tag out of the div
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
</div>
<footer class="footer">
</footer>
DEMO
Add height:100% to html and body, then only your container takes height 100% and leave your html code as it is.
html, body{
height:100%
}
DEMO 2
P S - I think .body in your CSS is a mistake, it should be only body
What you need is Sticky Footer, there are couple of ways to implement it.
http://css-tricks.com/snippets/css/sticky-footer/ (using CSS)
http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/ (using jQuery)
try this
http://jsfiddle.net/WPYCJ/
.footer{
position:fixed;
width:100%;
bottom:0;
height:60px;
background-color:#333;
}
Try this. Thanks
CSS
.body{
background: #00b7ea; /* Old browsers */
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
height: 100%;
}
.container{
height:90%;
background-color:#fff;
}
.formContainer{
width:100%;
height: 100px;
margin:auto;
padding-top: 0;
border-radius:5px;
box-shadow:5px 5px 55px #9999;
padding-bottom:60px;
}
.footer{
width:100%;
bottom:0;
height:5%;
background-color:#333;
}
HTML
<body class="body">
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
</div>
<footer class="footer">test
</footer>
</body>
I Had the same problem, I used this code :
<script>
var top = $(document).height() - $("footer.main-footer").height() ;
$("footer.main-footer").css('top' , top);
</script>
Change .main-footer to your footer's class.
I'm currently having difficulty getting the footer of my website to work properly. I think it's because of my fixed positioned header and container divs but I need them to be fixed to stay on top when scrolling. I'm not sure how to take this into account for the footer to appear at the bottom when the container div is empty.
HTML:-
<body>
<div id="wrapper">
<div id="header">
<div id="headerContent">
</div>
</div>
<script>
$(document).ready(function() {
$('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );
});
</script>
<div id="navbar">
<div id ="navbarContent">
</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerContent">
</div>
</div>
</div>
</body>
</html>
CSS:-
#container{
width:960px;
margin:auto;
overflow:hidden;
}
#wrapper{
min-height:100%;
position:relative;
}
#navbar{
width:100%;
height:40px;
margin:auto;
background-color:#4e8885;
position:fixed;
top:120px;
padding:0px;
}
#header{
width:100%;
height:120px;
margin:auto;
background-color:#8bbcba;
position:fixed;
top:0px;
}
#footer{
width:100%;
min-height:20px;
margin:auto;
background-color:#8bbcba;
position:absolute;
bottom:0;
left:0;
}
In your example using fixed heights, it's not necessary to dynamically calculate the margins. You should just be able to set the margins of container to match the totals of your headers and footer for margin-top and margin-bottom respectively. See this jsFiddle: http://jsfiddle.net/9Jdrr/
If you need to dynamically calculate it, you should be able to do it based on this arrangement.
Sorry, searching has returned tons of results, but nothing that matches my problem exactly. Seems like SO is drowning in div-height problems. :-(
I have the following test layout:
<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
body {
margin:0;
}
div {
width:100%;
}
.content {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
width:680px;
}
#one {
height:100px;
position:relative;
background-color:#0000FF;
}
#two {
position:relative;
background-color:#00FF00;
height:100%;
min-height:400px;
}
#three {
height:70px;
background-color:#FF0000;
bottom:0;
position:absolute;
}
#oneone {
height:100%;
background-color:#838383;
}
#twotwo {
height:400px;
background-color:#EEFF47;
}
#threethree {
height:100%;
background-color:#400080;
}
</style>
</head>
<body>
<div id="one">
<div class="content" id="oneone"></div>
</div>
<div id="two">
<div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
<div class="content" id="threethree"></div>
</div>
</body>
</html>
I want the div one and three to stay in top and bottom, div twotwo should expand in height to accommodate my pagecontent, and expand when the content is more than the page height, therefore pushing the div three down and cause scrolling.
Is this possible without JavaScript? If so, what's the CSS solution to this?
Thanks!
Javascript is needed for this. When you have a header and footer height and you want the middle to have 100% height, the result will be full page height + header height + footer height. So you'll end up with scroll bars to view the entire page. If you want everything to fit in the same window, then you we need to use javascript to detect how much middle space is left and assign height accordingly.
To detect middle height with jQuery, you can do
var one = $('#one').height(),
three = $('#three').height(),
two = parseInt($(window).height() - three - one);
alert(two);
This will give you the height that is left for the middle part which is <div id="two"> in your case.
See jQuery code in action at http://jsfiddle.net/Ppw5y/. Notice that when you expand the window and you run the code again, you will have a different content height.
How about setting height:auto; for #two and #twotwo?
I think it can be done without script. Check this code out.
<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
body {
margin:0;
}
div {
width:100%;
}
.content {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
width:680px;
}
#one {
height:100px;
position:relative;
background-color:#0000FF;
}
#two {
position:relative;
background-color:#00FF00;
/*changed*/
min-height:400px;
}
#three {
height:70px;
background-color:#FF0000;
bottom:0;
position:relative; /*changed*/
}
#oneone {
height:100%;
background-color:#838383;
}
#twotwo {
/*changed*/
min-height:400px;/*changed*/
background-color:#EEFF47;
}
#threethree {
height:100%;
background-color:#400080;
}
</style>
</head>
<body>
<div id="one">
<div class="content" id="oneone"></div>
</div>
<div id="two">
<div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
<div class="content" id="threethree"></div>
</div>
</body>
</html>
I have added a /* changed */ wherever i have changed your code.