How do I place an image outside the body content?

keytoner · February 21, 2018

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!

iwato · February 21, 2018

You have two choices: one, you can use the CSS float property, or you can use Flexbox which is also a form of CSS. Although your page seems well-structured, it does not appear to be responsive in design. For this reason I suggest that you use the float property.

Roddy

If you find my response useful, please do not forget to say thanks by hovering over the heart and clicking on the trophy.

Ingolme · February 21, 2018

Create three columns, the middle one will have the content in it and the columns on the sides can have anything else. This page teaches how to create columns among other different layout techniques: https://www.w3schools.com/css/css_website_layout.asp

keytoner · February 21, 2018

THANK YOU VERY MUCH Ingolme!

Next time you find a hammer, hit me in the head with it!

Somehow you seem to be able to make things "back to the basics"! ,but I seem to be able to get things "over-confused"

Thank you again!

JD

Sign In

How do I place an image outside the body content?

Recommended Posts

keytoner

Link to comment

Share on other sites

iwato

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

keytoner

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity