I have a header bar that is positioned using position:absolute; and I cannot seem to get it to not overlap my content.
Here is the html i'm using for my example:
<div class="ui-page ui-page-active">
<div class="ui-header">
<div class="ui-title ui-title-h1">
Page Title 1
</div>
</div>
<div class="ui-content">
Page Two
</div>
<div class="ui-footer">
<div class="ui-title ui-title-h3">
Page Footer 1
</div>
</div>
</div>
and here is my css
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.ui-page {
background-color: #bbb;
height: 100%;
width: 100%;
display: block;
position: relative;
}
.ui-page-inactive {
display: none;
}
.ui-page-active {
display: block;
}
.ui-header {
position: absolute;
top: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-content {
}
.ui-footer {
position: absolute;
bottom: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-title {
text-align: center;
color: #fff;
padding: 4px;
line-height: 150%;
}
.ui-title-h1 {
font-size: 1.5em;
font-weight: 900;
}
My end goal is to have a header bar always at the top, a footer bar always at the bottom and for the content to fill the centre. The content div does not actually need to fill 100%, I just don't want it to be blocked by either the header or footer.
An easy way would be to have either padding-top or margin-top (I'm not sure which) on .ui-content set to the height of your header, that would push .ui-content down so there isn't overlap.
If the header and footer are a fixed-height (like, for example "80px") then you can make the content absolute with the top-and-bottom margins (position:absolute;overflow-y:scroll;top:80px;bottom:80px;) and make the header and footer fixed (position:fixed;height:80px;top:0;left:0;right:0;overflow:hidden; for the header and position:fixed;height:80px;bottom:0;left:0;right:0;overflow:hidden; for the footer)
Something like that might work.
Related
I have a header as follow: logo + nav containing 4 links
I would like to arrange all this element next to each other at the top (that is working), but also to make them at equal distance of each other. The second part does not work, I don't manage to define the size of the a elements in % ...
I am using float:left to position all this element on top next to each other. I am using the css property width to make them occupy 20% each of the total top of the page.
<body>
<header>
<img src="mylogo.png" style="width:42px;height:42px">
<nav>
Welcome
About
Art Work
Events
</nav>
</header>
<h1>Title of the page</h1>
</body>
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
header {
width: 100%;
}
.logo {
float: left;
width: 20%;
}
nav {
float: left;
}
nav a {
width: 20%;
}
There is some space between the logo and the links, but the links does not arrange along the top at equal distance, they stay stuck to each other... I suppose it's because their width is relative to nav, which is not 100% as there is the logo. But I don't know how to define the size of these a elements relatively to the header that I fixed to be 100% of my page?
Here's my solution. I made some changes in your css and instead of float I used flex-box technique to align them. I made the header black to detect the header easily. You can change it in the css. Hope this solution will help you.
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
header {
height: 10vw;
line-height: 10vw;
width: 100%;
background-color: #000;
}
.logo img {
vertical-align: middle;
}
a {
display: inline-block;
height: inherit;
width: 20%;
text-align: center;
line-height: inherit;
vertical-align: bottom;
transition: all .33s ease-in-out;
}
a:hover {
background-color: white;
}
<body>
<header>
<img src="mylogo.png" style="width:42px;height:42px"><!-- -->Welcome<!-- -->About<!-- -->Art Work<!-- -->Events
</header>
<h1>Title of the page</h1>
</body>
I found out that the following CSS worked:
header {
width: 100%;
display: inline-block;
}
.logo {
float: left;
width: 20%;
}
header nav {
width: 80%;
float: left;
}
header nav a {
width: 20%;
float: left;
text-align: center;
}
I have trouble coding a 1px horizontal seperator line with a logo displayed in the center as pure CSS. Should look like this:
Divider with logo centered
There is a problem with multiple instances: When I add more dividers on a single page only one or two will be displayed with a line, the others will just display the logo.
A question about a centered logo was answered here - but none adressed the bug that happens with multiple instances: Divider with centred image in CSS?
Here is a adapted solution out of that discussion, fiddle below.
CSS:
body {
margin: 0;
background: white;
}
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
HTML:
<body>
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
</body>
The fiddle:
http://jsbin.com/delixecobi/edit?html,css,output
I totally changed the CSS. Give the .logo a position: relative and :after a position: absolute. You are using it for one single header. That's why it didn't work.
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
Preview
If you want the line not to cross or cut, use a negative z-index.
I found a solution also for my question how to get text centered within the div - thanks to web-tiki for his approach here: Line before and after title over image
In the JSBin I put all together and formatted / commented it a bit to make it easy to work with. You will find:
divider formats with img, text and text in multiple lines
stable in multiple instances
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
z-index: -1;
}
.logo {
position: relative;
/* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 20px;
/* also padding between line and logo */
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
.logotext {
width: 100%;
margin: 20 auto;
overflow: hidden;
text-align: center;
font-weight: 300;
color: green;
/* color text */
}
.logotext:before,
.logotext:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 20 0 -55%;
/* 2nd no: space text to line on the left */
vertical-align: middle;
border-bottom: 1px solid #ccc;
/* last: color line */
}
.logotext:after {
margin: 0 -55% 0 20;
/* last no: space text to line on the right */
}
span {
display: inline-block;
vertical-align: middle;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logotext">
somesome</div>
<div class="logotext">
somesome</div>
</header>
One major drawback to this solution is that it does not allow the width of the line to be defined to % of the main viewport.
So I have this straight forward page:
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">The content goes here</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
And I have this CSS to make the footer stick to the bottom of the page:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
}
.page-wrapper {
min-height: 100%;
margin-bottom: -340px;
&:after {
content: "";
display: block;
height: 340px;
}
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
And for illustation purposes, here is a codepen.
Now, this was all working fine, but my client has asked for a second footer, but this time it doesn't appear on all pages and it has to be within the .page wrapper.
Here is a codepen to illustrate this.
As you can see, the second footer has no way of attaching to the bottom of the page (above the main footer). I have tried lots of things like flexbox and absolute positioning, but I just can't get it to work.
Can anyone offer any solutions?
Once again, I need to point out that I can not change the location of the .view-footer.
If you want the following order:
Header
Content
view footer
footer
and you don't have a specific page length you need to have, you can just use regular divs (display: block) items to get everything one under another.
using blocks will allow you to make every element get the entire width of the screen, while every element appear below the previous one.
Here's a fixed version of your codepen.
If you want the footer to stick to the bottom of the content (lets say that the .page part of your site needs a certain fixed height), you can use absolute positioning only for the footer.
here's a codepen example for that :-)
I would use these settings on the footer:
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 340px;
And this to make sure nothing can be hidden under the footer (i.e. the full page content can be scrolled up from behind the footer):
.page { margin-bottom: 340px; }
This would include that second footer being scrolled up. If it also needs to be sticky above the first footer, give it also position fixed, plus bottom: 340px, and increase the bottom margin on the content accordingly.
So, If I get this right, You want a page that if the content is shorter than the viewport, then the footer sticks to the bottom. And in some pages, you have an additional footer, that has to stick above the original footer but it is not directly before it in the DOM, it is inside the element before it.
If your footers have a fixed height, then things are not so tough. In the first step, you have to set the .page-wrapper min-height to calc(100% - page-footer-height) which means:
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
That solves the sticky .page_footer problem.
Now, since the bottom of .page-wrapper will always be touching the top of .page-footer you can just place your .view-footer on it's bottom with position-absolute which, unfortunately, will hide the content of .page.
At this point, you have two options, either you add an additional element after the .view-footer as a placeholder to simulate the space, or you have to add a modifier class to the.page or some parent element to add a padding-bottom equal to .view-footer height. Since you have control of the server side code, I suppose that at least one of the options is possible.
Placeholder Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
.view-footer + .empty {
height: 120px;
}
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
<div class="empty"></div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
Modifier class Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.extra-footer .page {
padding-bottom: 120px;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
<div class="page-wrapper extra-footer">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
I got three absolutely positioned links. How do I display them next to one another? They should always be centered on the page so if one link is removed, the remaining two will center.
http://jsfiddle.net/Nk8YT/3/
HTML:
<header>
<div class="buttons">
<!-- Looks like this won't work:
Email
Guestbook
Donate-->
<!-- Instead we have to wrap them in "cells": -->
<div>
Email
</div>
<div>
Guestbook
</div>
<div>
Donate
</div>
</div>
</header>
<p>...</p>
CSS:
header {
position: fixed;
width: 100%;
top: 0;
}
header .buttons {
width: 100%;
text-align: center;
top: 20px;
}
header .buttons, header .buttons > div {
display: flex;
}
header .buttons a, header .buttons a:after {
position: absolute;
}
header .buttons a {
text-indent: -999px;
height: 50px;
width: 50px;
background: white;
border: 1px solid black;
}
header .buttons a:after {
position: absolute;
content:"";
top: 0;
left: 0;
height: 50px;
width: 50px;
}
header .buttons .email:after {
background: url(http://www.animatedgif.net/email/anim0005-1_e0.gif) no-repeat;
}
header .buttons .guestbook:after {
background: url(http://www.animatedgif.net/lipsmouth/kissing_e0.gif) no-repeat;
}
header .buttons .donate:after {
background: url(http://www.animatedgif.net/money/10rotate_e0.gif) no-repeat;
}
First off, you forgot to position your buttons, this is why your pseudo elements are overlapping each other. So add:
header .buttons a{
position: relative;
}
To center them, use justify-content on the flex container:
header .buttons{
justify-content: center;
}
http://jsfiddle.net/DnvXt/
Second, are flexible boxes necessary here? Because your buttons have fixed sizes, they don't appear to need flexing, do they? Try resizing the window, make it smaller, and you'll see that they will shrink. To prevent that you can do flex: none;, but then what's the point of using flex? :)
(without flex: http://jsfiddle.net/bXdGF)
I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/