Background image with hover

HTML & CSS
1

I need to apply a background image behind every ID#Videos. I tried the following (Link);

ID#Videos Li
ID#Videos Li a
ID#Videos
I currently have the background image under the following style:


#ThreeDMot li a {
	background: url('/construction/images/3dmot_icon.png')
}

(I will need to apply the same thing to ID#gallery, which I tried with no success) The :hover is not in place because I can’t get the background image to display.

Edit:
I’d also appreciate if someone could give me a screen shot of what the page looks like with whatever browser they are using at this stage, thanx.

2

Like this:


#videos li a{display:block}
#videos li a:hover{
background:red;/* put your background image here */
}
3

Screenshots will be here in about 10 minutes.

4

Paul, thanx. Although the BrowserCam results have expired.

5

No they should still be there. I think I’m still paid up :slight_smile:

6

Paul, I’ve been trying to find the block size of a element using Web Dev and firebug. When I think I have found the right dimensions it turns out wrong.

7

No they should still be there. I think I’m still paid up

Paul, when I check off which browser I want to preview, I get a page loads telling me about BrowserCam and it’s features etc, and a member login.

8

given the completely broken train wreck of a layout (text elements overlapping each-other, etc) with the endless jquery for NOTHING nonsense, non-semantic markup, IE conditional for NOTHING, nonsensical heading orders, fictional/pointless rel attributes, and fixed elements that make scrolling painful – hovers are the LEAST of your problems.

See attached .jpg once it’s approved.

9

It’s explained here.

10

It’s highlighting the block, but I can’t find the dimensions and I’ve tried tinkering with many things in firebug. What about BrowserCam, do you know what was the prob ?

11

Select the tab that says “layout” (its next to “computed”) and as you select elements on the page the layout picture shows all the box model dimensions for that element.

What about BrowserCam, do you know what was the prob ?
It’s working for me from that link above. I have no idea why you can’t see it - it should be working.

12

Select the tab that says “layout” (its next to “computed”) and as you select elements on the page the layout picture shows all the box model dimensions for that element.

Oh jeez Murphy thanxs Paul, I hate when I over look things because people assume you don’t know yet it simply was just over looked then you have to ask in a forum and arrrrghhh ya know the rest :slight_smile:

As for the BrowserCam, nothing shows up strange I believe you it works I only questioned because maybe you forgot to renewal but I knew it seemed un-logical for you to forget to renew. Strange.

13

That’s strange, it’s supposed to be publicly accessible - I’ll get someone else to try the link.

14

Alright, Thanx!

15

Browsercam link works fine for me :slight_smile:

16

Hm. Strange. When I tick the box then click the screen shot a page loads telling me about BrowserCam and what it can do and to login.

I wanted to ask, how do you position a block element. I tried padding and margins but it didn’t work. I want to position the block element vertically and stretch it horizontally.

17

Strange. I’ve changed the link so try this one now.

I wanted to ask, how do you position a block element. I tried padding and margins but it didn’t work. I want to position the block element vertically and stretch it horizontally.

To centre a static block element horizontally you give it a width and use auto side margins.

You can’t automatically center a block element vertically though. Usually you would just apply a margin-top to move it into position (assuming margin-collapse isn’t an issue).

There is a hack depending on the situation and is explained here.

18

I use the following code took which took a lot of research, trial, error, cursing and hair tearing :slight_smile:


//css
.hvr:hover,.alternator_1{background-color:#f90}
pix3{float:left;display:block;width:142px;height:150px;margin:4px 0 16px 42px;overflow:hidden;border:solid 1px #ddd}

//html
<h3 style="border: 1px dotted #f00" class="hvr pix">
  <a 
    title="Do you know what a bucket seat is" 
    href="http://localhost/Do-you-know-what-a-bucket-seat-is.html">
    Do you know…
    <span 
      style=
	"
	display: block; 
	background: url('/awww/subdomain/thumb/bucket-seat_thumb.jpg') 
	no-repeat scroll center center transparent; height: 128px;
	"
      >
      &nbsp;
   </span>
  </a>
</h3>

Where do I send my invoice :slight_smile:

19

The code I supplied in the previous post works for my dynamic site plus it also has a thumb hover as you can middle row on the right.

20

Hi John,

Sorry, I didn’t mean to ignore your post but your method is simply placing a background image at the center center position. It doesn’t actually vertically center any elements as such. It just centers a background image within the background of the element itself.

There’s nothing wrong with that if that’s what you want :slight_smile: