Image Navigation ,how?(not so newbie)

HTML & CSS
1

Hi. I have a problem.
So I’ve made this website:
http://www.hackstavastergard.com/

At the website you will see this:
* gästhem
* bed&breakfast
* uthyrning
* stipendium
* ledarskap
* möbler
* kontakt

I lined them up like that with css, here is the code:

html:

<div id="nav-main">
<ul>
<li><a href="http://www.hackstavastergard.com/gasthem.html">gästhem</a></li>
<li><a href="http://www.hackstavastergard.com/bed&amp;breakfast.html">bed&amp;breakfast </a></li>
<li><a href="http://www.hackstavastergard.com/uthyrning.html">uthyrning</a></li>
<li><a href="http://www.hackstavastergard.com/stipendium.html">stipendium</a></li>
<li><a href="http://www.hackstavastergard.com/ledarskap.html">ledarskap</a></li>
<li><a href="http://www.hackstavastergard.com/mobler.html">möbler</a></li>
<li><a href="http://www.hackstavastergard.com/kontakt.html">kontakt</a></li>

</ul>
</div>

css:

div#nav-main{
text-align:center;}
div#nav-main ul{
list-style-type: none;
margin : 0 20px;
padding : 0 0 0 20px;
}


div#nav-main ul, div#nav-main li {
display : inline;
margin : 5px;
padding : 0;
list-style-type : none;
}

li{
font-family:Georgia, 'Times New Roman', Times, serif; 
font-weight:normal; 
text-transform:uppercase;}

Now, the problem is that I want to replace the text(gästhem,bead&breakfast and so on) with images. How in the world do i replace those text with images from photoshop? What I predikt here is that the images will be to big or small for their own click-able box. I want them to be perfect in their boxes, pixel by pixel.

But I don’t know where to start, I can only guess.

  1. I slice(slice tool) the whole webpage I made in Photoshop and save it as html. Then I use the information to build the css(like box width and height).
  2. I make pictures bigger than they really are in photoshop. So if I make a image with width:100px and height:30px, then i create a box(div) with width:50 and height:15 px. That way I can move the image with top:X px or left:X px. That way then the image will fit perfect with the rest of the website.

Please help me out!!

2

Hi, good thinking, but keep it simple. :slight_smile:

If you want pixel perfection I suggest you use fixed dimensions in the nav.

Give the ul a width and auto side margins.
Use only one background image for the whole nav placed in the ul.
Float the items and give them a width that suits the ul.
Hide the links’ text overflow.

As example:


div#nav-main {
}
div#nav-main ul {
	margin: 0 auto;
	padding: 0;
	width: 700px;
	list-style-type: none;
	background: url(images/navbg.jpg);
}
div#nav-main li {
	float: left;
	margin: 5px;
	padding: 0;
}
div#nav-main a {
	float: left;
	width: 90px;
	height: 20px;
	overflow: hidden;
}
3

Basically exactly what EricJ said but this also shows how to make the image etc http://www.visibilityinherit.com/code/sprites.php

4

Hi Eric, you maybe confuses him not saying you’re using the image differently in your link. :slight_smile:

I didn’t meant sprites, I meant a fix background image instead of the precisely fit in place images he was mentioning. Only if he wants e.g. hover effects, sprites would be the way to go here.

Nice sprite making tutorial video though. :slight_smile:

5

Hi Erik. O I just assumed it was a sprite. :~)