I'm building a page that has one image link and two text links (all pointing to the same URL).<br />
<br />
<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/landingcss.html">http://www.maps-gps-info.com/landingcss.html</a><!-- m --><br />
<br />
Two questions:<br />
<br />
1) One of the two text links does not make the cursor change to the "pointing hand" when you mouse over it (it remains an I-beam thingy-whatever-you-call-it).<br />
<br />
2) Clicking any of the links does not turn them red. However, after being taken to the page that the link points to and then hitting the "back" button, mousing over that link then turns it red and it remains red after removing the cursor.<br />
<br />
How to fix???<!--content-->1. The image that should be like link. <br />
Take a look at this code:<br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.maps-gps-info.com/image-files/geko201whbkgs.jpg" alt="Garmin Geko 101 GPS receiver" width="120" height="200"><br />
<br />
<br />
This is your code for the seccond image!<br />
<br />
But is should be like this:<br />
<br />
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"the link to the page"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.maps-gps-info.com/image-files/geko201whbkgs.jpg" alt="Garmin Geko 101 GPS receiver" width="120" height="200"></a><br />
<br />
But it is easier to use relative path to the image. <br />
<br />
Just look at the source code of the first image!<br />
<br />
2. Your links:<br />
You have to edit your CSS to this -><br />
#your divs a {<br />
/*define the style*/<br />
color: #000;<br />
}<br />
<br />
#your divs a:hover{<br />
color: #FF0000;<br />
}<br />
<br />
#your divs a:visited{<br />
color: #999999;<br />
}<br />
That should help for the collor of the links. It is working for me
<!--content-->Your links are wrong. <a> tags are inline elements, <p> and <div> tags are block level elements.<br />
Block level elements should not go inside inline elements.<!--content-->Thanks lavalamp - that was pretty simple, wasn't it? So, I learned something.<br />
<br />
Webfreak, I am not clear on your instructions about the CSS. Could I see a specific example of how to integrate it?<br />
<br />
Thanks!<!--content-->He just means use CSS instead of that old invalid code in your body tag. Put this in your head section and get rid of ALL the attributes in your body tag:body{<br />
margin:0;<br />
padding:0;<br />
background:#ffffff url(<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/imgs/backimage.gif">http://www.maps-gps-info.com/imgs/backimage.gif</a><!-- m -->) repeat top left;<br />
}<br />
<br />
a, a:link{<br />
color:blue;<br />
}<br />
<br />
a:visited{<br />
colorurple;<br />
}<br />
<br />
a:focus, a:hover, a:active{<br />
color:red;<br />
}<!--content-->I am sorry but I have made a kind of typing mistake. I have written the code for collors wrong. It should be only one # not ##.<br />
<br />
P.S: I would also suggest that you try to validate your HTML code. This process can hlep you out to solve lots of problems.<!--content-->Thanks for sticking with me, guys. I'm trying to be a good student (really).<br />
<br />
I made changes and now it's doing something slightly different:<br />
<br />
1) The image and its text link do not go red for hover or active.<br />
<br />
2) The other text link goes red for hover and takes me to its proper destination, but when I return via the back button, the text link is still red.<br />
<br />
Also, is there a way to take the embedded style and put it in the external CSS document?<!--content-->Originally posted by myrrh <br />
1) The image and its text link do not go red for hover or active.They do for me, but then I was using a good browser. In IE the border of the image does not change colour so I wrote some more styles for that.<br />
<br />
Originally posted by myrrh <br />
2) The other text link goes red for hover and takes me to its proper destination, but when I return via the back button, the text link is still red.That's because the focus is still on that link and the styles tell a:focus to be red. I have taken that off in the new styles but now it becomes a bit of an accessibility issue.<br />
If someone was tabbing through your links they would not know where they were up to because a link with focus would just look the same as a normal link.<br />
<br />
Originally posted by myrrh <br />
Also, is there a way to take the embedded style and put it in the external CSS document? It's called copy and paste.
<!--content-->
<br />
<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/landingcss.html">http://www.maps-gps-info.com/landingcss.html</a><!-- m --><br />
<br />
Two questions:<br />
<br />
1) One of the two text links does not make the cursor change to the "pointing hand" when you mouse over it (it remains an I-beam thingy-whatever-you-call-it).<br />
<br />
2) Clicking any of the links does not turn them red. However, after being taken to the page that the link points to and then hitting the "back" button, mousing over that link then turns it red and it remains red after removing the cursor.<br />
<br />
How to fix???<!--content-->1. The image that should be like link. <br />
Take a look at this code:<br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.maps-gps-info.com/image-files/geko201whbkgs.jpg" alt="Garmin Geko 101 GPS receiver" width="120" height="200"><br />
<br />
<br />
This is your code for the seccond image!<br />
<br />
But is should be like this:<br />
<br />
<a href = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"the link to the page"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.maps-gps-info.com/image-files/geko201whbkgs.jpg" alt="Garmin Geko 101 GPS receiver" width="120" height="200"></a><br />
<br />
But it is easier to use relative path to the image. <br />
<br />
Just look at the source code of the first image!<br />
<br />
2. Your links:<br />
You have to edit your CSS to this -><br />
#your divs a {<br />
/*define the style*/<br />
color: #000;<br />
}<br />
<br />
#your divs a:hover{<br />
color: #FF0000;<br />
}<br />
<br />
#your divs a:visited{<br />
color: #999999;<br />
}<br />
That should help for the collor of the links. It is working for me
<!--content-->Your links are wrong. <a> tags are inline elements, <p> and <div> tags are block level elements.<br />Block level elements should not go inside inline elements.<!--content-->Thanks lavalamp - that was pretty simple, wasn't it? So, I learned something.<br />
<br />
Webfreak, I am not clear on your instructions about the CSS. Could I see a specific example of how to integrate it?<br />
<br />
Thanks!<!--content-->He just means use CSS instead of that old invalid code in your body tag. Put this in your head section and get rid of ALL the attributes in your body tag:body{<br />
margin:0;<br />
padding:0;<br />
background:#ffffff url(<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/imgs/backimage.gif">http://www.maps-gps-info.com/imgs/backimage.gif</a><!-- m -->) repeat top left;<br />
}<br />
<br />
a, a:link{<br />
color:blue;<br />
}<br />
<br />
a:visited{<br />
color
urple;<br />}<br />
<br />
a:focus, a:hover, a:active{<br />
color:red;<br />
}<!--content-->I am sorry but I have made a kind of typing mistake. I have written the code for collors wrong. It should be only one # not ##.<br />
<br />
P.S: I would also suggest that you try to validate your HTML code. This process can hlep you out to solve lots of problems.<!--content-->Thanks for sticking with me, guys. I'm trying to be a good student (really).<br />
<br />
I made changes and now it's doing something slightly different:<br />
<br />
1) The image and its text link do not go red for hover or active.<br />
<br />
2) The other text link goes red for hover and takes me to its proper destination, but when I return via the back button, the text link is still red.<br />
<br />
Also, is there a way to take the embedded style and put it in the external CSS document?<!--content-->Originally posted by myrrh <br />
1) The image and its text link do not go red for hover or active.They do for me, but then I was using a good browser. In IE the border of the image does not change colour so I wrote some more styles for that.<br />
<br />
Originally posted by myrrh <br />
2) The other text link goes red for hover and takes me to its proper destination, but when I return via the back button, the text link is still red.That's because the focus is still on that link and the styles tell a:focus to be red. I have taken that off in the new styles but now it becomes a bit of an accessibility issue.<br />
If someone was tabbing through your links they would not know where they were up to because a link with focus would just look the same as a normal link.<br />
<br />
Originally posted by myrrh <br />
Also, is there a way to take the embedded style and put it in the external CSS document? It's called copy and paste.
<!--content-->