The document has a structure like this :
<body>
<div>
<div>
content here
</div>
</div>
<div class="page">
<div class="nav-bar">
<div class="nav-bar-inner padding10" >
<span style="text-align: center;" >
2015, XXX © by <a class="fg-color-white" href="mailto:xxx#xxx.com">XXX</a>
</span>
</div>
</div>
</div>
</body>
CSS are these :
.metrouicss {
}
.metrouicss .page {
position: relative;
height: 100%;
min-height: 100%;
width: 100%;
*zoom: 1;
}
.metrouicss .page {
width: 940px ;
margin: auto;
background-color: #fff;
}
.metrouicss .nav-bar {
background-color: #2d89ef;
position: relative;
top: 0;
width: 100%;
display: block;
margin: 0;
padding: 0;
z-index: 1000;
*zoom: 1;
}
.metrouicss .nav-bar .nav-bar-inner {
*zoom: 1;
}
.padding10 {
padding: 10px;
}
At runtime the <div class="page"> after the content is just below the content ! I want it to be at the bottom of the document. How to do that ?
Here is a good tutorial how to keep block at the bottom of the page http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Basically you just need to add a few styles to your block :
.metrouicss .page {
position : absolute;
bottom : 0;
}
You could add a few empty divs in between, you could add bottom margins under the content or top margins where the mail link div is.
Related
I am trying to solve this layout puzzle but am stuck in how to get it as elegant, clean and timeless.
Given:
- a horizontal line of 1 pixel height stretching inside the container its in
- a vertically as well as horitontally centered box over this line
- a left aligned textbox
- and a right aligned text box
What I have tried, is painstackingly increment the percengates untill I reached some kind of a middle... warning, disclaimer, the following code is very graphical and ugly!
CSS
author{color: grey}
box{float: left;
background: blue;
margin: 0 0 0 46.4%;
...
/* bad coding feel embarrassed showing this */
}
time{color: grey}
HTML (flexible and please change if needed)
<author></author>
<box><img src=""/></box>
<time></time>
I first thought this might be solved in flexbox, using justify-content: space-between however, I cannot figure out how to make the line appear there. So I am open for any suggestions wether its the good old positioning/float or with flexbox. Maybe it would be nice to try to solve it both ways and see which one is the most elegant? Thanks in advance!
Here is one way to accomplish that, where you use justify-content: space-between to align the author/box/date and an absolute positioned pseudo element to draw the line
#wrapper {
position: relative;
display: flex;
justify-content: space-between;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#wrapper > * {
position: relative; /* instead of 'z-index: -1' on the pseudo so
the line stays below the items */
}
#author {}
#date {}
#box {
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
Updated based on a comment
The #wrapper > * rule can in this case be replaced with setting position: relative on the box, which I recommend in favor of giving it a z-index.
Updated based on a 2nd comment
As you have issues with the combo Flexbox/script, here is one version without, with the same markup and an almost as short CSS
#wrapper {
position: relative;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#author {
position: absolute;
top: 0;
left: 0;
}
#date {
position: absolute;
top: 0;
right: 0;
}
#box {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
I think the below snippet provides a framework to do what you want to do. This uses flex boxes to hold three columns of divs (the left, the right, and the square). By setting the width of the square, the other two elements in the flex will fill the space. Left and right align settings are set in paragraph elements within divs.
This is by no means a very tidy solution, but does show how it can be done.
.column {
display: block;
width: 150px;
}
.square {
display: inline;
width: 30px;
height: 30px;
margin: auto 0;
background: blue;
}
.top {
display: block;
height: 50%;
border-bottom: solid black 2px;
}
.bottom {
display: block;
height: 50%;
}
.banner {
display: flex;
padding: 5px;
}
p {
margin: 0;
line-height: 15px;
font-size: 0.8em;
}
.left-text {
text-align: left;
}
.right-text {
text-align: right;
}
<div class="banner">
<div class="column left">
<div class="top left">
<p class="left-text">
Author
</p>
</div>
<div class="bottom left">
</div>
</div>
<div class="square">
</div>
<div class="column right">
<div class="top right">
<p class="right-text">
Month Year
</p>
</div>
<div class="bottom right">
</div>
</div>
</div>
Try something like this. Fiddle
#line{background: #000; height:1px; margin-top:40px;}
.alignleft {
float: left;
text-align:left;
width:33.33333%;
}
.aligncenter {
float: left;
text-align:center;
width:33.33333%;
}
.alignright {
float: left;
text-align:right;
width:33.33333%;
}
.box{background:blue;margin:auto;width:40px;height:40px;display:block;margin-top:-20px;}
<div id="line">
<p class="alignleft">Author</p>
<div class="aligncenter"><div class="box">
</div></div>
<p class="alignright">month/year</p>
</div>
<div style="clear: both;"></div>
Is there a cleaner/shorter way to achieve the same result with cross-browser CSS and using javascript only to toggle classes?
I'm trying to create a layout like the above but I've never tried to set everything absolutely as I did here so I don't know what might be the disadvantage.
$(".left-col-content > .content").append(() => {
return "left-col<br>".repeat(350);
});
$(".right-col-content > .content").append(() => {
return "right-col<br>".repeat(350);
});
$(".terminal-row > .content").append(() => {
return "terminal<br>".repeat(350);
});
$(".body-col-content > .content").append(() => {
return "content<br>".repeat(350);
});
$(".body-col-header > .content").append(() => {
left_btn = $("<button>Toggle Left</button>").click(() => {
$(".left-col").toggle();
$(".body-col").toggleClass("left-hidden");
});
right_btn = $("<button>Toggle Right</button>").click(() => {
$(".right-col").toggle();
$(".body-col").toggleClass("right-hidden");
});
terminal_btn = $("<button>Toggle Terminal</button>").click(() => {
$(".terminal-row").toggle();
$(".main-row").toggleClass("terminal-hidden");
});
buttons = $("<div></div>")
.append(left_btn)
.append(right_btn)
.append(terminal_btn);
return buttons;
});
.container {
height: 100%;
}
.container .main-row {
height: inherit;
position: absolute;
top: 0px;
right: 0px;
bottom: 50px;
left: 0px;
}
.container .main-row.terminal-hidden {
bottom: 0px;
}
.container .main-row .left-col {
width: 150px;
left: 0px;
top: 0px;
bottom: inherit;
position: absolute;
background-color: yellow;
}
.container .main-row .left-col .left-col-header {
height: 50px;
width: inherit;
position: inherit;
background-color: orange;
}
.container .main-row .left-col .left-col-content {
width: inherit;
top: 50px;
bottom: 0px;
position: inherit;
overflow-y: scroll;
}
.container .main-row .left-col .left-col-content .content {
padding: 15px;
}
.container .main-row .right-col {
width: 150px;
right: 0px;
top: 0px;
bottom: inherit;
position: absolute;
background-color: yellow;
}
.container .main-row .right-col .right-col-header {
height: 50px;
width: inherit;
position: inherit;
background-color: orange;
}
.container .main-row .right-col .right-col-content {
width: inherit;
top: 50px;
bottom: 0px;
position: inherit;
overflow-y: scroll;
}
.container .main-row .right-col .right-col-content .content {
padding: 15px;
}
.container .main-row .body-col {
right: 150px;
left: 150px;
top: 0px;
bottom: inherit;
position: absolute;
background-color: green;
}
.container .main-row .body-col.right-hidden {
right: 0px;
}
.container .main-row .body-col.left-hidden {
left: 0px;
}
.container .main-row .body-col .body-col-content {
width: 100%;
top: 50px;
bottom: 0px;
position: inherit;
overflow-y: scroll;
}
.container .main-row .body-col .body-col-content .content {
padding: 25px;
}
.container .main-row .body-col .body-col-header {
height: 50px;
width: 100%;
position: inherit;
background-color: red;
}
.container .terminal-row {
height: 50px;
width: 100%;
bottom: 0px;
right: 0px;
position: absolute;
background-color: black;
color: green;
overflow-y: scroll;
}
.container .terminal-row .content {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="main-row">
<div class="left-col">
<div class="left-col-header">
<div class="content">
</div>
</div>
<div class="left-col-content">
<div class="content">
</div>
</div>
</div>
<div class="right-col">
<div class="right-col-header">
<div class="content">
</div>
</div>
<div class="right-col-content">
<div class="content">
</div>
</div>
</div>
<div class="body-col">
<div class="body-col-header">
<div class="content">
</div>
</div>
<div class="body-col-content">
<div class="content">
</div>
</div>
</div>
</div>
<div class="terminal-row">
<div class="content">
</div>
</div>
</div>
This is not fully finished yet, but will give you a frame you can use to work with.
As you can see in the snippet, I have used very rarely used properties of the <style> tag namely id and in javascript .disabled.
As style tags use and comply to W3 'Global HTML Attributes' rules w3schools.com: HTML style tag you can simply give them an #id and toggle them en/disabled with a simple line of javascript.
As you can see in the Snippet I have defined all major elements as Flexbox Containers with some very generic top/bottom/center/middle classes to get the structure you want/need, leaving you with all the room you might need to specific stuff like spacing, fontsizing create you own #id's, etc.
Comment back when you need more info. (don't forget to close the question if you did get the answer you needed.)
In the code you can see that I first disabled the columns and drawer with display: none, each in its own style block.
Then I define them visible with display: flex (as they are flexbox div's) and enable/disable that style block on request by toggling it enabled/disabled with simple javascript.
function toggleStyle(id) { var el = document.getElementById(id); el.disabled = !el.disabled }
<style>
body { margin: 0 }
header,footer,main,section,item,
div { display: flex }
header,footer,section,div { flex-direction: row }
main,item { flex-direction: column }
header,footer,item,div { flex-wrap: wrap }
header { min-height: 3.5rem } /* 3.5 * 16px */
footer { min-height: 2.5rem }
main { height: 100vh; justify-content: space-between }
section { height: 100%; justify-content: space-between }
.drawer { align-content: space-between }
.left,.right { width: 12.5% }
.center { flex: 1 }
.middle { flex: 1; width: 100% }
.top,.bottom { height: 2rem; width: 100% }
.center-col { flex: 1 }
* { outline: 1px dashed }
</style>
<style>.drawer.left { display: none }</style>
<style>.drawer.bottom { display: none }</style>
<style>.drawer.right { display: none }</style>
<style id="stl-left-col" >.drawer.left { display: flex }</style>
<style id="stl-terminal" >.drawer.bottom { display: flex }</style>
<style id="stl-right-col">.drawer.right { display: flex }</style>
<body>
<main>
<header>
<input type="button" onclick="toggleStyle('stl-left-col')" value="left column">
<input type="button" onclick="toggleStyle('stl-terminal')" value="terminal row">
<input type="button" onclick="toggleStyle('stl-right-col')" value="right column">
</header>
<section class="content">
<item class="drawer left">
<div class="top" >left top </div>
<div class="middle">left middle</div>
<div class="bottom">left bottom</div>
</item>
<item class="content center">
<div class="top">main top</div>
<div class="middle">main middle
</div>
<div class="bottom">main bottom</div>
</item>
<item class="drawer right">
<div class="top" >right top </div>
<div class="middle">right middle</div>
<div class="bottom">right bottom</div>
</item>
</section>
<footer class="drawer bottom">some footer</footer>
</main>
</body>
Is there a way for stickies to take into account other stickes on the page?
For example:
body {
display: flex;
min-height: 2000px;
flex-direction: column;
}
#header {
height: 40px;
flex: 0 0 auto;
position: sticky;
top: 0;
background: yellow;
}
#footer {
flex: 0 0 auto;
height: 20px;
}
#main {
display: flex;
flex: auto;
background: blue;
}
#side {
width: 200px;
background: red;
}
#side > div {
position: sticky;
top: 0px;
}
<div id="header">header</div>
<div id="main">
<div id="side">
<div>side</div>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">footer</div>
Notice that if I scroll down the header will overlap the sidebar because they have the same top position.
To fix I have to make the top position of the sidebar take the value of the header height
body {
display: flex;
min-height: 2000px;
flex-direction: column;
}
#header {
height: 40px;
flex: 0 0 auto;
position: sticky;
top: 0;
background: yellow;
}
#footer {
flex: 0 0 auto;
height: 20px;
}
#main {
display: flex;
flex: auto;
background: blue;
}
#side {
width: 200px;
background: red;
}
#side > div {
position: sticky;
top: 40px;
}
<div id="header">header</div>
<div id="main">
<div id="side">
<div>side</div>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">footer</div>
But what if the header has variable height? Can I tell the browser somehow to position the stickies so they dont overlap others?
I think you would need to use javascript for this. First to get the height of the header and then set the top position of your side div using that value. I am not aware of any pure css way of doing it I am afraid.
If you are using jQuery it is simply using the .height() method if not you can use this:
var clientHeight = document.getElementById('myDiv').clientHeight;
var offsetHeight = document.getElementById('myDiv').offsetHeight;
The offset method gets the height with any padding and borders.
I'm trying to create a layout with a header, a main content area and a footer.
Both header and footer are fixed height but content area needs to fill the width and height (without scrollbars)
the current code is here
<div class="outer">
<header>
movistar ovacion
</header>
<div id="content" >
<section class="step-1">
<div class="box">
HOMBRE
</div>
<div class="box">
MUJER
</div>
<div class="box">
NIÑO
</div>
<div class="box">
NIÑA
</div>
</section>
</div>
<footer>
footer
</footer>
</div>
The CSS:
html,body{
height: 100%;
}
header {
height: 160px;
background: blue;
}
#content {
}
footer {
height: 60px;
position:absolute;
width:100%;
bottom:0;
background: green;
}
.outer {
}
.step-1 > div {
width: 50%;
height: 50%;
position: absolute;
}
.step-1 > div:first-child {
background: #DDD;
left: 0;
}
.step-1 > div:nth-child(2) {
background: #CCC;
right: 0;
}
.step-1 > div:nth-child(3) {
background: #72CCA7;
left: 0;
bottom: 0;
}
.step-1 > div:nth-child(4) {
background: #10A296;
right: 0;
bottom: 0;
}
Right now the content area doesn't work as it should, the 4 boxes doesn't adapt to the height.
I think i'm doing something wrong with div positions or clearings but i can't find the problem.
How can i fix it? Is there a better way of doing this layout?
The problem is that the first and second <div> element within the .step-1 don't have an explicit top value. Hence the next absolutely positioned DIVs overlap those two:
.step-1 > div:first-child {
background: #DDD;
left: 0;
top: 0; /* Added declaration */
}
.step-1 > div:nth-child(2) {
background: #CCC;
right: 0;
top: 0; /* Added declaration */
}
On the other hand, the #content itself should be positioned absolutely in this case in order to fill the remaining space between the header and the footer:
#content {
position: absolute;
top: 160px; /* = height of the header */
bottom: 60px; /* = height of the footer */
width: 100%;
}
WORKING DEMO.
Personally, I prefer creating a new containing block for the absolutely positioned elements instead of relying to the initial containing block. Because of that, In the above demo I positioned the .outer element relatively:
.outer {
position: relative;
height: 100%;
}
Adding right: 0; seem to helped
top: 100%;
left: 0;
right: 0;
as you can tell by the title I want to have a footer stick to the bottom. I know that there are a lot of topics on that. I already read through them. But I can not get it to work, because of my navigation, which is fixed to the top.
The layout looks like this:
<header class="navbar navbar-fixed">
</header>
<div class="content">
<div class="container">
</div>
<div class="clearfooter"></div>
</div>
<footer>
</footer>
And here is the CSS:
html, body {
height: 100%;
}
body {
padding-top: 40px; /* height of the navbar */
}
.navbar-fixed {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
}
.content {
margin-bottom: -30px;
min-height: 100%;
position: relative;
}
.clearfooter {
clear: both;
height: 30px;
}
#footer {
height: 30px;
position: relative;
}
I tried this tutorial. But the footer is not pinned to the bottom of the window it is further down (not in the viewport anymore). I already tried to fix it with additional padding/margin but nothing worked :(
Instead of adding padding to the body to push your page just create a push div to add some space between your fixed header and your content, like so:
HTML
<div class="push"> </div>
CSS
.push { height:40px; }
.push:before, .push:after {
display: table;
content: "";
zoom: 1;
}
.push:after {
clear: both;
}
Here is a demo:
http://jsfiddle.net/andresilich/fVpp2/1/show/
Edit here http://jsfiddle.net/andresilich/fVpp2/1/
Note: Added a bunch of break lines to illustrate the positioning of the footer.
(edit: jsfiddle cut my CSS, added it back.)
I did an experiment and it worked, here is the html:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="contain">
</div>
<div class="footer">
</div>
</div>
</body>
and the css:
.header {
height: 100px;
background-color: red;
}
.contain {
height:1500px;
background-color: black;
}
.wrapper {
width: 960px;
background-color: yellow;
margin: 0 auto;
}
body {
margin: 0;
}
.footer {
height: 200px;
background-color: blue;
}
it has both header and footer fixed, I hope you get the clue out of it.