Anchor background-position: top left; : Anchor class « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. Anchor class

Anchor background-position: top left;

  

?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
#header {
  width: 892px;
  height: 268px;
  background-image: url(images/header_bg.jpg);
  background-position: top left;
  background-repeat: no-repeat
}

#menu {
  float: left;
  margin: 63px 0 0 25px;
}

#menu li {
  display: inline;
  list-style-type: none;
  line-height: 35px;
}

#menu li a {
    background-color: blue;
  background-position: top left;
  background-repeat: no-repeat;
  height: 35px;
  display: block;
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: red;
  text-decoration: none;
  text-align: center
}

</style>
</head>
<body>
    <ul id="menu">
      <li><a href="index.html" class="but1_active">Home page</a></li>
      <li><a href="index2.html" class="but2">Articles</a></li>
      <li><a href="index2.html" class="but3">Latest Websites</a></li>
      <li><a href="index2.html" class="but4">Submit</a></li>
      <li><a href="index2.html" class="but5">Contacts</a></li>
    </ul>

</body>

</html>








Related examples in the same category

1.Pseudo-class Selectors for anchor
2.a:link
3.a:visited
4.a:hover
5.a:active
6.Link visited hover
7.link visited, hover, active
8.link visited, hover, active, focus
9.Set anchor hover in
  • under
    • 10.Set anchor link and visited: a:link, a:visited
    11.Set different color for anchor link and visited link
    12.Set color for anchor link, anchor visited, hover and active
    13.Set different anchor link style for navigation and content
    14.style for email anchor,
    15.Three level nesting for anchor link style setting
    16.Three level nesting for visited link style setting
    17.Three level nesting for visited link style setting for two
    18.Three level nesting for an anchor with id
    19.background image, repeat and position for anchor link hover
    20.background image, repeat and position for anchor link active
    21.Use anchor hover to highlight more than one tags
    22.Add border to anchor when hover
    23.a[href^='http://']:hover
    24.Rollover with image
    25.Set cursor for a link
    26.Anchor background-color: blue;
    27.Anchor background-repeat: no-repeat;
    28.Anchor height: 35px;
    29.Anchor display: block;
    30.Anchor float: left;
    31.Anchor font-family: Arial, Helvetica, sans-serif;
    32.Anchor font-size: 12px;
    33.Anchor color: red;
    34.Anchor text-decoration: none;
    35.Anchor text-align: center
    36.Anchor color: #FCEACE;