Hello, I am very confused. I have messed around with HTML and CSS but never understood it. I am trying to now.
I am trying to learn from a book called MURACH's HTML and CSS3.
I cannot figure out how to place an image outside of the content.
Here is what I am trying to explain.
This is the result of the html and styles.... the page
Here is the CSS ...
article, aside, figure, footer, header, nav, section {
display: block;
}
html {
background-image: -moz-linear-gradient(top, white 0%, #facd8a 100%);
background-image: -webkit-linear-gradient(top, white 0%, #facd8a 100%);
background-image: -o-linear-gradient(top, white 0%, #facd8a 100%);
background-image: linear-gradient(top, white 0%, #facd8a 100%);
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 600px;
background-color: white;
margin: 15px auto;
padding: 15px 25px;
border: 1px solid black;
-moz-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 5px 5px 0 0;
-moz-box-shadow: 5px 5px 0 0;
box-shadow: 5px 5px 0 0;
}
h1 { font-size: 200%; }
h2 { font-size: 125%; }
h1, h2, p {
margin: 0;
padding: 0;
}
a { font-weight: bold; }
a:link { color: green; }
a:visited { color: #ef9c00; }
a:hover { color: blue; }
ul { margin: 0 0 1.5em;
padding-left: 2em;
}
li { padding-bottom: 0.25em; }
p { padding: 0.25em 0; }
em { font-weight: bold; }
/* the styles for the header */
header {
padding-bottom: 2em;
border-bottom: 2px solid #ef9c00;
}
header img { float: left; }
header h1 {
color: #ef9c00;
text-align: center;
text-shadow: 2px 3px 0 black;
margin-bottom: 0.25em;
}
header h2 {
color: green;
font-style: italic;
text-align: center;
}
/* the styles for the section */
section { clear: left; }
section h1 {
font-size: 200%;
margin: 1em 0 0.35em;
}
#contact_us { margin-top: 1em; }
a.date_passed { color: gray; }
/* the styles for the footer */
footer {
margin-top: 2em;
border-top: 2px solid #ef9c00;
padding-top: 0.7em;
}
footer p {
font-size: 80%;
text-align: right;
}
and here is the html.....
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/main3.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<header>
<img src="images/logo.jpg" alt="Town Hall Logo" width="80">
<hgroup>
<h1>San Joaquin Valley Town Hall</h1>
<h2>Bringing cutting-edge speakers to the valley</h2>
</hgroup>
</header>
<section>
<h1>2011-2012 guest speakers</h1>
<nav>
<ul>
<li>October 19, 2011: <a class="date_passed" href="speakers/toobin.html">Jeffrey Toobin</a></li>
<li>November 16, 2011: <a class="date_passed" href="speakers/sorkin.html">Andrew Ross Sorkin</a></li>
<li>January 18, 2012: <a href="speakers/chua.html">Amy Chua</a></li>
<li>February 15, 2012: <a href="speakers/sampson.html">Scott Sampson</a></li>
<li>March 21, 2012: <a href="speakers/eire.html">Carlos Eire</a></li>
<li>April 18, 2012: <a href="speakers/tynan.html">Ronan Tynan</a></li>
</ul>
</nav>
<h2>Looking for a unique gift?</h2>
<p>Town Hall has the answer. For only $100, you can get
a book of tickets for all of the remaining speakers. And the bargain includes a
second book of tickets for a companion.</p>
<p class="indent">Or, for $50, you can give yourself the gift of our speakers, and still get an extra
ticket for a companion, but for just one of the events.</p>
<p class="indent">See you at the next show?</p>
<p id="contact_us"><em>Contact us by phone</em> at (559) 555-1212 for ticket information.</p>
</section>
<footer>
<p>© Copyright 2012 San Joaquin Valley Town Hall.</p>
</footer>
</body>
</html>
I want to be able to place an image on either side of the main content, and I just can't figure out how.
If anyone would clue me in, I will be forever indebted!
