CSS - Multiple Links On One Image

Hi,

I have some links in a <ul> list. I have set them to have a background image using CSS. When I rollover the links using IE6 the egg timer appears briefly. No such problem with FF or Opera.

Anyone come across this before?

Here's my CSS:

Code:

#section1 div ul{
padding:0;
margin:0;
}
#section1 div li{
list-style-type:none;
margin:15px 0 0 0;
}
#section1 div li a{
color:#fff;
text-decoration:none;
padding-right:20px;
background: transparent url(/newsite/images/square.gif) right center no-repeat;
display:block;
}

edit: the sites @ www.tomaustin.dsl.pipex.com/webdev

Ive been doing some googling and cant find out how it works

how do i apply attributes like a:link, a: hover to an image

I had some like

Code:

image a:hover, a:link, a:active, a:visited {
     border: etc..
}

this does not work..it comes up with the horrid blue and purple backgrounds

how do i do it?

tom:


)

Hobby Helper Model Trains

The above link is where my problem is...

If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange.

There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move.

Any help will be GREAT!! THANKS!

Hi Guys,

Ive not been doing the CSS stuff too long as I used to use tables all the time for this stuff.

Im ultimately trying to get 3 news articles for eg on a homepage with a mini image to the left of the text which wraps around it. The text sometimes is not going to be the size of the image so the next article needs to drop to the next line underneath. It isnt though and its listing in a diagonal line instead.

Any one got any tips.

Code:

			<div id="m1">
				
				<div class="nw1">
				<h2><a href="/">Money test title</a></h2>
				
				<p><img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" />Latest shinanigans on the money savings scene today are... just gonna pack this out to see if the image does eventually fit in at all which would be nice because it should work! But who knows eh? :D Its just an interesting topic to look into la de dah de dah!</p><br />
				</div>
				<div class="nw1">
				<h2><a href="/">Money test title</a></h2>
				
				<p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br />
				</div>
				<div class="nw1">
				<h2><a href="/">Money test title</a></h2>
				
				<p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br />
				</div>
			</div>

Ive tried a few things like putting div's around each specific article see if i could somehow force it to a new line but it isnt working.

The img tags ive moved about. Im using float left on them.

Any one any suggestions? Im really stumped and close to hitting the monitor

If it helps I could pm the url to you if you think u can help.

Thanks guys. Im hoping this is a relatively easy problem as most sites layout like this just I can't get it to do it! hehe!

Hi Guys,

I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image.

Here's what I have so far.


img.top {vertical-align:text-top;}

<a href="http://company.com/graphics/thumb.jpg">
<img class="top" src="http://company.com/graphics/thumb.jpg">
</a>
<a href="company.com">sample text</a>
<a href="company.com">second line</a>


Any ideas? I've tried like every switch for the vertical-align property...

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links:

Code:

a:link {
  color: red;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: red;
  text-decoration: none;
}
a:active {
  color: red;
  text-decoration: underline;
}

Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined.

However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined.

I want visited links to act the same. They only way I could get them to act the same was to do the following:

Code:

a.general:link {
  color: red;
  text-decoration: none;
}
a.general:visited {
  color: red;
}
a.general:hover {
  color: blue;
  text-decoration: underline;
}
a.general:active {
  color: red;
  text-decoration: underline;
}

This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this?

I have what seemed to be a simple idea but is turning out to bother me.
In my style sheet i want to put a base url followed by a user id
Link looks like this
Code:

http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=

Now in my html i have this
Code:

<table><tr><td >My name<td >Job position<td >606959150</tr>

The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this
Code:

<a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a>

I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide

My first post Website:www.freewebs.com/weareamazing

I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help!

Hi,

If I have the following CSS:

body {
margin: 0px;
padding: 0px;
}

a:link, a:visited {
color: #F36706;
text-decoration: none;
}
a:hover, a:active {
color: #F36706;
text-decoration: underline overline;
}

#siteDimention {
width: 758px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

How come the links in my page aren't changing from the normal blue/purple ones?

I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links.

The HTML:
Code:

<div id="homelink"><a href="index.html"></a></div>

The CSS:
Code:

#homelink{
	position:absolute;
	width:53px;
	height:17px;
	margin-top:25px;
	margin-left:70px;
	z-index:10;
}

#homelink a{
	display:block;
	background-image:url(images/links/home.png);
	background-repeat:no-repeat;
	width:53px;
	height:17px;
}

#homelink a:hover{
	display:block;
	background-image:url(images/links/homehover.png);
	width:53px;
	height:17px;
}

As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it.

Is there any way to solve this so that no border appears?

Hi,

I have CSS document like so:

Code:

div.menu A:link {
definitions 
}
div.menu A:visited {
definitions 
}
div.menu A:active {
definitions 
}
div.menu A:hover {
definitions
}

And in my HTML document

Code:

<div class="menu">
Links are then put in here
</div>

But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck

Thanks alot!

I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness?

<div id="footer_bottom" class="bold">

<a href="sitemap.php" title="Sitemap">Sitemap</a> |
<a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> |
<a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a>

</div>

I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE.

My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>?

Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop)

Code:

<html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>

<body>
<div id="links">
	<ul>
		<li><a href="#">links</a></li>
		<li><a href="#">link 2</a></li>
		<li><a href="#">three</a></li>
	</ul>
</div>

<div id="links2">

		<a href="#">links</a>
		<a href="#">link 2</a>
		<a href="#">three</a>

</div>
</div>
</body>
</html>