Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Psd to Html issue.

[erinjnes]

Hi,

I am not an expert designer and actually learning designing. I have Psd template of a website and converting it to the Html format. In I have code almost everything well but i am getting issue in Navigation menu. I am using an image at the background of anchor text in the navigation bar. Image is of 25px height and it supposed to be shown on the hover. But i check after applying the css i can see the hover picture with 25px but instead background is stick with the size of actual size of text size of anchor text. Can anyone please help me in this? Thanks in advance.

[JayNL]

got an online example?

[Sam [Vissol]]

You need to add "display: block;" to the <a> in CSS

[ColinCronin]

It would really help to see the site online, but I tend to agree with Sam that you are probably missing the "display: block" attribute.

A suggestion though. Don't use Photoshop for website mockups. It's a poor tool to use for it. If you are going with Adobe, Fireworks is much better and it will make your wireframing much faster. The slice tool is more flexible which will allow you export chunks of your image directly into HTML that you can insert in the page.

Another tool you might look into Axure RP. This is actually an application dedicated for rapid prototyping and wireframing.

[erinjnes]

Originally Posted by Sam [Vissol]

You need to add "display: block;" to the <a> in CSS

Thanks it's working as what i was looking for.

[fredrikrob]

Originally Posted by Sam [Vissol]

You need to add "display: block;" to the <a> in CSS

"line-height: 25px; " will be helpful in this if you are not using it just use and check.

[vietdevelop]

Originally Posted by fredrikrob

"line-height: 25px; " will be helpful in this if you are not using it just use and check.

css file:
.nav
{
height:25px;
line-height:25px;
background:url('you url');
background-repeat:repeat-x;
}