Css troubles?

Melusine's picture
guh I have some questions about css and stuff x__x Any help will be much appreciated <33
confusion under cut, will be deleted later.



Text here!



^ supposed to be a div with a black bg ((courtesy of MrSanguine)) but it's not appearing? :\
Unless it's appearing for everyone else?
idk but i've tried a bunch of div codes and none of them are working? it's probably something really obvious but ehhh I can't figure codes out. :C
Also tried unplugged's tab codes and it doesn't make the divs go on top of each other and the divs don't acctually appear. :I

Also another question, I've looked around for tuts and stuff but I've noticed an influx of these cool hover-over-make-glowy-image type thingies lately and I'm just wondering how everyone is doing that? :0 unless its a private code then nvm. :B
Unplugged's picture

Did you set your input format

Did you set your input format to BBCode? This seems like something that would happen when it's not.

As for the image-change on hover, simple CSS tricks like that shouldn't be private or secret. That would be silly and restrictive. But to give credit where credit is due, I think Ireth uses these a lot in her commissions. That might be where the trend started, but I'm not sure.

It's probably better explained here. Basically, you have one image that has both states, the inactive and active, beneath each other. Using css, you cut off the image between these two states so that only the inactive state is visible. Using the ":hover" pseudo-class, you then adjust the positioning of that image so that only the active state is showing when you hover over the picture.
Think of a window frame with a large picture behind it. You move the picture up and down to see a different part of it through the frame.


Sorry if this was too theoretical or something.. here is how it would look like in practice, where your link image is 100x200 (each state is 100x100, one below the other):

<a class="hoverlink" href="link"></a>

<style>
.hoverlink{
display:block;
width:100px;
height:200px;
background:url('linkimage');}

.hoverlink:hover{
background-position:0px -100px;}
</style>
Aivilo's picture

Tracking this because

Tracking this because usefulness o3o