Tagged: , , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1754

    Hello,

    In this theme the social icons in a post are beneath the author information. I have moved the above this information so they are “directly” beneath the post. However I am having a small problem with the space between the bottom of the post and the icons and a horizontal line.

    I have now this structure:

    Post

    Social icons

    horizontal line

    horizontal line

    author information

    What i want to achieve is:

    Post

    horizontal line

    social icons

    horizontal line

    author information

    So one of the horizontal lines needs to be moved above the icons and the space between the end of the post, line and icons need to be reduced somewhat.

    Any clues on how to get this done?

    I have tried to move the social icons div in between the closing div for the -end entry_content- and the closing div for the -end entry-. This does solve the space issue however also places a smal horizontal line beneath the icons.

    #36006

    Hey,

    Can you post a direct link to a page having this issue and I’ll look into it :)

    James

    #36007

    Sure here you go

    http://www.albruna.nl/test/

    #36008

    Oops that wasn’t a direct link was it:-o.

    Here is the direct link

    http://www.albruna.nl/test/?p=8

    #36009

    You need to change following code in style1.css:

    #top #social_icons ul{
    border-top:none;
    border-bottom:1px solid #e1e1e1;
    }

    to

    #top #social_icons ul{
    border-top:1px solid #e1e1e1;
    }

    and in style.css change

    #top #social_icons ul {
    clear:both;
    float:left;
    padding:0 0 10px;
    width:100%;
    margin:0 0 40px;
    }

    to something like:

    #top #social_icons ul {
    clear:both;
    float:left;
    padding:10px 0;
    width:100%;
    }

    #36010

    Thanks! The horizontal line is now above the icons. Is there a way to get the horizontal line beneath the icons a bit closer to those icons and have everything a bit closer to the post. So there is less of a gap between post and line and icons and line?

    Regards,

    Martin

    #36011

    You need to play with the padding value, you can also add a margin value. I.e use following code:

    #top #social_icons ul {
    clear:both;
    float:left;
    padding:10px 0 0 0;
    width:100%;
    margin: -20px 0 0 0;
    }

    The syntax goes: margin/padding: top right bottom left.

    #36012

    Thanks that solved it!

    I highly appreciate the help.

    Regards,

    Martin

    #36013

    Glad that I could help you.

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

The topic ‘Moving a horizontal line below social icons’ is closed to new replies.