Jump to content

Good looking links

Elevator_Hazard

By Elevator_Hazard
in HTML/XHTML

 Share

Recommended Posts

Elevator_Hazard Newbie

Elevator_Hazard

Posted
Posted

I am very new to HTML but familiar and decent with other languages. I have seen a few really nice websites (.html) and they have a nice-looking navigation area. When you hover over the link, the box its in changes color, and I would like to know how to make something like that. (Probably uses tables, I can make tables and I am familiar with them)Thanks

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

I'm not going to say that you "can't" change the background colour of a table-cell when you hover over it, but it takes some client-side coding which is more than the Html you are learning. (ie: javascript) And I think another restriction will be the fact that IE doesn't work well (or at all) with the on:hover pseudo-class except for anchor tags.

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Actually, :hover in IE7 works on all elements, not just anchors (<a>). I think :hover in IE6 also worked on <td>s.If you need "the cell to be a link", you can expand the link to fit in the dimensions of the cell. To do this, add "display:blick" as well as dimensions set to 100% to the link's properties. Like this for example:

a {			 color: blue;background: red;display:block;height: 100%;width: 100%;}a:hover {		 color: red;background: blue;display:block;height: 100%;width: 100%;}

P.S. The fact that you're new to a language is not an excuse not to use it. Not for CSS at least. You'll resolve to it sooner or later, believe me.

Link to comment
Share on other sites
Err Dedicated Member

Err

Posted
Posted

Between your <head> and </head>. Like so:

<html>[b]<head>[/b][color="red"]<style type="text/css">a {  color: blue;  background: red;  display:block;  height: 100%;  width: 100%;}a:hover {		  color: red;  background: blue;  display:block;  height: 100%;  width: 100%;}</style>[/color][b]</head>[/b]<body></body></html>

Link to comment
Share on other sites
Elevator_Hazard Newbie

Elevator_Hazard

Posted
  • Author
Posted

Thanks very much, I'll update my post on my first template now.Here it is on this post:

<head><style type="text/css"> A{text-decoration:none}a {			display:block;height: 100%;width: 100%;}a:hover {		color: #DDDDDD;background: #808080;display:block;height: 100%;width: 100%;</style><script type="text/javascript">function mouseOver(){"td.Link1"}function mouseOut(){td td.link1 bgcolor="#00FF00"}</script><table width="100%" height="25%" align="center" bgcolor="#222222"><tr><td><p> Picture/banner/title goes here</p><! pic/title here></tr></head><body text="#656565" bgcolor="#000000" link="#777777" vlink="#999999" alink="808080"> <table border="0" width="60%" bgcolor="#DDDDDD" valign="top" align="center"> <! LINKS GO BELOW> <tr> <td align="center" class="Link1"><a href="www.w3schools.com">Link1</a></td></td> <td align="center" class="link2"><a href="www.w3schools.com">Link2</a></td> <td align="center" class="link3"><a href="www.w3schools.com">Link3</a></td> <td align="center" class="link4"><a href="www.w3schools.com">Link4</a></td> <td align="center" class="link5"><a href="www.w3schools.com">Link5</a></td> <td align="center" class="link6"><a href="www.w3schools.com">Link6</a></td> <! More can be added (copy+paste and change class) > </tr> </table><br>   <table height="20%" width="65%" bgcolor="#232323" align="center">   <td><p>Advertisement here</p></td>   </table><br>	<table height="120%" width="80%" bgcolor="010101" border="1" align="center">	<tr> <! Main Info >	<td width="15%" align="left" valign="top" height="60%">	<p> left side</p>	</td>	<td width="50%">	<p>Main area</p>	</td>	<td width="15%" align="right" valign="top" height="60%">	<p>Right side</p>	</td>	</tr>	<tr>	<td width="15%" align="left" valign="bottom" height="60%">	<p> bottem left</p>	</td>	<td width="15%" align="right" valign="bottom" height="60%">	<p> bottem right</p>	</td>

Link to comment
Share on other sites
groda_lotsapot Newbie

groda_lotsapot

Posted
Posted

This should help you with your CSS on the page abit

<html><head>	<title>Your Webpage Name Here</title></head><style type="text/css">body {	color: #656565;	background-color: #000000;}a {	color:#777777;	text-decoration:none;}a:link {	color: #999999;}a:visited {	color: #000000;}a:hover {	color: #DDDDDD;	background: #808080;	display:block;}a:active {	color: #808080;}table.type1 {	background-color:#232323;	width:95%;}table.menu {	background-color:#DDDDDD;	width:80%;}</style><body><div align="center"><table class="type1">	<tr align="center">		<td>Picture/banner/title goes here</td>	</tr></table><table class="menu">	<tr align="center">		<td><a href="www.w3schools.com">Link1</a></td>		<td><a href="www.w3schools.com">Link2</a></td>		<td><a href="www.w3schools.com">Link3</a></td>		<td><a href="www.w3schools.com">Link4</a></td>		<td><a href="www.w3schools.com">Link5</a></td>		<td><a href="www.w3schools.com">Link6</a></td>	</tr></table><br><table class="type1">	<tr align="center">		<td>Advertisement here</td>	</tr></table><br><table class="type1">	<tr>		<td align="left" valign="top" width="15%">Left Side</td>		<td rowspan="2" align="center">Main Area</td>		<td align="right" valign="top" width="15%">Right side</td>	</tr>	<tr>		<td align="left" valign="bottom">Bottom Left</td>		<td align="right" valign="bottom">Bottom Right</td>	</tr></table></div></html>

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...