-1

I truly apologize if any of these questions (there's a main one, then one other that is less important) are absolute idiot questions, but I must admit they have me stumped, so I do appreciate any help that I can get.

First off, here's my site: "Narnia Greenville".

The question is this: The timeline (named thermometer.png) is off center, although I have followed all the options from here: "http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/", as well as from several other sites. Plus, if you re-size your window, it appears to jump from the right to the left at a certain point for no apparent reason. I can't figure it out, and the last time I attempted a site like this (I failed miserably) I encountered this same type of problem. I'm sure the issue should be staring me in the face (and probably laughing at me), but I can't see it for the life of me. The goal is to get "thermometer.png" centered both horizontally and vertically on the page, and on top of all the other images.

Next: The images are HUGE! And take FOREVER to load, so if you're on a limited internet connection, I suggest moving on to someone else's question. I'm working on that. As I'm sure you can tell, I'm new to most of this. (I've been "rebuilding" wordpress themes for most of my limited web-design experience, and none of it includes this kind of thing. It just works... LoL.) So anyways, although not a specific question, if you feel like documenting how you cut down on image loading time, please feel free to.

Many thanks to anyone who is willing to help me. And again, I apologize if either of these is stupid question. LoL.

Cupka92
  • 11
  • 1
  • You may want to post the part of your code that contains the .png in question, I don't think SO users are supposed to be pecking around people's source code on external websites. You're sure to get more responses if you limit what you're looking for. – Johnny Bones Oct 03 '13 at 01:53

3 Answers3

1

Your images can be compressed with tools like http://tinypng.org/ and http://www.jpegmini.com/ if you are exporting from photoshop use the "save for web and devices" option.

Devin Crossman
  • 7,454
  • 11
  • 64
  • 102
1

Woohoo!!! Thanks much to @DevlshOne for their help! With a little more playing around, I've got it! The code that I ended up using was this (a variation using all percentages from @DevlshOne's code here: http://jsfiddle.net/devlshone/WASbe/2/):

.class {
position: fixed;
min-height: auto;
min-width: 100px;
/* Set up proportionate scaling */
width: calc(100% - 30px);
left: calc(50% - 47%);
height: auto;
/* Set up positioning */
top: 40%;
z-index: 9997;

}

I'm uploading it to the test site as I type, and it should stay there for quite some time for a reference to anyone else who has this problem. (Test Site is here: http://goo.gl/9aXRcf .) So far so good, and again, thank you for your help!

Cupka92
  • 11
  • 1
0

Your thermometer jumps from the right to left if the window width is below 1024px. That's this portion of the CSS:

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  .thermometer {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Try changing both of these to right and see if that solves the issue.

There are other problems, as well. That image is 3696px (2772px @ 75%) wide. You need to use some CSS3 math functions to get this beast centered properly.

.thermometer {
  /* Set rules to fill background */
  min-height: auto;
  min-width: 100px;

  /* Set up proportionate scaling */
  width: 75%; // maybe this should be: **width: calc(100% - 1386px);**
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 50%;
  left: 50%; // I don't see a reason for this at all... just let it take up the entire page
  z-index: 9997;
}
DevlshOne
  • 8,357
  • 1
  • 29
  • 37
  • Thank you @DevlshOne! Perhaps I misunderstood you. I have changed the code to what you suggested, and it's still not displaying the way I expect it too. Also: Would you recommend simply deleting @media screen in its entirety? – Cupka92 Oct 03 '13 at 02:26
  • Woops! Hold a sec, just realized that I had an extra "width:" in there, that could have something to do with the problem. Let me fix it and re-upload... – Cupka92 Oct 03 '13 at 02:31
  • With images that big, you can't possibly expect to display them on a mobile. So, yeah, the media query can probably go away. Let me know how the rest goes. – DevlshOne Oct 03 '13 at 02:40
  • OK, (not having mobile is fine, I can deal with that later), center seems better (not perfect, but that may change later). The size is acting strange though. If "width:" is at calc(100% - 1386); then the size is tiny, but change it to calc(150%-1386) then we're back to the same problem, position and everything. Is that because I can't have over 100%, if so, what else can I change? Am I missing something? P.S. Deleting @media throws the whole thing over to the right. This is horrible. LoL. – Cupka92 Oct 03 '13 at 02:47
  • You need to go ahead and make a jsFiddle out of it so we can collaborate on a fix. – DevlshOne Oct 03 '13 at 03:43
  • OK, that was interesting. Really happy that something like that exists. LoL. Here's the collaboration link: " http://jsfiddle.net/WASbe/#&togetherjs=4vVABl60UE " And here's the share link: " http://jsfiddle.net/WASbe/ " – Cupka92 Oct 03 '13 at 12:29
  • "Please avoid discussions..." I don't have enough reputation(s) to chat apparently. That's better, I'm looking over the code now. Still not like it is supposed to be though (groan). I've uploaded it back to the server if you want to refresh it. – Cupka92 Oct 03 '13 at 14:23
  • Observation: Changing `width: calc(100% - 30px); left: calc(50% - 356px); height: calc(712px - 50%);` to: `width: calc(100% - 30px); left: calc(50% - 650px); height: auto;` Centers it with the correct size on a screen of 1366x768, but not full HD (it's moved to the left.) – Cupka92 Oct 03 '13 at 14:32
  • So apparently I can't do ANYTHING without a larger reputation. Not even vote "up" your answer. :-( I will mention you in the coding though, if this site ever gets used. :-) Thank you SO MUCH for your help! – Cupka92 Oct 03 '13 at 14:47