Top links : Title section « CSS Controls « HTML / CSS

Top links

  
<!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" />
<title></title>
<style rel="stylesheet" type="text/css">
.meta {
  color: black;
  background-image: url(images/meta_bg.gif);
  background-position: top right;
  background-repeat: no-repeat;
  height: 36px;
  width: 924px;
  overflow: hidden;
}

.meta a {
  color: red;
  text-decoration: underline
}

.meta a:visited {
  text-decoration: underline
}

.meta a:hover {
  text-decoration: none
}

.meta p {
  display: block;
  float: right;
  line-height: 18px;
}

.metalinks {
  height: 23px;
  width: 166px;
  margin: 0 0 0 22px;
  padding: 13px 0 0 0;
  float: right;
  text-align: center;
}

.metalinks a {
  margin: 0 10px 0 7px
}



</style>
</head>
<body>
  <div class="meta">
    <div class="metalinks">
      <a href="#"><img src="http://java2s.com/style/logo.png" alt="" width="15" height="14" /></a>
      <a href="#"><img src="http://java2s.com/style/logo.png" alt="" width="17" height="14" /></a>
      <a href="#"><img src="http://java2s.com/style/logo.png" alt="" width="17" height="14" /></a>
      <a href="#"><img src="http://java2s.com/style/logo.png" alt="" width="15" height="14" /></a>
    </div>
    <p>Recruiters: <a href="#">Log in</a> or <a href="#">Find out more</a></p>                      
  </div>
</body>

</html>

1.	Underlined title
2.	Add background image to title text
3.	Add no repeat icon to title text
4.	Title format: font-family: Arial, sans-serif;color: #369;
5.	Add border line to title text
6.	Use background to highlight title text
7.	Title section
8.	Set line height for titled section
9.	Set font family for titled section
10.	Set title letter space for titled section
11.	Change title font style for titled section
12.	Letter drop for titled section
13.	Titled section with justified alignment
14.	Align title to the center
15.	Text transformation for title
16.	Set title size to small-caps
17.	Paragraph indent for titled section
18.	Place contact link list to the right top
19.	Adding shading to top bar
20.	Place language selection, about and contact information on the very top of the page

Top links : Title section « CSS Controls « HTML / CSS

Related examples in the same category