Jump to content

Navigational Links


N-Bomb(Nerd)

Recommended Posts

Hello, I'm just trying to learn a bit about css here, and I've seem to run into a problem.

 

I'm planning on having my navigational links(buttons) on the left side of my website banner. However, when I view my buttons in FF all looks well.. but the whole line across to the right is a link.. when in fact I just want the button to be a link. With IE however it looks and works just fine. Could someone take a look at my source here and tell me whats wrong?

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="buttons.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>

<a href="#"><div id="nav_btn">Button1</div></a>
<a href="#"><div id="nav_btn">Button2</div></a>
<a href="#"><div id="nav_btn">Button3</div></a>
<a href="#"><div id="nav_btn">Button4</div></a>


</body>
</html>

 

buttons.css

body {
background-image: url(./images/background.png);
background-repeat: repeat-x; 
background-color:black;
}

a {
text-decoration: none;
}


#nav_btn {
background-color: #FF0080;
width: 60px;
height: auto;

font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
color: #FFF;

padding: 5px;
}

#nav_btn:hover {
background-color: #FFF;
color: #000;
}

Link to comment
Share on other sites

why are you making divs to hold each link wouldnt a ul be way easier in the long run

 

and more semantic

 

I don't exactly know.. rofl! I'm not very good at html/css.. I kinda just skipped that and jumped into php and shit.. and now that I've coded the php part for a website I want to make.. well I kinda need to learn html/css.

 

I just tried to use ul, and I can't exactly get it work like I can with the div's. Is there a reason one shouldn't really use div's here?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.