Links with images

  gibbs1984 09:06 21 Aug 2006
Locked

Hi,

Me again, thanks for the help (Marie and others) on my other thread which I shouldn't have closed really cause it's not completely solved yet.

Right the problem I have is that in my External CSS for the anchor element a:hover I have it to change the background to navy which is fine but when I use my images to be an anchor the background hover shows up under neath the image, plus everything around the image moves when I hover over it.

Even if I use a text link the same thing happens and I can't seem to get rid of the hover without getting rid of it for my navigation links.

You can see the problem here click here

Any help appreciated.

Steve

  gibbs1984 09:08 21 Aug 2006

Here is my CSS:

/*
CSS for stephengibbs.co.uk
*/

/* start of body content */
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #E2EDFF;
line-height: 125%;
padding: 0;
margin: 0;
}
/* end of body content */

/* start of header tags */
h1, h2, h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1 {
font-size: x-large;
background-color: navy;
color: black;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: #BED8F3 url(gallery/heading_fade.jpg) repeat-y right bottom;
}

h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}
/* end of header tags */

/* start of list tag */
li {
font-size: small;
list-style-type: none;
}
/* end of list tag */

/* start of paragraph tag */
p {
font-size: small;
color: navy;
}
/* end of paragraph tag */

/* start of emphasize tag */
em {
text-transform: none;
}
/* end of emphasize tag */

/* start of div id #tagline */
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #BED8F3;
border-top: 3px solid #7DA5D8;
border-bottom: 3px solid #7DA5D8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
color: navy;
}
/* end of div id #tagline */

/* start of anchor element */
a {
font-weight: bold;
color: black;
}

a:link {
color: navy;
}

a:visited {
color: black;
}

a:hover {
text-decoration: none;
color: white;
background-color: navy;
border-top: 1px solid #E0FFFF;
border-bottom: 1px solid #E0FFFF;
border-left: 1px solid #E0FFFF;
border-right: 1px solid #E0FFFF;
}

a:active {
color: white;
background-color: navy;
}

a:hover img {
text-decoration: none;
}
/* end of anchor element */

/* start of div class .fun in about me */
.fun {
color: #339999;
font-family: Georgia, Times, Serif;
letter-spacing: 0.5em;
}
/* end of div class .fun in about me */

  gibbs1984 09:08 21 Aug 2006

/* This section deals with the position of items on the screen. It uses abosolute positioning - fixed x and y coordinates measured from the top-left corner of the browser's content display */

/* start of navigation area style on every page */
#navigation {
width: 180px;
height: 484px;
background-color: #7DA5D8;
background: #7DA5D8 url(gallery/navigation_background.jpg) repeat-x;
}

#navigation, #bodycontent, #header {
position: absolute;
}

#navigation, #bodycontent {
top: 107px;
}
/* end of navigation area style on every page */

/* start of body content style on every page */
#bodycontent {
left: 200px;
}
/* start of body content style on every page */

/* start of div class header on every page */
#header {
width: 100%;
border-top: 3px solid #7DA5D8;
}
/* end of div class header on every page */

/* start of picture style that was on about me page (no longer in use) */
.feature {
float: right;
margin: 10px;
}
/* end of picture style that was on about me page (no longer in use) */

/* start of gallery style on image gallery page */
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}

.photocredit {
font-weight: normal;
color: grey;
}

.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
/* end of gallery style on image gallery page */

/* start of table on fixtures page */
table.events {
border-collapse: collapse;
}
table.events th, table.events td {
padding: 4px;
border: 1px solid #000066;
}

table.events th {
font-size: x-small;
text-align: left;
background: #241374 URL(gallery/heading_fade.jpg);
color: #FFFFFF;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
}

table.events td {
font-size: small;
background: #E2EDFF URL(gallery/td.jpg) repeat-x top;
}

table.events caption {
color: #000066;
font-size: small;
text-align: left;
padding-bottom: 5px;
font-weight: bold;
}
/* end of table on fixtures page */

/* start of form on contact me page */
form.contact fieldset {
border: 2px solid navy;
padding: 10px;
}

form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}

form.contact {
padding: 0;
margin: 0;
margin-top: -15px;
}

form.contact label {
font-weight: bold;
font-size: small;
color: blue;
line-height: 150%;
}

form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}

form.contact .buttonarea input {
background: navy;
color: white;
font-weight: bold;
padding: 5px;
border: 1px solid white;
}

form.contact .buttonarea {
text-align: center;
padding: 4px;
background-color: #0066ff;
margin-top: 5px;
}
/* end of form on contact me page */

/* start of div id #search, style for search item on all pages */
#search {
position: absolute;
top: 80px;
right: 20px;
font-size: 11px;
font-weight: bold;
color: navy;
}
/* end of div id #search, style for search item on all pages */

  RicScott 22:43 21 Aug 2006

I've only glanced over the CSS, you put a lot up..but
instead of putting the images under the same style as a.hover, a.visited etc, try using a different style like:
a.image:link{...}
a.image:visited{...}
a.image:active{...}
a.image:hover{...}

you fill in the rest {...} blah blah with whatever you want.

  slightlymad 23:11 21 Aug 2006

I shouldn't be talking to you, Stephen, with those whacking great images that you HAVEN'T CHANGED...

But I will.

OK, here's what you've got:

a:link {
color: navy;
}

a:visited {
color: black;
}

a:hover {
text-decoration: none;
color: white;
background-color: navy;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
}

The borders in your hover declaration are making the thumbnails jump, as you have no borders set for the a:link (unvisited) state. So when you hover, the images are expanding to accommodate the borders.

You need to set borders for the unvisited links:

a:link, a:visited {
border: 1px solid #E2EDFF;
}

What this will do is set both the unvisited and visited borders to the SAME BACKGROUND COLOUR as your page (so you won't see them). Note that you can combine declarations, as I've done. Also you don't need to define top, bottom, right and left borders individually. If they're all to have the same properties, "border: xxx" is fine.

If you DO want different attributes, however, they should be in this order:

border-top
border-right
border-bottom
border-left

Think "TRouBLe", that's how I remember it.

Come back if this isn't clear...

  gibbs1984 13:33 22 Aug 2006

Sorry Marie, I promise that those big images won't be there tonight, was to busy playing around with the small images that I forgot about the big ones :o)

I will play around with my CSS tonight with the help you and RicScott have given me.

Once again thanks for the help, much appreciated but I'm sure I'll be back for some more help sonner or later with something ;o)

Thanks again all.

Steve

  gibbs1984 18:06 23 Aug 2006

Right,

This is starting to do my head in now, tried the codig you gave me and it still didn't work, if I set the borders for unvisited links then once I click on the navigation links theres a permanent border around it which I don't want, so I took the border of all links and now it's ok.

But a new problem has arisen, the images in the table don't align properly for some reasons and in Firefox if I move over my thumbnail the image changes slightly, very strange.

Any help please, click here

  gibbs1984 18:55 23 Aug 2006

It's ok I think I've solved it now, re-sized my images so their not so big, they don't distort now.

Still not sure about the border bit though but it's alright the way it is at the moment.

Steve

  slightlymad 19:18 23 Aug 2006

Your link problem can be solved by assigning a div to the gallery images. This way the properties will affect these ONLY the images.

Like this:

#gallery a:link: {border: 2px solid navy;}
#gallery a:visited {border: etc}
#gallery a:hover {border: etc}

Then wrap all the gallery images between the div tags in the HTML:

<div id="gallery"></div>

This way your navigation links will remain unaffected.

  gibbs1984 19:31 23 Aug 2006

Ah yes that makes sense, will try that later as well, it's not looking to bad at the moment though, what do people think - click here

Thanks Marie

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

OnePlus 5 review

Alice Saey's mesmerising animation for Dutch singer Mark Lotterman

iPad Pro 10.5in (2017) review

Comment booster votre iPhone ?