Little Sidebar CSS Help Needed

Community Forums Forums Design Tips and Tricks Little Sidebar CSS Help Needed

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  futurewebboss 1 year ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #71547

    futurewebboss
    Participant
    Post count: 64

    I’m trying to style the sidebar with some CSS to include a nice app icon and a background. I conjoured up the CSS below but the only thing that I can’t seem to get to work correctly is for the app icon to be fully displayed. As it is right now only about 25 percent of the app icon is showing up in the sidebar. The app icon is 30×30 pxl’s which is about the size I want and not quite sure what to change in the CSS to make it fully display.
    Thanks in Advance,
    Dan

    #sidebar .widget-title:before {
    background: url(images/icon-sidebar.png) no-repeat scroll 0 0;
    content: “”;
    display: inline-block;
    height: 18px;
    margin-right: 8px;
    width: 18px;
    }
    #sidebar h4.widgettitle{
    background: url(images/bck-highlight.png) repeat scroll 0 0;
    color: black;
    display: block;
    font-size: 14px;
    height: 47px;
    line-height: 47px;
    margin: 0;
    padding: 0 10px;
    text-transform: uppercase;
    }

    http://filmmakersvillage.com/dev1/
    #71580

    nutsandbolts
    Keymaster
    Post count: 3187

    On that first set of CSS rules, change the width and height from 18px to 30px. You may need to add some padding on the top to make it line up correctly, but that will at least get the whole icon to show.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71593

    futurewebboss
    Participant
    Post count: 64

    Thanks Andrea.
    Got me half way there -

    http://filmmakersvillage.com/dev1/

    Any ideas to get the bottom half of the icon to show up.

    #71596

    nutsandbolts
    Keymaster
    Post count: 3187

    The height is still showing as 18px, but I see 30px for the width. Make them both 30 and you should get the whole icon.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71607

    futurewebboss
    Participant
    Post count: 64

    Perfect Andrea. The entire icon is now in view.
    I tried to add the padding property to get the icon to locate mid point so that it’s lined up with the text but everything I’ve tried doesn’t seem to get the job done. Can you provide any guidance or assistance?

    http://filmmakersvillage.com/dev1/

    Thank You

    Dan

    #71610

    futurewebboss
    Participant
    Post count: 64

    I used margin-top:5px; and that seemed to get the icon centered nicely.
    But now would like the text to be centered as well.

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

You must be logged in to reply to this topic.