I'm new to programming and I'm trying to make a website but I have a big problem. I want a navigation bar next to my logo and sticking to the top when i scroll, but I can't get it to work. The text is on top of each other and I don't know how to make it work.
<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color: black}
img.logo{ margin-left: 20px;
margin-top: 10px;}
li{ display: inline}
a{ position: fixed;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px
margin: 0px;
padding: px;}
</style>
</head>
<body>
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<li>Projecten</li>
<li>over</li>
</header>
</body>
</html>
Welcome to the world of web development!
The first order of business is to fix your CSS so it is valid. We'll also tidy it up a little.
Add a semicolon after letter-spacing: 0.5px
You don't have any value assigned to padding: px; so just remove that line
It's not necessarily invalid, but I would remove the declarations for margin-left and margin-top on the a element because you are overriding them with margin: 0px; later on.
With that done, the CSS should look like this:
body {
background-color: black;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
display: inline;
}
a {
position: fixed;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
Now, lets make the HTML valid and tidy it up, as well.
You can't have <li> elements directly under <header>. They only go inside <ol> or <ul> elements. <ul> (unordered list) makes the most sense here, so let's use that.
It's a good idea to place a value in the href attribute of your <a> element. If you're just prototyping and don't have a URL to use, yet, people typically use #.
The HTML now looks like this:
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
Now, one issue is that you are applying a fixed position to each of your <a> elements separately. What you actually want to do is apply a fixed position to the whole navbar (the whole <ul>). So change your CSS like so:
ul {
position: fixed;
}
a {
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
This is just an excerpt. But notice that I moved position: fixed; from a to ul. Really, that is all that's needed. If you want to fine tune where the navbar appears, go ahead and use top and left like so:
ul {
position: fixed;
top: 5px;
left: 10px;
}
The whole page now looks like this:
body {
background-color: black;
color: white;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
display: inline;
}
ul {
position: fixed;
top: 5px;
left: 10px;
}
a {
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
<header>
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
<li> elements should be in a <ul> or <ol>
In the example below, I used flexboxes for the layout. Please have a look here to learn about flexboxes.
body {
background-color: black
}
header {
display: flex;
align-items: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
img.logo {
margin-left: 20px;
margin-top: 10px;
}
li {
margin-left: 1em;
}
a {
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px margin: 0px;
}
<header>
<img class="logo" src="http://placehold.it/300x100">
<ul>
<li>Projecten</li>
<li>over</li>
</ul>
</header>
Change the position to relative and add "vertical-align:top" to the anchor.
body{ background-color: black}
img.logo{ margin-left: 20px;
margin-top: 10px;}
li{ display: inline}
a{ position: relative;
width: auto;
height: 50px;
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
vertical-align:top;
margin: 0px;
padding: px;}
<img class="logo" src="http://lorempixel.com/300/100" style="height: auto; width: 300px" >
<li>Projecten</li>
<li>over</li>
I think having <li> tags for horizontal links is a bit to complicated for nothing. You could simply use <a> tags without the <li>. Here is an exemple of how I think would be the best.
Codepen demo
If you want the content to be scrollable with the navbar on top (without it being fixed), you need to wrap it into a <div> too. This also has the very nice effect of allowing you a simple footer, should you eventually want one.
Since you didn't specify any browser support, I took the liberty of using flex to do so.
Put your li in a ul, display li inline-block, then float both the logo and the ul left, or float the ul right and put a margin-right on it if that is what you would prefer.
Make your header fixed and the logo and nav remain at the top while scrolling.
<style>
body{ background-color: black}
header#header {
position: fixed;
width: 100%;
}
div.logo {
margin-left: 20px;
margin-top: 10px;
float: left;
}
ul#nav {
float: left;
}
ul#nav li {
display: inline-block;
}
ul#nav li a {
margin-left: 50px;
margin-top: 60px;
color: #DFDD7D;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
</style>
<header id="header">
<div class="logo">
<img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" >
</div>
<nav id="main_nav">
<ul id="nav">
<li>Projecten</li>
<li>over</li>
</ul>
</nav>
</header>
Related
Well, I have a site and it's happening something that I just can't fix.
I have a code like this:
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 50px;
text-align: center;
}
aside {
margin: auto;
margin-top: 20px;
}
aside li {
float: left;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>
So, the problem is that I want to centralize the li elements inside the ul, and I can't use text align because li is not text!
Can anyone help me?
is this what you want?
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 100px;
text-align: center;
}
aside{
margin: auto;
margin-top: 20px;
}
aside li{
display: inline-block;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>
try to :
aside li{
display:inline-block;
padding: 0 2%;
font-size: 100%;
}
remove the float too ;
If I understood correctly what you want to achieve, you may try changing:
aside li{
float: left;
padding: 0 2%;
font-size: 100%;
}
to
aside li{
display: inline;
padding: 0 2%;
font-size: 100%;
}
See it on JSFiddle and, also, check the attribute list-style-type for your <ul> tag.
I don't think you can select that circle because it's not an element. You can see it yourself. Just go to inspect and try to find that element.
But you can make a custom list.
<center><div id="b">
<div class="a"><span></span> List 1</div>
<div class="a"><span></span> List 2</div>
<div class="a"><span></span> List 3</div>
</div></center>
<style>
span {
background:black;
height:10px;
width:10px;
border-radius:30px;
display:inline-block;}
</style>
I'm starting ton code and I have some struggles with this website. First, I made the header with a nabber in it but I can't align it to the right, if I try it with float:right it switches the links. And underneath all that I want a big picture but auto height and width doesn't work if I make the page bigger.
<!DOCTYPE html>
<style>
header{ background-color: white;
margin-left: 20px;
margin-top: 30px;
}
img.logo{ width: 200px;
height: 30px;
}
li{ display: inline;
}
ul{ position: fixed;
top: 20px;
}
a{ font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
img.picvp{margin-top: 20px;
width: auto;
height: auto;
}
</style>
<header>
<img class="logo" src="#">
<ul>
<li style="float:right;">Projecten</li>
<li style="float:right;">over</li>
<li style="float:right;"><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>
Thank you!
Using display:flex will help with this.
.header{
background-color: white;
align-items: center;
display: flex;
margin-left: 20px;
margin-top: 30px;
}
.logo{
background-color: #0f0;
width: 200px;
height: 30px;
}
.nav {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
margin-left: auto;
}
.nav li{ display: inline-block; }
.nav a {
border-left: solid 1px;
display: block;
padding: 1em;
}
img.picvp{
margin-top: 20px;
width: auto;
height: auto;
}
<header class="header">
<img class="logo" src="#">
<ul class="nav">
<li>Projecten</li>
<li>over</li>
<li><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>
Here is a link to the solution: Fiddle N1
You just needed to add: width: 100%; to the class img.picvp.
Another thing is that you should've set your ul elements like that:
ul{
position: relative;
display: inline;
text-align:right;
}
text-align:right automatically pulls the elements to the right side of the parent div. Also use relative positioning rather than fixed one. I have made some changes to the width of the background image as well. Compare the changes to the code so you can see what exactly has been changed.
hii i modify some of code but impornant i use parent and child an example in your i use as parent and as child see example as follow
(dont forgot to change img src)
header{ background-color: white;
margin-left: 20px;
margin-top: 30px;
}
img.logo{
width: 1100px;
height: 130px;
}
ul,li{ display: inline;
text-decoration:none;
}
a,li{
display: inline;
}
a{ font-family: 'Open Sans', sans-serif;
text-decoration:none;
display: inline;
}
img.picvp{margin-top: 20px;
width: auto;
height: auto;
}
<img class="logo" src="nows.jpg">
<ul>
<li style="float:right;">Projecten</li>
<li style="float:right;">over</li>
<li style="float:right;"><a href='#'>Contact</a></li>
</ul>
I've tried adding a nav bar, but as soon as I add the nav bar it instantly moves my H1 element over to the right, or left, depending on where I place my nav bar in the DOM tree. If I add padding to the H1 to fix the centring issue, it then breaks all my responsive design as the browser get's smaller. Surely their's a fix?
<body>
<div id="menu">
<div id="name">
<h2 class="myname">Lee Howard</h2>
</div>
</div>
<header id="header">
<nav class="main-nav">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
<h1 class="title">Front end developer.
<br>
<span>WORKING HARD TO BECOME GREAT</span>
</h1>
</header>
#header {
display: table;
top: 0;
left: 0;
height: 960px;
width: 100%;
background: url(../img/header.jpg)
no-repeat center;
background-size: cover;
box-shadow: 0px 5px 0px 0px;
}
#header h1 {
font-family: 'Raleway', sans-serif, font-weight: 400;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 700;
line-height: 0.8em;
font-size: 4.25em;
}
#header h1 span {
font-family: 'Raleway', sans-serif;
font-weight: 800;
color: #363636;
font-size: 0.30em;
}
#name {
position: absolute;
text-align: center;
margin-right: -80px;
right: 51%;
}
/****************************
NAVIGATION
******************************/
.main-nav {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav ul {
margin: 0;
}
.main-nav li {
float: left;
padding: 0 20px;
}
That's happening because your header has
display:table
and h1 has
display:table-cell
You have position:absolute on your #name that removes the width of the element as well.
I've made a few amends and if works here.
https://jsfiddle.net/t3s2ht8n/
In my code I used h tags for the different text i wanted to display. But for some reason, my h5 and h6 tags won't vertically align nicely to the left. It also looks like the text in the header is doing something to it
HTML
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero2">
<h6>Project Type</h6>
<h5>Project Title</h5>
</div>
<div id="workImage">
<img src="assets/trees.jpg" alt="Logo" style="width:100%;height:100%">
</div>
<div id="workInfo">
<p>BOUT MY PROJECTS<p>
</div>
</body>
</html>
CSS
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------work page styles-------------*/
#hero2{
width: 100%;
height: 10em;
position: relative;
background: red;
top: 5em;
}
#workImage
{
top: 9%;
width: 80%;
z-index: 1;
margin-left: auto;
margin-right: auto;
position: static;
}
#workInfo{
width: 70%;
height: 50em;
margin-left: auto;
margin-right: auto;
}
p{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 25px;
color: #2C3E50;
float: left;
}
h5{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 40px;
color: #2C3E50;
float: left;
display: inline-block;
vertical-align: middle;
}
h6{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 20px;
color: #45CCCC;
float: left;
}
Your parent containers are collapsing since you're applying float:left; to your <p>, <h5>, and <h6> tags. Floats take items out of the document flow. So when you float all elements within a div, the div will collapse because it doesn't think anything is in the div. To force the div to respect floated elements within itself, you need to apply a clearfix class to #hero2. This will push down the image and text immediately below the hero down.
clearfix CSS
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both; }
To understand clearfix better, read this SO thread: "Which method of clearfix is best?"
I am recently new to CSS and HTML and I have a problem while allocating my block under the header:
I have tried several solutions but I have not succeed. I would appreciate if you could give me a hint with it. Thanks
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title goes here</title>
<meta name="description" content="Description of your site goes here">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div class="header" >
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
<div class="topmenu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
And my CSS CODE:
body {
font-family: sans-serif,Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
float: left;
padding: 42px 0px 0px 0px;
position: center;
}
.header {
position:absolute;
top:42px;
margin-left:-500px;
left:50%;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1{
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
position:absolute;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Thanks
I have made several changes to your html/css:
body {
font-family: sans-serif, Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
margin: 0 auto;
}
.header {
position: relative;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px;
/* Here is the trick... line-height = image height */
}
.topmenu {
position:relative;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
padding-right: 8px;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
<body>
<div class="page">
<div class="topmenu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>What's New
</li>
<li>Services
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Links
</li>
</ul>
</div>
<div class="header">
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
</body>
You need to understand three things to improve your html & css skills:
Always follow natural stacking order (first element in html will
display before second element...),
Don't use position: absolute
except if you know what you are doing as #Billy said,
Use html5 tags if you don't need to support IE8 and below. If you do, then use HTML5
Shiv to make them compatible.
Now here is a valid code that is also responsive (it will resize to your browser's viewport size). I have added a lot of comments in the code so that you can easily understand.
Good luck with your project!
.page {
width: 100%; /* Makes the page responsive */
max-width: 1000px; /* all the content inside this div will be 1000 px width */
margin: 0 auto; /* To center your page div in the page */
}
.topmenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.topmenu ul li a {
display: block;
float: left;
width: 14.2857142%; /* 100 / 7 (number of menu items) */
background-color: #000;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
padding: 10px 0;
text-align: center;
}
.topmenu ul li a:hover {
/* As a general rule, never use images for hovers */
background-color: #fff;
color: #000;
}
.topmenu:after { /* This is a clearfix to clear your floated elements */
content: "";
display: table;
clear: both;
}
header img {
display: inline-block;
width: 250px;
height: 190px;
}
header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 25px;
color: black;
vertical-align: top; /* if you want the text to start at the top of the picture. Otherwise try middle or bottom */
}
<div class="page">
<!-- always start with the first element on your page: here it's your navigation -->
<nav class="topmenu"> <!-- use html5 tags. If you need to support IE8 or below you can use HTML5 Shiv -->
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</nav>
<header> <!-- same, use html5 tags -->
<!-- As a general rule, css is for styling not html so don't put any width, height or style in img tag -->
<img src="http://placehold.it/250x190" alt="your picture description"/> <!-- always use alt text in images for accessibility purposes -->
<h1>SOME TEXT HERE</h1>
</header>
</div> <!-- don't forget this div that closes your .page -->
Remove all of your absolute positioning (and add in the missing </div> tag to finish the .page div - I'm assuming this is wrapping all of your content inside).
To center your content, replace your .page CSS rule with this:
.page{
width: 1000px; // I would reccommend using 960px instead as it is more standard
margin: 0 auto;
//add your padding in if you need it
}
Don't use absolute positioning until you understand it and why/how/when you should use it
I think you should rearrange your HTML markup.It doesn't seem like you are using the proper nested rule.I suggest you try to remove the img tag outside the h1 tag.Your div with class = "page" doesn't have a ending tag.