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 add a css class programmatically to a piece of code?

    How to combine css selectors

    How do you close the CSS preview view in Eclipse?

    How to apply css class to uploaded image? [closed]

    How to display two columns of blocks with CSS

    how to repeat a small background image througout the page?

    How to return a javascript set style property to CSS default

    JSF - How can I format my global messages in in a visually appealing way?

    How do I make a Javascript alert display only once, ever? [closed]

    How do prevent a div from resizing? [closed]

    How to add two lines of text inside a DIV

    How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?

    WordPress admin stylesheet not showing images

    Can you tell me why my webpage displays differently in IE and how to fix it

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    How to get the first parent that has a certain CSS property using jQuery?

    How to default a custom-styled dropdown to browser default style dropdown

    How to make a basic event calendar with javascript, jquery, html and css?

    Every third post excerpt shows up on its own line

    Flexbox: how to get divs to fill up 100% of the container width without wrapping?

    CSS: how do I position my slideshow counter up into the slideshow

    How to make a ccs transition only forward

    How to change CSS styling from within Angular 2 Component

    How to center this by using css?

    how to tag multiple elements? [closed]

    jQuery (1.8.1/1.8.2), Internet Explorer 8: How to remove css attribute transparent?

    How to contain a scrollable div element completely within another?

    How to make a css navigation menu “selected” option still clickable

    How to reset the style properties to their CSS defaults in javascript?

    How to use a JQuery Show/Hide script, to show hidden text