Created
July 31, 2014 16:28
-
-
Save clhenrick/8c1b2b3b90ea7599b783 to your computer and use it in GitHub Desktop.
mfa bootcamp day 4 demo code: positioning and sizing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Web Day 04</title> | |
<link rel="stylesheet" href="./styles.css"> | |
</head> | |
<body> | |
<div class="box box1"> | |
<h1>Here is my div heading</h1> | |
<p>Here is a sub-heading</p> | |
</div> | |
<div class="box box2"></div> | |
<div class="box box3"></div> | |
<footer> | |
<p>Here is my footer!</p> | |
</footer> | |
<div class="box box4"> | |
<p> Here is some stuff bla bla bla</p> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* give all list items no decoration / bullets */ | |
li { | |
list-style: none; | |
} | |
/* set CSS properties for multiple elements*/ | |
html, body { | |
width: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
/* targets a div element that has a class of "box" */ | |
div.box { | |
position: relative; | |
background-color: hsla(0,50%,80%,0.7); | |
border: 1px solid orange; | |
width: 300px; | |
height: 300px; | |
margin: 0; | |
padding: 0; | |
} | |
/* target h1 and p tags inside of div elements */ | |
div h1, p { | |
text-align: center; | |
} | |
/* target an h1 element that is a child of a | |
div that has a class of box and box1*/ | |
div.box.box1 h1 { | |
padding: 10px; | |
font-family: sans-serif; | |
text-transform: uppercase; | |
} | |
/* target all elements that have a class of box AND box1 */ | |
.box.box1 { | |
position: fixed; /* position fixed means something is stuck to the part of the page we position it at. */ | |
width: 100%; | |
height: 20%; | |
z-index: 10; /* z-index is how we position elements vertically */ | |
} | |
/* target all elements that have a class of box AND box2 */ | |
.box.box2 { | |
position: absolute; | |
height: 2000px; | |
width: 40%; | |
right: 0; | |
background-color: hsl(20, 50%, 90%); | |
} | |
/* target all elements that have a class of box AND box3 */ | |
.box.box3 { | |
background-color: hsl(200, 50%, 90%); | |
width: 60%; | |
height: 1500px; | |
left: 0px; | |
} | |
/* use the HTML5 footer element and make it stuck at the bottom of our page*/ | |
footer { | |
position: fixed; | |
text-align: center; | |
height: 8%; | |
width: 100%; | |
bottom: 0; | |
background-color: hsl(60, 50%, 90%); | |
z-index: 100; | |
} | |
/* target all elements that have a class of box AND box4 */ | |
.box.box4 { | |
margin-top: 10px; | |
margin-left: 10px; | |
} | |
/* target all p elements inside div that has classes of box and box4 */ | |
div.box.box4 p { | |
/* these are our box-sizing prefixes | |
which are required for cross browser | |
support with experimental CSS properties */ | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
padding: 5px; | |
margin: 5px; | |
border: 1px dashed blue; | |
width: 100px; /* now the total width will be 100px including content, padding and border */ | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment