Grow your CSS skills. Land your dream job.

[Solved] Problems adding image to sidebar

  • # October 5, 2009 at 5:15 pm

    Hi,

    If you look at my contact me section on my sidebar, there are 3 images… I would like to add a Skype image to that list but everytime I do this it goes below the list, I tried to extend the sidebar a little but it ended wrong.

    Any thoughts on how I do this?

    Code:
    #content #sidebar {
    float: right;
    width: 27%;
    }
    #content #sidebar p {
    font-size: 15px; /* dontate button) */
    line-height: 22px;
    color: #FFFFFF;
    }
    #content #sidebar p a {

    color: #FFFFFF; /* dontate button) */
    text-decoration: none;
    }
    #content #sidebar p a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #sidebar p a:hover {
    color: #FF9933;
    text-decoration: none;
    }
    #content #sidebar h1 {

    color: #FFFFFF; /* feedburner button) */
    font-size: 10px;
    }
    #content #sidebar h2 {
    color: #FFFFFF; /* categories button) */
    font-size: 15px;
    }
    #content #sidebar h3 {
    font-size: 15px;
    color: #FFFFFF;
    }
    #content #sidebar h3 a {

    color: #FFFFFF;
    font-size: 17px;
    text-decoration: none;
    }
    #content #sidebar h3 a:hover {
    color: #FF9933;
    text-decoration: none;
    }
    #content #sidebar h2 a {
    color: #FFFFFF;
    font-size: 15px; /* Subscribe button) */
    text-decoration: none;
    }
    #content #sidebar h2 a:hover {
    color: #FF9933;
    font-size: 15px;
    text-decoration: none;
    }
    #content #sidebar li {
    color: #0000FF; /* Bullet point of posts button) */
    line-height: 20px;
    }
    #content #sidebar li a {
    color: #FFFFFF; /* posts button) */
    font-size: 15px;
    text-decoration: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    #content #sidebar li a:link {
    font-size: 15px;
    color: #FFFFFF; /* seconds posts button) */
    text-decoration: none;
    }
    #content #sidebar li a:hover {
    color: #FF9933;
    text-decoration: underline;
    }
    #content #sidebar a {
    color: #000000;
    }

    Am using a text widget for to put these images in so they won’t show up in the code

    Thanks

    # October 5, 2009 at 6:31 pm

    C’mon now, Lee! You should know better by now!

    A link to the website for those that don’t know it. Preferably a screenshot of the problem (ie, do you mean the image shows up at the very bottom of the list, past every single item? Or just below the other images that are there?).

    # October 6, 2009 at 4:34 am

    Sorry, I was in a rush last night..

    Screenshot… http://i45.photobucket.com/albums/f56/p … ure1-7.png

    link http://www.leehughes.co.uk

    am trying to get the skype image in line with the other images. I played around with the code but it ended but a big mess..

    # October 6, 2009 at 6:42 am

    SOLVED

    # October 6, 2009 at 11:41 am
    "leehughes" wrote:
    SOLVED

    If you could sum up what you did wrong and how you fixed it, it might be able to help somebody further down the road who has the same problem! Pretty please?

    # October 6, 2009 at 11:48 am

    I had to reduce the width of my main content as my sidebar was at a fixed width and thus making the skype image fall to the next line. So I went into my main content code and reduced the width thus allowing more space for sidebar.

    My sidebar width was in % which causes it to go funny a lot of the time, I changed this to px and worked out the largest width on my sidebar and made the width that size, turned out to be about 280px or something.

    That was it, it was the % that was throwing me off..

    @thedoc.. sorry I would have given a full post explaining and answering my posts but am snowed with loads of work a the mo, I hope this makes sense to people :)

    Thanks

    # October 6, 2009 at 11:56 am

    Ah yes, another reason why I loves me some fixed width.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".