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.
Related
So I am building a webpage and I can't find a way to dynamically stretch the background (with a different z-index) to the start of the page footer. I have searched for javascript, jquery and css approaches but no dice. Anyone know how to do this? Here is my code:
<html>
<head>
<style>
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
background: #ccc;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
}
#grey_block_left
{
width: 30%;
background-color: #333333;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#purple_block_right
{
width: 70%;
background-color: #9966cc;
height: 100%;
right: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#content
{
width: 70%;
margin: 0 auto;
background-color: #fff;
height: 1000px;
position: relative;
z-index: 5;
margin-top: 150px;
margin-bottom: 50px;
padding: 20px;
}
#footer
{
position: relative;
z-index: 5;
width: 100%;
height: 300px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="content">
<h1>Content</h1>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You'll get the offsetTop of the footer and that would be the height of the z index #purple_block_right and #grey_block_left
footer_height = document.getElementById("footer").offsetTop
document.getElementById("grey_block_left").style.height = footer_height + "px";
document.getElementById("purple_block_right").style.height = footer_height + "px";
Hope it helps
How about this? changing absolute to fixed?
<html>
<head>
<style>
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
background: #ccc;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
}
#grey_block_left
{
width: 30%;
background-color: #333333;
height: 100%;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
}
#purple_block_right
{
width: 70%;
background-color: #9966cc;
height: 100%;
right: 0px;
top: 0px;
position: fixed;
z-index: 0;
}
#content
{
width: 70%;
margin: 0 auto;
background-color: #fff;
height: 1000px;
position: relative;
z-index: 5;
margin-top: 150px;
margin-bottom: 50px;
padding: 20px;
}
#footer
{
position: relative;
z-index: 5;
width: 100%;
height: 300px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="content">
<h1>Content</h1>
</div>
<div id="footer">
</div>
</div>
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.
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)
I've scoured StackOverflow for an answer, but nothing I've tried has worked.
I have a container div with three inner divs stacked vertically with varying heights. When my browser window is maximized, it looks fine. When I make the window smaller and scroll right horizontally, there is a section of white space. How can I get rid of it? Thank you all in advance!
body {
min-width: 100%;
}
div#outer {
display: block;
position: absolute;
min-width: 100%;
}
div#top {
left: 0;
top: 0;
height: 100px;
width: 100%;
position: relative;
display: block;
}
div#middle {
left: 0;
top: 0;
height: 600px;
width: 100%;
position: relative;
display: block;
}
div#bottom {
left: 0;
top: 0;
height: auto;
width: 100%;
position: relative;
display: block;
}
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="big">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</body>
In the body, there are some default margins. You can remove everything like this:
body {
min-width: 100%;
margin: 0;
padding: 0;
}
If you only want the sides' margin removed:
body {
min-width: 100%;
margin-left: 0;
margin-right: 0;
}
Does that work?
html,body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I am working on a new page with a static header, two content columns, and a sticky footer. Everything is working of except that my footer keeps rolling under my content. I'd appreciate any help that can be given to get it to stop going under my content.
I tried the suggestions found in to no avail:
Content going under footer in Google Chrome and not FF
Content scrolling on mobile page with fixed header/footer
Placing footer under content doesn't seem to work
Why is my footer not going to the bottom of the page?
CSS:
body, html {
height: 99%;
}
#page {
position: relative;
margin-bottom: -100px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
height: 100%;
min-height: 100%;
}
#header {
clear: both;
float: none;
min-width: 0px;
margin-right: 0px;
margin-left: -9px;
margin-bottom: 0px;
margin-top: -9px;
z-index: 1;
position: fixed;
height: 150px;
width: 100%;
background-color: #fff517;
}
#wrapper {
margin-bottom: 100px;
float: none;
clear: both;
position: absolute;
margin-top: 170px;
left: 50%;
width: 854px;
margin-left: -422px;
}
#left-sidebar {
clear: none;
margin-left: auto;
margin-bottom: auto;
margin-right: 50px;
margin-top: auto;
min-height: 300px;
width: 200px;
float: left;
background-color: #39ff32;
position: relative;
}
#content {
clear: none;
float: left;
min-height: 300px;
width: 600px;
background-color: #ff1c23;
position: relative;
}
.push {
clear: both;
height: 200px;
}
#footer {
clear: both;
padding-top: 50px;
background-color: #9f49ff;
text-align: center;
width: 100%;
height: 50px;
z-index: 0;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<base href="http://www.footballpickpool.com/new_fpp/"/>
<link type="text/css" href="./resources/css/style.css" rel="stylesheet"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="left-sidebar">
</div>
<div id="content">
</div>
</div>
<div class="push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/aUTqf/
Thanks in advance to anyone who can provide some insight.
Edit:
I now have it working as expected in every browser but IE. Issue was due to fixed positioning of a couple of elements. Now to figure out IE, code included below:
body, html {
background-position: 50% 80%;
background-repeat: no-repeat;
background-image: url(../images/background.jpg);
background-color: #d9d9d9;
height: 99%;
margin: 0px;
padding: 0px;
}
#header {
padding-top: 15px;
margin-left: auto;
margin-bottom: 45px;
margin-right: auto;
margin-top: 0px;
color: white;
position: fixed;
z-index: 99998;
left: 0;
top: 0;
height: 150px;
width: 100%;
background-color: #fff517;
}
#wrapper {
float: left;
clear: both;
position: relative;
left: 50%;
width: 854px;
margin-left: -422px;
padding-top: 200px;
padding-bottom: 150px;
}
#left-sidebar {
clear: none;
margin-left: auto;
margin-bottom: auto;
margin-right: 50px;
margin-top: auto;
min-height: 300px;
width: 200px;
float: left;
background-color: #39ff32;
position: relative;
}
#content {
min-height: 300px;
clear: none;
float: left;
width: 600px;
background-color: #ff1c23;
}
.push {
clear: both;
height: 100px;
background-color: #9f49ff;
}
#page {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
height: 100%;
min-height: 100%;
width: 100%;
z-index: 1;
}
#footer {
clear: both;
margin-top: auto;
margin-left: auto;
margin-bottom: auto;
margin-right: auto;
background-color: #9f49ff;
text-align: center;
width: 100%;
height: 50px;
z-index: 0;
}
I believe this is a true Sticky Footer as you wanted.
http://jsfiddle.net/PU8U3/
I had to remove a lot of stuff from your CSS. I tried to leave only the necessary to make it work. You should try to add what you need on top of this.
Watch out for the stylesheet link tag in your HTML, it's really hard to edit CSS using JSFiddle while the HTML is loading another.
You can add a padding bottom to the content with the size of the footer and you are good to go.