images allignements

  • Author
    Posts
  • #1275893

    mimitrans
    Member

    so i was trying to use the “fixed” code to make some custom, floating social icons (blogroll links) , the problem is that each time i use the fixed code, images just align over each others. here are the codes i used :
    .blogroll li {
    border: none;
    float: left;
    list-style-type: none;
    padding-right: 55px;
    }
    .blogroll li {
    position: fixed;
    top: 75px;
    }
    .blogroll li {
    vertical-align: top
    }
    .blogroll li {
    width: 37px ;
    height: 100px;
    }

    The blog I need help with is mimitrans.com.

    #1275982

    mimitrans
    Member

    .blogroll li {
    border: none;
    float: left;
    list-style-type: none;
    padding-right: 55px;
    }
    .blogroll li {
    position: fixed;
    top: 75px;
    }
    .blogroll li {
    vertical-align: top
    }
    .blogroll li {
    width: 37px ;
    height: 100px;
    }

    #1275984

    justpi
    Member

    Forget all that and use a Text widget. Basic coding here:
    http://wpbtips.wordpress.com/2009/04/01/codes-useful-for-text-widgets/

    #1275988

    mimitrans
    Member

    if i wanted to use text widget i wouldn’t ask for css help ! thanks anyway

    #1276068

    justpi
    Member

    So, I say use your car and you say you want to use a helicopter, although you don’t know how to drive it and although the helicopter isn’t the most reasonable choice in this case.
    Using a text widget is the most practical solution, because you’ll already have all the images in a row. Using links is possible but unnecessarily complicated. Even using image widgets will mean less coding than if you use links.
    And where exactly do you want the icons to show up? You really want them fixed? Fixed means at a specific point in relation to the browser window, which means they’ll change place in relation to your content (both vertically, when one scrolls down, and horizontally, depending on each visitor’s screen resolution): doesn’t make sense.

    #1276207

    the problem is that each time i use the fixed code, images just align over each others.

    Just to offer an explanation about this part specifically, the reason they all fell on top of eachother is that you fixed all the “.blogroll li” elements to the exact same spot. In order to fix items into a grid (which is not common like juspi tried to explain), you would need to target each one separately. That really would be unnecessarily complicated though.

    You probably want to work with absolute positioning and not fixed positioning. Check out this tutorial:
    http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    You could re-position either a blogroll or a text widget, but a text widget might be simpler. I’ve also heard that people really like the About.me Widget for setting up social media icons too:
    http://en.support.wordpress.com/widgets/about-me/

    #1276214

    justpi
    Member

    I guess mimitrans was unaware that you can reposition the contents of a text widget when she dismissed my preliminary suggestion.
    In the meantime she opted for the “Hupso” share buttons.
    Since she also ignored my warning about fixed elements, here’s how those buttons will show up in a relatively low resolution screen:
    http://wpbtips.files.wordpress.com/2013/05/mimihupso.png

The topic ‘images allignements’ is closed to new replies.