Jump to content

How do I place an image outside the body content?


keytoner
 Share

Recommended Posts

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>&copy; 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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...