Css Corner Adverts?

HTML & CSS
1

hi all,

Does anyone know how to do corner adverts successfully?

I am trying to copy this one:
http://www.impressivewebs.com/demo-files/page-corner/

Here is my version:
corner ad template

The problem is,
mine has a horizontal scrollbar at the bottom, which i dont want,
which shows the rest of the corner image which is supposed to be hidden

Any advice?

Or know or a good corner ad tutorial?

Thanks in advance!

2

They get away with it by adding

body {
  overflow: hidden;
}

But that will destroy your site, which has a lot more content to which you’d no longer be able to scroll.

Personally, I’d just ditch the CSS3 rotations and place a square image (the bottom left side of which is white, making it look like an orange triangle) up in the top right corner.

Otherwise, you could see if the tips in these threads are any help:

3

If you place the corner in another element and apply overflow:hidden to that parent then you will avoid cutting all your content off with overflow:hidden on the body.


#container{position:relative;z-index:1;}
#corner-ad{
    position:absolute;
    top:0;
    right:0;
    width: 200px;
    height: 200px;
    overflow:hidden;
}
#corner-ad a {
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: -100px;
    right: -100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    z-index:99;
}



<div id="corner-ad"><a  href="#"><img width="200" height="200" title="Click the Corner!" alt="Click the Corner" src="http://www.bluecrushdesign.co.za/assets/images/page-corner.jpg"></a></div>
4

thanks paul!
this works perfect!!

any idea how to get it to work in IE?
i have IE8…

i tried this code the article gave me,
but dont really understand it all and it didnt work:

#corner-ad {
top: -142px\9;
right: -60px\9;
*right: -140px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=‘auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=‘auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)”;
zoom: 1;
}

5

Yes you just need to add it to the code I gave you with these amendments:


#corner-ad a {
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: -100px;
    right: -100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    z-index:99;
  top: -140px\\9;
    right: -60px\\9;
    *right: -140px;
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
    zoom: 1;
}

The matrix filter tips the element and does not spin it around a central point so you have to offset it.

6

ok… it definately shows in ie8 now…
just doesnt rotate on the corner properly…

heres a screenshot of what it looks like in mine (ie8):
http://www.bluecrushdesign.co.za/ie8.jpg

what does it look like in yours?

7

Where is the IE code - it’s not in that page above ?

8

ahhh…i was testing locally and didnt allow active x script…
corner ad template

sorry, working ok now!

thankyou so much! :wink:

9