1

我遇到了问题，我打字，我的文字出现在图像下方。如何使文字出现在红色框中的图像之外。我是否必须创建一个表格并指定它的宽度和高度？我想在 css 中完成并将其链接到 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;
  }
4

3 回答 3

1 
<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;
}
于 2012-04-17T18:01:30.110 回答
0

制作该图像float而不是使用绝对定位。根据需要使用margin以将其放置在正确的位置。

于 2012-04-17T18:01:58.527 回答
0

把它放在一个单独的 div 中并给它一个更高的z-index ??

于 2012-04-17T18:02:28.683 回答