the website must look a specific way
Note, when you talk about the "look", you're talking about "presentation". In web development, it's good to have separation of presentation from the actual content. We do this by using CSS to define the presentation, and HTML to create the basic structure of the content (and JavaScript for the "behavior").
I want to create links
Think about the semantics. Always use the most semantically meaningful markup for your content. In this case, what you are really describing is a "list" of links. Don't think about the presentation just yet, think first about the semantics.
So start by creating an un-ordered list of links:
<ul id="nav">
<li><a href="#">Research</a></li>
<li><a href="#">Publication</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Openings</a></li>
</ul>
Since this looks like your main navigation list, I would give it an id of "nav" which can be helpful when you want to style it. Be sure to replace all the "#" with your actual link href values.
Note, there are many ways to approach this task, I'm only going over 1 to give you an idea.
By default, unordered lists (<ul>) will display vertically, with each list item (<li>) stacked below the previous one. You'll probably want to start by removing the list item markers:
#nav {
list-style-type: none;
}
Next, you probably want to remove margins and padding from the list, so each <li> extends from the very left side to the very right side of the list.
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
Next, you'll probably want your images to all be the same height and width. Lets say 300x100 for this example. So size your list items to match, and make sure there's no margin or padding:
#nav li {
margin: 0;
padding: 0;
width: 300px;
height: 100px;
}
Next, we want the link to "fill" the entire list item, so lets set it to be a block element instead of inline, and give it a height that matches the list item. Lets also make sure margin and padding are 0 on this too:
#nav a {
display: block;
margin: 0;
padding: 0;
height: 100px;
}
Now we need some way to add the images. Lets go back to the markup and add a class to each link. Again, there are other ways to accomplish this, but this one is simple.
<ul id="nav">
<li><a class="research" href="#">Research</a></li>
<li><a class="publication" href="#">Publication</a></li>
<li><a class="members" href="#">Members</a></li>
<li><a class="news" href="#">News</a></li>
<li><a class="location" href="#">Location</a></li>
<li><a class="openings" href="#">Openings</a></li>
</ul>
Now you have a way to add a background image to each link. For example:
a.research {
background: url(research.png);
}
a.publication {
background: url(publication.png);
}
...
This is the perfect place to use CSS sprites instead of individual images for each link. A search for CSS sprites should provide lots of information, and there are plenty of tools that make this easy.
At this point, you should have your images showing, with the text from the link also covering the image. You might consider keeping the text and adjusting it's position to sit nicely over the image, but if you want to remove the text entirely so that only the image is showing, you can just position the text off screen:
#nav a {
display: block;
margin: 0;
padding: 0;
height: 100px;
text-indent: -9999em;
overflow: hidden;
}
That's one way to do it. :)
