Jump to content
Sign in to follow this  
Antoi

Troubles with Navigation Bar

Recommended Posts

I'm learning with your tutorials how to build a web using css and I have problems to style the navigation bar. First, My logo (which is also my link to the home page) appears with a square around it with links characteristics but it only happens in IE. I also want to put the text that are the links to the inner pages on an image (circle) but i don't find the way to do it. Could anybody help me with these two problems please? post-91029-0-48181300-1328472897_thumb.jpg

Share this post


Link to post
Share on other sites

First of all, make sure your HTML has a propert <!DOCTYPE> tag at the top of the page and make sure that the code doesn't show any errors in the W3C validator I don't know what square you're talking about. Maybe it's the border around the image. You can remove the border with this CSS:

a img { border: 0; }

To put the text on the circles don't use <img> element. Turn the <a> elements into inline-blocks with the same width and height as the image and use the circle image as a background image.

.menu a {  display: inline-block;  width: 100px;  height: 100px;  line-height: 100px; /* Line height equal to height */  text-align: center;  background-image: url(circle.png);  background-repeat: no-repeat;}

  • Like 1

Share this post


Link to post
Share on other sites

To have the text as links that go to other pages but with an image as well, you can try something like this example:

<!doctype html><html><head><title></title>  <style type="text/css">a{background-image: url('3.gif');background-repeat:no-repeat;display: block;height: 32px;width: 32px;text-decoration: none;}</style></head><body> <a href="#" title="page">page</a> </body></html>

That targets the a and sets a background image to it, also setting it to block and putting the width and height to the width and height of the images' height and width which in my case is 32 by 32. Another way you can do this is by just making your navigation buttons/images in photoshop and place that image in the a tag like so: <a href="#" title="page"><img src="image here" /></a> (Edit: Didn't notice Foxes' post. )

Edited by Don E
  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your help Foxy Mod. I solved the problem with the border around the image thanks to you. Just one question. The code you just gave me is a class selector for the a elements right? Because I used it as such but it didn't work, it aligned the texts correctly but it didn't show the background image (circles). What could I do to solve the problem or what did I do wrong? This is the code as I put it in the css sheet:.menu{display:inline-block;width:120px;height:120px; line-height:120px; /* Line height equal to height */text-align:center;background-image:url('images/circulo.png');background-repeat:no-repeat;} This is the code in the home.html:<a class="menu"><a href="nosotros.html"><b>Nosotros</b></a><a class="menu"><a href="servicios.html"><b>Servicios</b></a><a class="menu"><a href="clientes.html"><b>Clientes</b></a><a class="menu"><a href="contactanos.html"><b>Contáctanos</b></a> and this is how it looks: alteregomkt I will really appreciate the feedback you could give me.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×