1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How could i improve this?

Discussion in 'Styling and Customization Questions' started by Sway, Jan 28, 2013.

  1. Sway

    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:
    [​IMG]

    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/
     
  2. Digital Doctor

    Digital Doctor Well-Known Member

    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).
     
  3. Sway

    Sway Active Member

    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...
     
  4. MagnusB

    MagnusB Well-Known Member

    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.
     
  5. Sway

    Sway Active Member

    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..
     
  6. Shelley

    Shelley Well-Known Member

    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.
     
  7. Sway

    Sway Active Member

    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.
     
  8. MagnusB

    MagnusB Well-Known Member

    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.
     
    Sway likes this.
  9. Sway

    Sway Active Member

    I'll do that later. :)
     

Share This Page