phpBB.nl

Code: Selecteer alles

    <div class="navigation">
      <ul>
        <li><a href="" class="home">Home</a></li>
        <li><a href="" class="forum" id="active">Forum</a></li>
        <li><a href="" class="previews">Previews</a></li>
        <li><a href="" class="reviews">Reviews</a></li>
        <li><a href="" class="downloads">Downloads</a></li>
        <li>
          <form action="{U_SEARCH}" method="post" class="nav-search" style="overflow: visible;">
                <fieldset>
                   <input  id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" /> 
                </fieldset>
            </form>
        </li>
      <ul>
    </div>

Code: Selecteer alles

.navigation {
  width: 100%;
  height: 42px;
  clear: both;
  margin-bottom: 5px;
}

.navigation ul {
  width: 844px;
  margin: auto;
}
.navigation li {
  float: left;
  display: inline;
  list-style: none;
}

.navigation li a {
  height: 42px;
  display: block;
  text-indent: -10000px;
  background-image: url('http://i30.tinypic.com/1rq4ib.png');
}

a.home {
  width: 92px;
  background-position: 0 0;
}

a.home:hover {
  background-position: 0 -41px;
}

a.forum {
  width: 94px;
  background-position: -92px 0;
}

a.forum:hover {
  background-position: -92px -41px;
}

a.forum#active {
  background-position: -92px -83px;
}

a.previews {
  width: 109px;
  background-position: -186px 0;
}

a.previews:hover {
  background-position: -186px -41px;
}

a.reviews {
  width: 112px;
  background-position: -295px 0;
}

a.reviews:hover {
  background-position: -295px -41px;
}

a.downloads {
  width: 134px;
  background-position: -407px 0;
}

a.downloads:hover {
  background-position: -407px -41px;
}

.nav-search {
  width: 303px;
  height: 42px;
  background: url('http://i30.tinypic.com/1rq4ib.png') no-repeat -541px 0;
}

.nav-search input {
  width: 150px;
  height: 21px;
  font-size: 1.6em;
  border-width: 0px;
  background-color: transparent;
  margin: 11px 0 0 57px;
}