I'm beginning the integration of a design.
The first navbar is always there.
Sometimes i have my second navbar.
The content is never under the navbars
These 2 navbars have to be on the top of the header.
These 2 navbars have to be "infinite" to the bottom of the page.
The body hasn't a fixed width.
<body>
<header></header>
<nav id="main-nav">main-nav</nav>
<nav id="sub-nav">sub-nav optionnal</nav>
<section id="main-section">main section</section>
</body>
I tried to put the 2 nav bloc as absolute, but my content section is not dynamicly on their left. [fiddle]
header { height: 250px; }
#main-nav {
width:150px;
position: absolute;
top: 150px;
left: 0;
}
#main-section { margin-left:150px; }
I tried float left but my nav is not over the header.
Do you have some ideas? I can use bootstrap 3 even if the design has not to be responsive
What about this solution: http://codepen.io/anon/pen/pJzReW
header {
height: 250px;
background-color: red;
}
#main-nav, #sub-nav {
width:150px;
position: relative;
float: left;
}
#main-nav {
background-color: blue;
margin-top: -100px;
height: 500px;
}
#sub-nav {
background-color: yellow;
margin-top: -50px;
height: 450px;
}
#main-section {
background-color: green;
height: 400px;
}
With position: relative; the element's original space is kept (in this case, we use it for maintaining the width), but you can move them (in this case, using a negative margin top).
Edit
In case you want the navs to touch the bottom of the page, I think this approach can be better: http://codepen.io/anon/pen/MwgJEQ?editors=110
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header {
height: 250px;
background-color: red;
}
#main-nav, #sub-nav {
width:150px;
position: absolute;
}
#main-nav {
background-color: blue;
bottom: 0px;
top: 100px;
}
#sub-nav {
background-color: yellow;
left: 150px;
top: 150px;
bottom: 0px;
}
#main-section {
background-color: green;
height: 400px;
padding-left: 300px;
}
Related
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I have created a mockup of the layout I am trying to attempt, but I've run into some issues and I'm trying to figure out how to fulfill all the conditions I have. Here is the stack snippet:
// to check if dynamic <aside> content is working
document.getElementById('toggle').addEventListener('click', () => {
document.querySelector('main').classList.toggle('expanded');
});
* {
box-sizing: border-box;
}
html, body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: red; /* to see if <body> shows through */
}
main {
position: absolute;
width: 100%;
height: 100%;
}
nav {
top: 0;
left: 0;
position: fixed;
width: 100vw;
height: 100vh;
z-index: 1;
}
nav > .wrapper {
position: absolute;
width: 100%;
height: 100%;
}
nav > .wrapper > header {
position: relative;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
padding: 0 100px;
background-color: navy;
color: white;
}
main.expanded nav > .wrapper > header {
height: 100px;
}
main.expanded section {
padding-top: 110px;
}
.pull-left {
height: 100%;
float: left;
}
.pull-right {
height: 100%;
float: right;
}
nav > .wrapper > aside {
position: relative;
bottom: 0;
left: 0;
width: 100px;
min-height: 100%;
text-align: center;
background-color: navy;
color: white;
}
section {
position: relative;
background-color: white;
width: 100%;
height: 100%;
padding-left: 110px;
padding-top: 60px;
z-index: 0;
}
section .content {
position: relative;
/* to make sure scrolling is correct */
width: 110%;
height: 110%;
background-color: lightgray;
padding: 10px;
margin: 10px;
}
<main>
<nav>
<div class="wrapper">
<header>
<div class="pull-left">Navigation</div>
<div class="pull-right">
<button type="button" id="toggle">Header Collapse</button>
</div>
</header>
<aside>Dashboard</aside>
</div>
</nav>
<section>
<div class="content">
<button type="button">Clickable</button>
</div>
</section>
</main>
Here are the conditions I have to meet:
The <header> and <aside> must be position: fixed (Already done).
When the <header> height is changed, the content in the <aside> must respond by moving lower to stay within view (Already done).
The content must scroll behind the <header> (Already done).
The content box must be clickable (Needed).
The <body> must not show behind the content box (Needed).
The content box must be scrollable if overflow is in effect (Already done).
IE 9+ must be supported (Not sure if I have met this or not).
Please let me know how to meet all these requirements. The HTML does not need to remain the same but please keep the tags semantically correct.
I'm trying to make a layout where the banner, the navigation and footer always stay fixed while you can scroll the content. I have seen some kinda similar layouts here but the actual page content is not limited there. What I want now is to center anything, but you better you maybe need something visual - what I got so far:
html
<body>
<div id="container">
<div id="banner"></div>
<div id="main">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
}
#container {
margin: 0 auto;
height: 100%;
width: 800px;
margin-top: 20px;
background-color: black;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
}
#main {
height: 100%;
width: 100%;
}
#nav1 {
height: 100%;
width: 150px;
float: left;
background-color: yellow;
}
#nav2 {
height: 100%;
width: 100px;
float: right;
background-color: yellow;
}
#content {
height: 100%;
width: 100%;
background-color: white;
}
#footer {
width: 100%;
height: 30px;
background-color: lime;
}
jsfiddle: http://jsfiddle.net/gLhd6sno/1/
When scrolling I want only the content in the white area to move, also I cant figure out how to disable overflow without breaking that layout. Maybe you have an idea?
Thank you.
Here is one way of doing it that relies on absolute positioning.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
margin: 0;
}
#container {
width: 800px;
left: 50%;
margin-left: -400px;
background-color: black;
position: absolute;
top: 20px;
bottom: 0;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
position: absolute;
top: 0;
}
#main {
width: 100%;
position: absolute;
top: 100px;
bottom: 30px;
}
#nav1 {
width: 150px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#nav2 {
width: 100px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#content {
position: absolute;
top: 0;
bottom: 0px;
left: 150px;
right: 100px;
background-color: tan;
border: 2px dotted blue;
overflow: auto;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
height: 30px;
background-color: lime;
}
See demo: http://jsfiddle.net/audetwebdesign/k9nsvt3t/
If you shrink the height, you will see a scroll bar appear around the content area,
which may do the trick. The rest of the page elements are static regardless of the
amount of content in the main area.
I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}
Ok, I want this:
For that, I have this HTML code:
<div id="wrapForCenter">
<div id="title">
title
</div>
<div id="contentFrame">
<div id="imagePlaceholder">
image
</div>
<div id="content">
content
</div>
</div>
<div id="buttonsBar">
buttonsBar
</div>
</div>
And I have this CSS code:
#wrapForCenter
{
position: absolute;
top:50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title
{
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame
{
height: 240px;
width: 480px;
}
#imagePlaceholder
{
float: left;
width: 100px;
height: 100%;
background-color: Green;
}
#content
{
float: left;
width: 380px; /*<-- look at this*/
height: 100%;
background-color: Yellow;
overflow: auto;
}
#buttonsBar
{
clear: left;
width: 100%;
height: 40px;
background-color: Silver;
}
If I change the contents width to 100%, why occurs this?
What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?
Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?
Thank you very much. CSS is not my strenght.
This is called a float drop. Floats work such that they'll fit side-by-side as long as there's enough room for each, but a float will bump down below the previous one if there's not enough room for it to fit.
width:100% means make it 100% as wide as its container (#wrapForCenter). Naturally, if you tell something to be the entire width of it's container, nothing can fit along either side inside of that container, so as a float it must move down below whatever is before it (an earlier "sibling") to fit.
A question similar to this was asked by me myself in stackoverflow before.
How to auto adjust (stretch) div height and width using jQuery or CSS
You can set HTML like;
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
And CSS like;
#container {
position: relative;
width: 300px;
height: 200px;
}
#top, #left, #right, #bottom {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 50px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 50px;
background: #ff7e00
}
#bottom {
bottom: 0;
width: 100%;
height: 50px;
background: #9dbb61
}
Here is the working demo.
Hope this helps..
Note: I recommend (not forcing) you to do a search in stackoverflow before asking questions.
You should set your image holder to 25% and your content to 75%, or if you know how much space you have allocated for your entire content area(picture and content) then subtract 100 from that and use that many pixels. but overall this should work
#wrapForCenter {
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title {
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame {
height: 240px;
width: 480px;
}
#imagePlaceholder {
float: left;
width: 25%; /* See Here */
height: 100%;
background-color: Green;
}
#content {
float:right;
width: 75%; /* And here */
height: 100%;
background-color:Yellow;
}