Home/ Questions/Q 7803805
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T01:42:12+00:00

I’m having a problem, I type and my words appear under the image. How

  • 0

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
https://i.stack.imgur.com/BxdeE.jpg

  <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;
  }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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;
}
    • 0