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.
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 a fixed div inside of a relative positioned div. I want the div to be fixed to the top of the page and contained within my relative positioned parent.
A common example of this use case is a sticky website sidebar in a two column layout.
As I understand. Setting the top: 0 on my fixed div will fix it to the top. Setting margin-left: 0 on my fixed div will align it with its relatively positioned parent.
This works fine on all browsers except Safari (version < 10). Is there any way to fix this issue that doesn't involve user agent sniffing.
Here is a bare-minimum fiddle illustrating isolating issue below:
http://jsfiddle.net/vgc1ekbg/4/
Here's another fiddle illustrating the issue in the context of a two-column website layout: http://jsfiddle.net/dpmj3y0n/1/
Edited based on last fiddle shared in comments.
* {
box-sizing: border-box;
}
.wrapper {
max-width: 960px;
height: 2000px;
margin: 0 auto;
text-align: center;
/* line-height: 580px; */
}
.layout {
height: 2000px;
/*padding-left: 20px;*/
/* padding-right: 350px; */
/*margin-right: 192px;*/
}
.layout:before, .layout:after {
content: "";
display: table;
}
.layout:after {
clear: both;
}
.col-main {
width: calc(100% - 184px);
margin-left: -8px;
margin-top: -8px;
height: 580px;
float: left;
position: relative;
left: 200px;
background-color: #f16529;
line-height: 580px;
}
.col-sub {
/* margin-right: -100%; */
position: absolute;
top: 0;
left: 0;
width: 200px;
line-height: 580px;
/* height: 580px; */
background-color: #f0dddd;
float: left;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100px;
overflow: hidden;
z-index: 100;
background-color: gray;
color: red;
line-height: 100px;
}
<div class="wrapper">
<div class="layout">
<div class="col-main">Main Content</div>
<div class="col-sub">Sidebar Content
<div class="sticky">
Sticky Content
</div>
</div>
</div>
</div>
if you intent to center align, you can use left: 50%; and transform: translateX(-50%); to both .column and .sticky
http://jsfiddle.net/vgc1ekbg/5/
Ok I am trying to build a website design. What I need to do is have two colored background divs and then float a white box in front of them. I have used z-index 0 for the background blocks and then z-index 5 for the block I want to float on top. I have also used position: relative. Does anyone know why this doesn't work. Here is my code:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="white_box_outer">
float on top
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
min-width: 320px;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
position: relative;
z-index: 0;
}
#grey_block_left
{
width: 40%;
background-color: #333333;
min-height: 700px;
float: left;
position: relative;
z-index: 0;
}
#purple_block_right
{
width: 60%;
background-color: #9966cc;
min-height: 700px;
float: left;
position: relative;
z-index: 0;
}
#footer
{
width: 100%;
background-color: #111111;
min-height: 250px;
float: left;
position: relative;
z-index: 0;
}
#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: relative;
z-index: 5;
float: left;
background-color: #ccc;
}
#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: absolute;
float: left;
background-color: #ccc;
}
Set your white_box position to absolute and then adjust it's height and width, according to your goals.
I am a novice in CSS and I have not yet solved what I am trying to achieve.
I want the items of a horizontal menu to be centered regardless of the monitor resolution. Here is my code:
The HTML semantic:
<body>
<div class="inicio_m"></div>
<div id="menu">
<div id="cab_menu" class="clearfix">
<div class="conteudo_menu clearfix">
Item 1
Item 2
Item 3
Item 4
</div>
</div>
</div>
</body>
This is the CSS format:
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
padding: 20px 10px;
float: left;
color: #FFFF40;
}
.clearfix { display: block; }
.conteudo_menu {
width: 100%;
margin: 0 auto;
}
I posted on Fiddle for a more convenient check:
http://jsfiddle.net/nQXd7/
Thanks in advance
Remove the floats and use display:inline-block instead. Then add text-align:center to the wrapping element.
JSFiddle
CSS
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
font-size: 12px;
font-weight: bold;
padding: 20px 10px;
display: inline-block;
color: #FFFF40;
}
.clearfix {
display: block;
}
.conteudo_menu {
width: 100%;
margin: 0 auto;
text-align: center;
}
Please remove the unwanted codes in css, try this one in order to make the menus just simply centered.
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
.conteudo_menu {
text-align: center;
}
#cab_menu a {
padding: 20px 10px;
color: #FFFF40;
display: inline-block;
}
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)