How to make my words not go under my picture in css


Tags: html,css

Problem :

I'm having a problem, I type and my words appear under the image. How do I make the words appear outside the image in the red box. Do I have to create a table and specify it's width, and height? I want to do it in css and link it to htm http://imgur.com/Yrwdn

  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="body.css"/>
  </head>
  <body>
  <h1>Bully-Free Zone</h1>
  <h2>"Online harassment has an off-line impact"</h2>
  <!--Menu-->
  <div id="nav">
  <a href="mainpage.htm" class="nav-link">HOME</a>
  <a href="page1.htm" class="nav-link">ASSISTANCE</a>
  <a href="page2.htm" class="nav-link">CYBER-BULLYING SIGNS</a> 
  <a href="page3.htm" class="nav-link">REPORT</a>
  </div>
  <img src="nobullying.jpg" id="picture"/>
  <!--Copyright-->
  <div id="center">
  <td> Copyright © 2012 Bully-FreeZone.com</td>
  </div>

  </body>
  </html>

Css:

  h1{color:black;text-align:center;font-size:40px;font-family:broadway;
  }
  h2{color:black; text-align:center;font-size:27px;font-style:italic;}

  /*Menu Buttons Orange*/
  a.nav-link:link
  {
  color: black;
  text-decoration: underline;

  }
  a.nav-link:visited
  {
  color: black;
  text-decoration: none;
  }
  a.nav-link:hover
  {
  color:black;
  text-decoration: overline;
  }
  a.nav-link:active
  {
  color: black;
  text-decoration: none;
  }

  /*Menu button styles*/
  #nav{text-align:center; font-family:"Bernard MT Condensed"; font-size:30px;
  }
  #center{text-align:center;}
  #picture{background-image: url(nobullying.jpg);
  width:200px;
  height:400px;
  position:absolute;
  left:10px;
  Top:190px;
bottom:10px;
  }


Solution :

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="body.css"/>
  </head>
  <body>
  <h1>Bully-Free Zone</h1>
  <h2>"Online harassment has an off-line impact"</h2>
  <!--Menu-->
  <div id="nav">
  <a href="mainpage.htm" class="nav-link">HOME</a>
  <a href="page1.htm" class="nav-link">ASSISTANCE</a>
  <a href="page2.htm" class="nav-link">CYBER-BULLYING SIGNS</a> 
  <a href="page3.htm" class="nav-link">REPORT</a>
  </div>

  <div id="content"> YOUR CONTENT HERE </div>

  <img src="nobullying.jpg" id="picture"/>
  <!--Copyright-->
  <div id="center">
  <td> Copyright © 2012 Bully-FreeZone.com</td>
  </div>

  </body>
  </html>

CSS:

#content {
   width:800px;
   margin:0 auto;
}

    CSS Howto..

    How to change or remove quote symbol in css

    How to move text list items to align with an image list item

    What's causing my hover image not to show it's transparency? [closed]

    How to represent x and y in svg symbol

    How to use a responsive background image that centers differently in both portrait & landscape?

    How do we group monospace font families with regards to their serif property? [closed]

    css: how to display prev and next links outside slider

    How to make rounded corner cut-out using CSS?

    How do I display an empty div tag with CSS?

    How to write css rule that run with a special browser?

    :hover property overriden after jquery effect, how to get it back?

    Show content only in printing page not in browser page using CSS or javascript

    How to add materialize css to an angularjs project?

    On DropDown/HTML Select Show Modal PopUp

    jQuery - failed show/hide buttons

    How to adjust progress bar with Jquery?

    How to prioritize a CSS class?

    How to mix 100% height with a minimum height

    How do I make background-size work in IE8?

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to vertically center text next to a radio button

    When and how to use !important CSS property in a bookmarklet with cross domains?

    How to create a dropdown with lu and li tags like this

    How to Unmerge CSS and JS in magento using MySQL Command

    CSS - how do I float another div over another without overlapping

    In firefox, how can I change an existing CSS rule

    CSS HTML How to make a larger image than div display in full in div

    Understanding how VS parses CSS in .ascx docs

    How to align the overlay with the list of icons on hover- JS /CSS

    How to make a box expand a distance from the sides