/    Sign up×
Community /Pin to ProfileBookmark

Image-based Horizontal Lists for Navigation…

Copy linkTweet thisAlerts:
Dec 28.2006

I’ve been searching around the net, but can’t find anything that is just what I’m looking for. The closest I’ve found is listamatic.

I’m wanting to create a “navigation bar” of sorts, using unordered lists, but instead of utilizing text for the links, I was hoping to use images.

Can this be done?

Thanx.

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpDec 28.2006 — Yes, it can be done. Just replace the text in your links with the HTML image tags.
Copy linkTweet thisAlerts:
@grumpyoldtechsDec 28.2006 — <ul>

<li><a href="#"><img src="image url" alt="some text about the image"/></a></li>

<li><a href="#"><img src="image url" alt="some text about the image"/></a></li>

<li><a href="#"><img src="image url" alt="some text about the image"/></a></li>

<li><a href="#"><img src="image url" alt="some text about the image"/></a></li>

</ul>

you will need to use CSS if you want to remove margins, padding, bullet points etc...
Copy linkTweet thisAlerts:
@stmasiauthorDec 28.2006 — I understand that part. However, how do you make the image change on roll-over?

Thanx.
Copy linkTweet thisAlerts:
@factorDec 28.2006 — Just make the images as background images for your links and add the rollover images to the hover event, this way you can create pretty rollovers with css.
Copy linkTweet thisAlerts:
@stmasiauthorDec 29.2006 — Factor...

Got code?

8^)>

I know how to set the background images, but not exactly sure how to set the hover event. I've been toying with the examples from listamatic, but just can't get any of them to work with images.

Also...my goal is to accomplish this without the aid of javascript.

Thanx again.
Copy linkTweet thisAlerts:
@bathurst_guyDec 29.2006 — What your better off doing is this:&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
#nav {
list-style-type:none;
}
#nav li {
display:block;
width: 100px; /*width and height of images*/
height: 20px;
text-indent: -5000px; /*takes the text off the viewable area of the screen, but the text is STILL THERE for screenreaders and search engines! */
float:left;
}
/*what you do is create your up and over image states IN THE SAME GIF with up on the left and over on the right. What this does is when the user mouse overs the link the mouse over image has ALREADY been loaded and therefore there is no LAG in waiting for the hover image to download. That is what I have done in the next few lines of code. Repeat these lines for each menu item*/
#home a {background: transparent url('home.gif') no-repeat top left;}
#home a:hover {background: transparent url('home.gif') no-repeat top right;}
#about a {background: transparent url('about.gif') no-repeat top left;}
#about a:hover {background: transparent url('about.gif') no-repeat top right;}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id="nav"&gt;
&lt;li id="home"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li id="about"&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@stmasiauthorDec 29.2006 — Thanx for the code.

Is there something in IE7 that would prevent the backgrounds from showing?

Thanx again.
Copy linkTweet thisAlerts:
@grumpyoldtechsDec 29.2006 — the main thing which causes bugs in IE or FF is bad coding.

IE and FF both set different standard margins, paddings etc... on tags if people don't set their own values you get display issues.

the amount of people ive had ask me to trawl through code because of gaps between divs and its caused by having a margin on a P tag
Copy linkTweet thisAlerts:
@ray326Dec 29.2006 — I don't see a display:block on the anchors. Give that a shot.
×

Success!

Help @stmasi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...