2 Replies - 802 Views - Last Post: 06 September 2013 - 12:12 PM

#1 InfamousBiscuit  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-September 13

Task - Creation of a CSS image navigation bar.

Posted 06 September 2013 - 11:58 AM

Hello, I am fairly new to creating websites using CSS & HTML and I need some help.

I want to create a fully working CSS Image-based navigational button, but I'm not sure how to code it correctly.
Even after searching Google I still can't find an answer so I came here for help.
I have 4 buttons, but there are 3 different images per button:
-untouched
-hovered
-clicked


I can't seem to get my images to load up, I want them to sit horizontally at the top middle of my page, here is the code.
HTML
<body>
<ul id="navigation">
		<li id="1home"><a href="#"></a></li>
		<li id="2info"><a href="#"></a></li>
		<li id="3shop"><a href="#"></a></li>
		<li id="4cont"><a href="#"></a></li>
</ul>


CSS
body
{
	background-color: #878485;
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
	margin-bottom: 0%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0%;
	width: 800px;
}
#navigation
{
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	float: top;
	height: 100px;
	list-style: none;
	text-align: center;
	width: 400px;
}

/*NAV BUTTONS*/

#1home
{
	background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/home.png') no-repeat;
	height: 100px;
	width: 100px;
}
#2info
{
	background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/info.png') no-repeat;
	height: 100px;
	width: 100px;
}
#3shop
{
	background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/shop.png') no-repeat;
	height: 100px;
	width: 100px;
}
#4cont
{
	background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/cont.png') no-repeat;
	height: 100px;
	width: 100px;
}


I would like to know how to get my bar images to go horizontally (The images are currently not showing but there is a gap with left and right borders going vertically down the page.)
I don't know if there is a problem with the image directories?
Any help would be greatly appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Task - Creation of a CSS image navigation bar.

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Task - Creation of a CSS image navigation bar.

Posted 06 September 2013 - 12:10 PM

Quote

I don't know if there is a problem with the image directories?

it may work for you, but it will fail on everyone else. thus, do not use the file: protocol. usually relative paths (i.e. relative to the CSS file) are used.


Quote

I want to create a fully working CSS Image-based navigational button, but I'm not sure how to code it correctly.

given the HTML code, check out the original: A List Apart - Suckerfish Dropdown and HTMLDog - Sons of Suckerfish

Quote

I have 4 buttons, but there are 3 different images per button:
-untouched
-hovered
-clicked

all a matter of finding out what the CSS pseudo-class for that is named.

PS. Eric Meyer also has some neat CSS menu tricks listed.
Was This Post Helpful? 1
  • +
  • -

#3 InfamousBiscuit  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-September 13

Re: Task - Creation of a CSS image navigation bar.

Posted 06 September 2013 - 12:12 PM

Alright, thanks, I'm checking out the links now.

This website is more of a personal project rather than an online website. But that info is good to know, thanks once again:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1