图像作为要点

时间：2014-09-27 23:17:16

标签： html css

所以，我只是制作一个模拟网页（HTML＆amp; CSS），但是当我使用background-image属性时，它会被错位。

这里是它的样子的快照（为div添加绿色边框，＃watchlisten）：

Screenshot

这是我的HTML代码：

<div id="watchlisten">

            <h2>Watch/Listen</h2>

            <img class="boxesimg" src="images/boxes.png" alt="boxes" />

            <div class="break"></div>

            <img class="leftarrow" src="images/leftarrowbutton.png" alt="leftarrow" />

            <div class="wlblock">
              <img src="images/leftimage.png" />
              <p><a href="">Titanic letter could fetch £100,000</a></p>
            </div> <!-- watchlistenblock div -->

            <div class="wlblock">
              <img src="images/rightimage.png" />
              <p><a href="">Cameron defends "Muppet" remark</a></p>
            </div> <!-- watchlistenblock div -->

            <img class="rightarrow" src="images/rightarrowbutton.png" alt="rightarrow" />

            <ul>
              <li><a href="">Sentence 1</a></li>
              <li><a href="">Sentence 2</a></li>
              <li><a href="">Sentence 3</a></li>
            </ul>

         </div> <!-- watchlisten div -->

这是我的CSS：

body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
}

#topbar  {
   background-color:#7A0000;
   width: 100%;
   height: 45px;
   color: #FFFFFF;
}

.fixedwidth  {
   width: 1050px;
   margin: 0 auto;
   /* background-color: green; */
}

/* BBC Logo */
#logodiv  {
  padding-top: 8px;
  float: left;
  border-right: 1px solid #990000;
  padding-right: 15px;
}

/* Sign In Text */
#signindiv  {
  font-weight: bold;
  font-size: 0.9em;
  float: left;
  padding: 5px 50px 8px 8px;
  border-right: 1px solid #990000;
}

/* Sign In Image */
#signindiv img  {
  position: relative;
  float: left;
  margin: 6px 0 0 2px;
}

#signindiv p {
  float: left;
  margin: 10px 0 0 4px;
}

#topmenudiv  {
  float: left;
}

#topmenudiv ul  {
  float: left;
  margin: 0;
  padding: 0;
}

#topmenudiv li  {
  list-style-type: none;
  font-weight: bold;
  font-size: 0.9em;
  border-right: 1px solid #990000;
  height: 100%;
  padding: 15px 20px 10px 20px;
  text-align: center;
  float: left;
}

#searchdiv  {
  float: left;
  padding: 7px 0 0 8px;
}

#searchdiv input  {
  height: 25px;
  border: none;
  font-size: 0.9em;
  padding-left: 5px;
  padding-right: 22px;
  background-image:url('images/magnifyglass.png');
  background-repeat: no-repeat;
  background-position: right center;
}

/* Clears all float attributes */
.break  {
  clear: both;
}

#newsbar  {
   background-color:#990000;
   width: 100%;
   height: 100px;
   color: #FFFFFF;
}

#newsbar p  {
  margin: 10px 0 0 0;
  padding: 0;
  padding-top: 10px;
  float: left;
}

#newsheader  {
  font-size: 3em;
}

#uk  {
  font-size: 0.7em;
  padding-left: 20px;
}

#rss  {
  float: right;
  margin-top: 38px;
}

#rss img  {
  height: 13px;
  padding-right: 16px;
}

/* Topics Menu: Home, World, UK, England, N. Ireland, etc. */
#topicmenu  {
  padding-right: 16px;
}

#topicmenu ul  {
  background-color: #3E0C0D;
  padding: 5px 0 0 5px;
  margin: 0;
  height: 20px;
}

#topicmenu li  {
  list-style-type: none;
  font-size: 0.8em;
  border-right: 1px solid #990000;
  padding: 0 6px 0 6px;
  float: left;
  text-align: center;
  background-color: none;
}

/* UK Tab: Grey; */
.selected  {
  background-color: #EDEDED;
  color: #666666;
  height: 20px;
  position: relative;
  top: -4px;
  padding-top: 4px !important;
}

/* Content DIV */
#content  {
   width: 100%;
   color: #535353;
   font-size: 0.75em;
}

/* 2 April 2014 Last updated 15:23 */
#content p  {
  margin-right: 16px;
}

/* 2 April 2014 */
.date  {
  font-weight: bold;
}

/* Headline: Pollution to spread across England */
h1  {
  color: #1F4F82;
  font-size: 2.5em;
}

/* Headline Image */
.headlineimg  {
  height: 220px;
  float: left;
}

/* Content div with paragraph and 4 links */
.newsitem  {
  position: relative;
  left: 10px;
  top: -15px;
  width: 280px;
  float: left;
  font-size: 1.1em;
}

/* Link with color and no underline */
.newsitem a  {
  color: #1F4F82;
}

/* All anchor links have no underline */
a {
  text-decoration: none;
}

/* Links have underline when hovered */
a:hover  {
  text-decoration: underline;
}

/* Play button next to Links */
.video  {
  background-image:url("images/playbutton.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}

/* line heights for 4 links */
.linkheight  {
  line-height: 1.6em;
}

/* sound image */
.sound  {
  background-image:url("images/soundbutton.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}

/* Watch/Listen DIV */
#watchlisten  {
  background-color: #EEEEEE;
  float: right;
  width: 367px;
  position: relative;
  top: -80px;
  right: 17px;
}

/* Watch/Listen H2 */
h2  {
  color:#505050;
  position: relative;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  font-size: 1.8em;
}

/* 4 boxes (one orange) image */
.boxesimg  {
  float: right;
  position: relative;
  top: -14px;
  right: 10px;
}

/* left arrow image (WATCH/LOOK) */
.leftarrow  {
  float: left;
  border-right: 1px solid white;
  height: 134px;
}

/* Orange Div with words in them */
.wlblock  {
  float: left;
  background-color: #D1700E;
  width: 157px;
  border-right: 1px solid white;
}

/* a tag in class wlblock, made to be clickable */
.wlblock  a {
  color: white;
}

/*P tag in class wlblock */
.wlblock p  {
  margin: 9px 10px 6.5px 10px;
}

/* right arrow image (WATCH/LOOK) */
.rightarrow  {
  float: left;
  height: 134px;
}

#watchlisten ul  {
  border: 2px solid green;
  position: relative;
}

#watchlisten li  {
  list-style-type: none;
  background-image:url("images/liveimg.png");
  background-repeat: no-repeat;
  font-size: 1.4em;
  border-bottom: ;
}

这是我的JSFiddle与HTML＆amp; CSS：

http://jsfiddle.net/bbx4xdad/

2 个答案:

答案 0 :(得分：3)

您需要在列表项中添加填充。您提供的CSS代码显示Sentence 1，Sentence 2等列表项不是目标。尝试添加此代码：

#watchlisten ul li {
    padding-left: 25px;
}

或者，您可以尝试使用“list-style-image”属性：

ul {
    list-style-image: url('my-image.png');
}

答案 1 :(得分：1)

导致问题的原因有两个：

  1. 列表项上没有填充为背景图像创建空间。给他们一些左边填充并删除ul

    2. 上的填充

  2. 左箭头有float: left，这会带来无序列表。使用#watchlistendiv ul { clear: left; }

    3. 清除浮动

    HTML / CSS / Demo 

    body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
#topbar {
  background-color: #7A0000;
  width: 100%;
  height: 45px;
  color: #FFFFFF;
}
.fixedwidth {
  width: 1050px;
  margin: 0 auto;
  /* background-color: green; */
}
/* BBC Logo */

#logodiv {
  padding-top: 8px;
  float: left;
  border-right: 1px solid #990000;
  padding-right: 15px;
}
/* Sign In Text */

#signindiv {
  font-weight: bold;
  font-size: 0.9em;
  float: left;
  padding: 5px 50px 8px 8px;
  border-right: 1px solid #990000;
}
/* Sign In Image */

#signindiv img {
  position: relative;
  float: left;
  margin: 6px 0 0 2px;
}
#signindiv p {
  float: left;
  margin: 10px 0 0 4px;
}
#topmenudiv {
  float: left;
}
#topmenudiv ul {
  float: left;
  margin: 0;
  padding: 0;
}
#topmenudiv li {
  list-style-type: none;
  font-weight: bold;
  font-size: 0.9em;
  border-right: 1px solid #990000;
  height: 100%;
  padding: 15px 20px 10px 20px;
  text-align: center;
  float: left;
}
#searchdiv {
  float: left;
  padding: 7px 0 0 8px;
}
#searchdiv input {
  height: 25px;
  border: none;
  font-size: 0.9em;
  padding-left: 5px;
  padding-right: 22px;
  background-image: url('images/magnifyglass.png');
  background-repeat: no-repeat;
  background-position: right center;
}
/* Clears all float attributes */

.break {
  clear: both;
}
#newsbar {
  background-color: #990000;
  width: 100%;
  height: 100px;
  color: #FFFFFF;
}
#newsbar p {
  margin: 10px 0 0 0;
  padding: 0;
  padding-top: 10px;
  float: left;
}
#newsheader {
  font-size: 3em;
}
#uk {
  font-size: 0.7em;
  padding-left: 20px;
}
#rss {
  float: right;
  margin-top: 38px;
}
#rss img {
  height: 13px;
  padding-right: 16px;
}
/* Topics Menu: Home, World, UK, England, N. Ireland, etc. */

#topicmenu {
  padding-right: 16px;
}
#topicmenu ul {
  background-color: #3E0C0D;
  padding: 5px 0 0 5px;
  margin: 0;
  height: 20px;
}
#topicmenu li {
  list-style-type: none;
  font-size: 0.8em;
  border-right: 1px solid #990000;
  padding: 0 6px 0 6px;
  float: left;
  text-align: center;
  background-color: none;
}
/* UK Tab: Grey; */

.selected {
  background-color: #EDEDED;
  color: #666666;
  height: 20px;
  position: relative;
  top: -4px;
  padding-top: 4px !important;
}
/* Content DIV */

#content {
  width: 100%;
  color: #535353;
  font-size: 0.75em;
}
/* 2 April 2014 Last updated 15:23 */

#content p {
  margin-right: 16px;
}
/* 2 April 2014 */

.date {
  font-weight: bold;
}
/* Headline: Pollution to spread across England */

h1 {
  color: #1F4F82;
  font-size: 2.5em;
}
/* Headline Image */

.headlineimg {
  height: 220px;
  float: left;
}
/* Content div with paragraph and 4 links */

.newsitem {
  position: relative;
  left: 10px;
  top: -15px;
  width: 280px;
  float: left;
  font-size: 1.1em;
}
/* Link with color and no underline */

.newsitem a {
  color: #1F4F82;
}
/* All anchor links have no underline */

a {
  text-decoration: none;
}
/* Links have underline when hovered */

a:hover {
  text-decoration: underline;
}
/* Play button next to Links */

.video {
  background-image: url("images/playbutton.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}
/* line heights for 4 links */

.linkheight {
  line-height: 1.6em;
}
/* sound image */

.sound {
  background-image: url("images/soundbutton.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}
/* Watch/Listen DIV */

#watchlisten {
  background-color: #EEEEEE;
  float: right;
  width: 367px;
  position: relative;
  top: -80px;
  right: 17px;
}
/* Watch/Listen H2 */

h2 {
  color: #505050;
  position: relative;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  font-size: 1.8em;
}
/* 4 boxes (one orange) image */

.boxesimg {
  float: right;
  position: relative;
  top: -14px;
  right: 10px;
}
/* left arrow image (WATCH/LOOK) */

.leftarrow {
  float: left;
  border-right: 1px solid white;
  height: 134px;
}
/* Orange Div with words in them */

.wlblock {
  float: left;
  background-color: #D1700E;
  width: 157px;
  border-right: 1px solid white;
}
/* a tag in class wlblock, made to be clickable */

.wlblock a {
  color: white;
}
/*P tag in class wlblock */

.wlblock p {
  margin: 9px 10px 6.5px 10px;
}
/* right arrow image (WATCH/LOOK) */

.rightarrow {
  float: left;
  height: 134px;
}
#watchlistendiv ul {
  border: 2px solid green;
  position: relative;
  clear: left;
  padding: 0;
}
#watchlistendiv li {
  list-style-type: none;
  background-image: url("http://www.placehold.it/50");
  background-repeat: no-repeat;
  padding-left: 50px;
  font-size: 1.4em;
}
       

    <div id="content">
     
        <!-- newsitem -->

        <div id="watchlisten">

          <h2>Watch/Listen</h2>

          <img class="boxesimg" src="images/boxes.png" alt="boxes" />

          <div class="break"></div>

          <img class="leftarrow" src="images/leftarrowbutton.png" alt="leftarrow" />

          <div class="wlblock">
            <img src="images/leftimage.png" />
            <p><a href="">Titanic letter could fetch £100,000</a>
            </p>
          </div>
          <!-- watchlistenblock div -->

          <div class="wlblock">
            <img src="images/rightimage.png" />
            <p><a href="">Cameron defends "Muppet" remark</a>
            </p>
          </div>
          <!-- watchlistenblock div -->

          <img class="rightarrow" src="images/rightarrowbutton.png" alt="rightarrow" />

          <div id="watchlistendiv">
            <ul>
              <li><a href="">Sentence 1</a>
              </li>
              <li><a href="">Sentence 2</a>
              </li>
              <li><a href="">Sentence 3</a>
              </li>
            </ul>
          </div>

        </div>
        <!-- watchlisten div -->

      </div>
      <!-- fixedwidth -->

    </div>
    <!-- content -->

  </div>
  <!-- topbar -->
</div>
<!-- container -->

相关问题
最新问题