Css help. Aligning Images

Dev Shed Forums Sponsor:

February 14th, 2013, 06:10 PM

asrivak

Registered User

Join Date: Feb 2013

Posts: 1

Time spent in forums: 21 m 23 sec
Reputation 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......

February 14th, 2013, 08:12 PM

null.if.ied

Registered User

Join Date: Feb 2013

Posts: 26

Time spent in forums: 6 h 15 m
Reputation 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:

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

<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:

Original - css Code
#uniqueID { visibility: hidden; }

#uniqueID { visibility: hidden; }

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

javascript Code:

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

<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.

Css help. Aligning Images

Developer Shed Advertisers and Affiliates