A cat's head floating mid-air and other fun and games

[Terence]

I need some advice. The site is nowhere near finished yet, but you’ll the idea.

On http://www.catteryinthecountry.co.uk/ I have introduced an oversize, part transparent .png graphic element, in the logo position, which will eventually be the logo (when I edit the .png and add the text), but for the moment is just visual decoration.

The problem is, although I have been able to get it to sit where I want it to be…

img, .wp-caption {max-width: none;position:absolute;top:-40px;}

the social icons disappear and the invisible part of the image masks the top 4 items in the menu.

Is this a mistake I have made in hacking your CSS or just my inability as a CSS jock?

But when it comes to http://www.catteryinthecountry.co.uk/feeding-care.html my hacking your CSS…

css]aside.sidebar { width: 210px; }
.page-content {padding: 0 30px 0px; background-color: rgba(0, 0, 0, 0.65);}
img.alignright {padding-bottom: 0px;}

causes another problem – half a cat’s head, which once sat nicely at the bottom of the text, which combed nicely around it, now floats skywards.

Also, I have noticed, that the entire logo image appears, in a disjointed sort of way, long before the rest of the page, and goes transparent on mouse-over, which is a function I guess I can switch off somewhere. But also, the entire graphic acts as a link to my home page, which really I only want the text (still to be added) to do. I imagine I have to map that part the image to do that, or create a CSS sprite or something like that.

Small leaps for mankind. 6 giant leaps for me…

I) Get my social icons back (my CSS seems to be different to your demo site)
2) Stop the logo image from masking the menu
3) Put the cat’s head back on his body
4) Switch off the logo mouse-over effect
5) Limit the clickable area to the logo text itself
6) Get the logo to appear along with the rest of the page.

Any help at all would be much appreciated.

[Author]

Posts