#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    1
    Rep Power
    0

    Css help. Aligning Images


    I don't know a lot about css, and frankly I haven't found any good tutorials. I don't know any terms so I don't even know what to look for.

    Basically I'm trying to edit my tumblr css. See this link?

    (URL address blocked for a presumably gay reason (I'm gay so its ok): See forum rules)

    Theme is Tessellate

    See how the images are all bunched up? What part of the code controls that and how do I make it so the images I post in css arrange that way BEFORE they start to load and not after? Otherwise they stay in an ugly grid pattern, and it looks really trashy.

    Here is my tumblr:

    asrivak tumblr com

    Basically until they load fully my images stay in a grid format and frankly I haven't found anyone willing to help me on this. Given the nature of my comprehension disorder, I pretty much only think in spatial terms, and not auditory or literary ones, which means that I'm really good at figuring stuff out, at least if I have all the pieces. Even if you guys were to give me a list of commands and some kind of ordering process that would really help out. I already know how to resize them and add columns and stuff like that.

    Here's the css:

    nevermind, It wont let me post it... Hints on how to do that would be great too......
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    The behavior you're seeing is most likely the result of jQuery Masonry. You can Google the term to find out more...

    Essentially, though, Masonry is a jQuery plugin that allows for dynamic grids, aka the bunched up layout you're after.

    However, it looks like the plugin is being initialized after most of the content on your page has already loaded - so at first you see things in a trashy grid, then Masonry runs and things look much nicer.

    So, to provide you with an answer: one option you might consider is a hack that fuses both CSS and JavaScript. What you'll be doing is hiding all of the content on your page until everything has loaded, and then display it. Your page will appear to take longer to load, but you won't get the trashy layout anymore.

    To do this: create a new <div> tag around your entire page and specify a unique ID. Simplified example:

    html Code:
    <html>
      <head>
        <title>Foobar</title>
      </head>
      <body>
        <div id="uniqueID">
          ALL PAGE CONTENT HERE
        </div>
      </body>
    </html>


    Now, in your CSS, add this style to uniqueID:

    css Code:
    #uniqueID { visibility: hidden; }


    Here's the good bit: just under your </head> tag, but before the <body> tag, add the following:

    javascript Code:
    <script type="text/javascript">
      window.onload = document.getElementById('uniqueID').style.visibility = "visible";
    </script>


    Let us know how it goes.

    - Null

    P.S. As for adding code, just copy and paste it into the text box, highlight it, then click the # button.

IMN logo majestic logo threadwatch logo seochat tools logo