Creating Link Buttons With Design on Webpage 4

[WindnWillow]

Hi
I have been learning HTML, and I am trying to create a web page with Link Buttons on the side of the page to navigate the user from one page to another. I have learned how to just create a basic list and make the elements in the list links, but I am not sure how to make the list as buttons with design behind them much like the links in these pages.

http://www.aboutfacesentertainers.com/caricature/caricature.html

or

http://www.dgif.virginia.gov/fishing/

if someone could help me out I would much appreciate it.
Thanks

 

[ca8msm]

I am not sure how to make the list as buttons with design behind them much like the links in these pages

Why don't you just look at the "View Source" page for the sites you listed?


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[WindnWillow]

I checked out the source code, and because I am such a beginner most of it seemed foreign to me. I've read through a few books, and none of them explain just what I need to do in order to add design to create buttons behind my links. I figure it is really basic and simple, but I am stumped.

 

[trollacious]

There are LOTS of good tutorials on the Internet to learn the basic stuff. I suggest you visit Google and try "HTML link tutorial", or even "HTML tutorials".

Lee

 

[Lowet]

You can use clickable images, images in links or elements with background image set in CSS. It's easy.

Clickable images:

<img src="one.gif" onclick="location = '[URL unfurl="true"]www.mysite.com/one.php';"[/URL] />
<img src="two.gif" onclick="location = '[URL unfurl="true"]www.mysite.com/two.php';"[/URL] />

Images in links:

<a href="[URL unfurl="true"]www.mysite.com/one.php"><img[/URL] src="one.gif" border="0" /></a>
<a href="[URL unfurl="true"]www.mysite.com/two.php"><img[/URL] src="two.gif" border="0" /></a>

Elements with background image set in CSS:

<span style="background-image: url('one.gif');" onclick="location = '[URL unfurl="true"]www.mysite.com/one.php';">&nbsp;</span>[/URL]
<span style="background-image: url('two.gif');" onclick="location = '[URL unfurl="true"]www.mysite.com/two.php';">&nbsp;</span>[/URL]

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Vragabond]

Please ignore first and last suggestion by Lowet. They are terrible solutions for your list. Rather, I would suggest you consult the following list to find a menu that suits you:

http://css.maxdesign.com.au/listamatic/

Also, check the ListTutorial found at the top of the page.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ca8msm]

Please ignore first and last suggestion by Lowet.

Yes, a CSS based approach for menus is much better than a javascript one. You should also look at using lists (<ul> and <ol> elements) for your menus as they are really a list of pages. This will be shown if you follow the examples that Vragabond linked to.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Lowet]

Gee, guys!
It was just examples of elements. You could use table cell or any other tags. And it must not be clickable. I just wanted him to know the possibilities..

To make a button, the best way is to use an image inside an anchor (link). This is then supported in all browsers. Don't forget to set the TITLE/ALT properties and set the BORDER to 0 on the image - if you don't want a border on the image..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[ChrisHunt]

The point is, using Javascript to do the link instead of the <a> element is a really bad idea for an internet site. Partly because some people browse with JS switched off, but mainly because search engines don't run JS either. If you want to get your whole site indexed, don't link like this!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ca8msm]

Gee, guys!
It was just examples of elements.

That's fine...if you explain this up front. We don't know this is what you mean, and in the context of this thread the original poster (and any future readers) may have thought this was the best method, which it clearly isn't.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Lowet]

Yes, I should have written what of the examples which is the best, but I forgot. I just wanted to share different ways of doing the job. Sometimes you don't want to use A links like in a HTA application maybe. However, I think he got the point. Use the A links with IMG tags within them..
No point of making war here..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Foamcow]

You can drive a car while drunk. Doesn't mean you should.

If someone asks a question, give them a single good answer.
Invariably if you provide 3 options the OP will pick one of the 2 least suitable.

Incidentally option 3 would probably fail since <span> elements are inline and so will only be as wide as their content. In this case that's a single blank space.

Options 1 and 3 are examples of extremely bad practice. Overcomplex, unnecessary and likely to simply lead to more problems and questions. Why even suggest them? It's not a competition to see who knows the most ways of doing something. Just show the 'right' way.

No, there's no point in starting a war here, but there's every point in ensuring that visitors get proper, helpful advice.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[iulyan26]

<a href="

http://www.google.ro"

title="pop" >Here is romanian google </a>

a= anchor
href = the link
title = the tooltip
and between the tag a(<a href=""> here </a>) is the name of the link

if you want to make a link in js i suggest you to make like this
<a href="#" onclick="alert('booo');return false;">alert mr Bau ></a>

if you tell the anchor to return false than it won't try to open other links

the buttons are almost the same ..

<input type="button" name="butonName" value="Click me" onclick="bau bau" />

i hope it helps you





whend all you need is time

http://www.fleshsoft.eu