JUMPING page!?

HTML & CSS
1
  1. I have a web page that jumps once you click on it, then it aligns like it supposed to be. I don’t know if it’s the CSS or the javascript flash widget.

It’s The About Us page
Link: http://spanish-in-america.com/about_us.htm

  1. My background is HUGE. How can I make the grunge texture background into a seamless background? Any suggestions?

I know you said something about a wrapper. The website has so many issues right now I don’t even want to change the code lol.

2

ralph, what browser was giving you a jump? I couldn’t get any of my Linux browsers to do it.

3

Hi,

I can see that the “about-us” text jumps down after the widget has loaded. This is because of this style here:



.aboutus_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 160%;
    color: #000;
    line-height: 120%;
    padding-bottom: 2px;
    padding-top: 1px;
  [B]  margin-left: 233px;[/B]
    margin-top: 35px;
    display: inline;
    float: right;
    position: relative;
   [B] margin-top: -199px;[/B]
    right: 40px;
    margin-bottom: 0;
    width: 380px;
}

The margin-left:233px effectively stops the text from lining up alongside the slideshow and so it starts underneath. You then dragged it back upwards with a negative margin to fill the space to the side of the slideshow.

As the slideshow takes some time to load the text is initially dragged up above the layout until the slideshow is loaded and then it settles down again.

You should remove the negative top margin and the left margin and the text will sit in the right place whether the slidshow is loading or not.



.aboutus_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 160%;
    color: #000;
    line-height: 120%;
    padding-bottom: 2px;
    padding-top: 1px;
 [B] /*  margin-left: 233px;*/[/B]
    margin-top: 35px;
    display: inline;
    float: right;
    position: relative;
 [B]   /*margin-top: -199px;*/[/B]
    right: 40px;
    margin-bottom: 0;
    width: 380px;
}

Be careful with your use of relative positioning as moving things relatively is usually a bad idea. Use margins or other methods unless you are creating subtle overlapping effects that don’t change the flow of the document.

4

Heh heh, nobody gives me the jump. :lol:

I tested in FF and Safari, and had the same behavior in both. The text starts at the top of the page and jumps progressively down as the other elements of the page load. I now don’t think it’s the image along to blame, though. The layout could use a lot of refining.

5

Don’t worry, I was just being cheeky. But I do think putting in the width and height of the image will stop the text jumping around on page load.

6

He sent me that via PM in reguards to an old thread (he was trying to get me to solve this via PM)

I don’t do PM help though as I get too much of it. Soo I just told him to make a thread and he just copied and pasted what he sent me :slight_smile:

7

That’s an EXCELLENT idea. Thank you so much! :slight_smile:

8

Chica, you’re not one of those people with the ginormous designers’ screens, are you?

Remember most people are still stuck on 1024 screens, so actually having a fade-to-solid in the background at about the middle of the white content area could be acceptable and a lot less large.

9

:cool: Thank you! This is SO HELPFUL! I like cats…

Randomness lol

10

LOL :blush: Sorry you guys. I SURE did

11

Thank you.

:frowning: Man, that’s not what I meant LOL. I meant I don’t want to change the ENTIRE website code, starting over from scratch

I was tired. I typed this first message early in the morning

12
  1. I have a web page that jumps once you click on it, then it aligns like it supposed to be. I don’t know if it’s the CSS or the javascript flash widget.

In which browser? I just looked in Firefox on Linux, and saw no jumping. Then I turned on ALL javascripts, and not only did I not see anything new on the page (what does the javascript do??), but still, with refreshes, no jumping.

Often jumping is a sidebar appearing or disappearing, but it seemed stable on my end.

  1. My background is HUGE. How can I make the grunge texture background into a seamless background? Any suggestions?

No, I’m not sure, because there’s a gradient on it: it’s darker at the top than the bottom.

I suppose if someone made a tileable image of the bottom part, you could have than and then another image on top (gradient from dark red to transparent) but that might end up being just as big, AND the smaller the tileable image is, the more cluttered the detail will appear.

I would go looking for another texture, like a brown-red stucco or something, which might give approx the same look and feel but can be a smaller, tiling image.

I know you said something about a wrapper. The website has so many issues right now I don’t even want to change the code lol.

Who did? Were you replying to a thread instead of intending to start a new one?

13

“Please help me fix my site… but without changing the code.” Ummm!

Obviously some coding changes are needed. Not sure if this will help the initial jump, but you could set a height and width to the image so that the space is there from the start even before the image has loaded:

<img alt="" id="header" src="images/header.jpg" [COLOR="Red"]height="121px" width="786px"[/COLOR]>

My background is HUGE. How can I make the grunge texture background into a seamless background? Any suggestions?

We’ve made suggestions before. Choose a nice background color that the bottom of the image could nicely fade into. Then in Photoshop (or similar program) create a fading gradient so that the image is basically transparent at the bottom, letting it appear to merge nicely into the background color set on the body.