How could i improve this?

Sway

Active member
I have a few links in my sidebar/sponsors block. This is the raw hypertext block from xenporta. I was wondering if i could o anything to improve this and make things a bit less ugly..

The block:
QLiS4zp.png


The code:
HTML:
<xen:hook name="ad_sidebar_top" />
<div class="section">
    <div id="Sponsors" class="secondaryContent">
        <h3>Sponsors</h3>
<a class="Tooltip" target="_blank" href="https://allgamer.net/clients/aff.php?aff=174" title="Allgamer provides hosting for our minecraft server. If you are looking to host a minecraft server check them out. They offer High Performance Premium Hosting for a good price.">
            <img src="http://res.public-craft.com/mcl/assets/img/ag.png" alt="Allgamer" width="230px">
        </a>
        <a class="Tooltip" target="_blank" href="http://www.staminus.net/" title="Staminus Communications provides hosting for these forums. Choosing Staminus ensures your server will perform well and be protected from DDOS attacks.">
            <img src="http://i.imgur.com/nS5x7.png" alt="Staminus Networks" width="200px">
        </a>
    </div>
</div>

I have nothing in my extra.css to add any sort of styling to these images but am trying to find a way to style these images to make things look better..

Link to my board http://www.iconomycraft.com/forum/
 
Something I found weird was if I hovered my mouse over the sponsors.
The popup text would flash over and over.
It would alternate between ... cursor, hand, popup text ... over and over really fast.
It was weird.

(Latest chrome).
I see the same thing. I use waterfox. You need to hover over the bottom of the image. I am going to see what i can do to prevent that from happening...
 
It would alternate between ... cursor, hand, popup text ... over and over really fast.
Thats because the tooltip js figures the size of the a tag is smaller than it actually is. Simple way to fix it is to use display: block on the css for the a tag would help that. Also adding some paddings or whatever, between the images would partition them better. I wouldn't spend too much time on that, there really isn't much you can do with 2 images, unless you really want to draw attention to them.
 
Thats because the tooltip js figures the size of the a tag is smaller than it actually is. Simple way to fix it is to use display: block on the css for the a tag would help that. Also adding some paddings or whatever, between the images would partition them better. I wouldn't spend too much time on that, there really isn't much you can do with 2 images, unless you really want to draw attention to them.
I do want to draw attention to them. Those are affiliate links and referrals help me a lot. I would add some css to these but i am horrible with classes and linking the css to images..
 
Something I found weird was if I hovered my mouse over the sponsors.
The popup text would flash over and over.
It would alternate between ... cursor, hand, popup text ... over and over really fast.
It was weird.

(Latest chrome).

Same in firefox.

With regards to the original question you could always add in some nice box-shadows to the images, colour the sideblock differently from the others so it stands out, becomes a little more prominent so to speak.
 
Same in firefox.

With regards to the original question you could always add in some nice box-shadows to the images, colour the sideblock differently from the others so it stands out, becomes a little more prominent so to speak.
I would do that but like i said. I am not very good when it comes to advanced styling things.. I know i can add a class to the images and block then throw something in extra.css but i am not sure how to add it.
 
I do want to draw attention to them. Those are affiliate links and referrals help me a lot. I would add some css to these but i am horrible with classes and linking the css to images..
To fix the issue with the tooltip, add style="display:block" to the a tag in your code above. You should do that any time you use a image as a link, it makes the a tag have the same size as the image.
 
Top Bottom