Talon's Blog

Back to Talon's Blog

[18:35] It_Aint_Eazy: talon~
[18:35] It_Aint_Eazy: can you teach me your magic?
[18:35] Talon: Teazy
[18:36] Talon: I'm no magic, I'm a cheater
[18:36] It_Aint_Eazy: teach me to cheat~
[18:36] Talon: wich cheat would you like to have?
[18:36] Talon: inv. live? inv money?
[18:36] It_Aint_Eazy: the pic in the list cheat
[18:36] Talon: oh, high class
[18:37] Talon: moment, I'll blog it right away how it's done

So here how it's done! Look at your advanced CSS editor and scroll down to:

LOOK BELOW, UPDATE DUE CHANGES ON SOURCE

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

after that you'll find some classes like .header_cw
add here (fill int he italic parts):

.header_cw
{
z-index:-6;
overflow:visible;
height:[the number of pixels with wich the image will be over the list];
}
.header_cw div
{
background-image:url([your url of the image]);
position:absolute;
font-size:0px;
height:[the actual height of the image];
width:[the actual width of the image or your list];
z-index:-6;
padding-top:20px;
color:#ffffff;
}

How does this work?
the trick here is we're using the div wich holds the text "Currently watching" and put an image into this. we use this one because this div is in another div wich has a class. we have 2 important functions, Position:absolute; and Overflow:visible;.

the position absolute says "I'm here, just accept that and don't push me away, ignore me anyway..". quite emo.. but it makes it posibe that the Div with the class ignores his oversize and just keeps his own size.

but we're saying that this classed div still should show everything with the overflow:visible; command.

the last thing is the (negative) z-index wich makes it posible to give the divs a depth. (x=horizontal, y=vertical, z=depth)

ofcouse you'll have to do the same with the other headerclasses and just play a little with the give script...

Additional:
U'm kinda curious about it but it seems like you'll have to add this at the div#list_surround class.

filter:alpha(opacity=99);
-moz-opacity:0.99;
opacity: 0.99;

Update!!

Since the css got some limits and the source an update, following methode should be used now!

ehm, yea, i'm at school at the very moment and can't enter IRC.
Wich header do you want where?
I assume you mean those headers per categorie. My blog is not up to date, sorry for that.

actually you can snach the code from my anime listdesign because that's the working version of the changes plus additions to let everything work with IE too.
this is what you need to know:

As described in blog, didn't change_
#list_surround{
filter:alpha(opacity=99);
-moz-opacity:0.99;
opacity: 0.99;
}

and here with some changes_
.header_cw
{
z-index:-7; //negative depth to make it posible to put image behind the list
overflow:visible;
height:0px;
position:relative;
bottom:61px; //distance of the image wich is above the actual list
margin-top:60px; //distance of the image wich is above the actual list (I did -1px due the buildin at the grafics itself
}
.header_cw .header_title //instead of speaking to the div, we speak to the .header_title inside every header
{
background:url(your image url); //url of the list
background-repeat: no-repeat;
position:absolute;
font-size:0px;
height:200px; //height of the image itself
width:600px; //width of the image itself
z-index:-6;
padding-top:42px; //don't know what these are ^^'
padding-left:3px; //feel free to try what these do...
}