SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: JUMPING page!?

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JUMPING page!?

    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

    2. 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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Design_chica86 View Post
    The website has so many issues right now I don't even want to change the code lol.
    "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:

    Code:
    <img alt="" id="header" src="images/header.jpg" height="121px" width="786px">
    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.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

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

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Who did? Were you replying to a thread instead of intending to start a new one?
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    "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:

    Code:
    <img alt="" id="header" src="images/header.jpg" height="121px" width="786px">


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

    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

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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
    LOL Sorry you guys. I SURE did

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.


    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.


    Who did? Were you replying to a thread instead of intending to start a new one?
    Thank you! This is SO HELPFUL! I like cats..

    Randomness lol

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #9
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    That's an EXCELLENT idea. Thank you so much!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Design_chica86 View Post
    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
    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.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ralph, what browser was giving you a jump? I couldn't get any of my Linux browsers to do it.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    ralph, what browser was giving you a jump?
    Heh heh, nobody gives me the jump.

    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.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    .aboutus_text {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 160&#37;;
        color: #000;
        line-height: 120%;
        padding-bottom: 2px;
        padding-top: 1px;
        margin-left: 233px;
        margin-top: 35px;
        display: inline;
        float: right;
        position: relative;
        margin-top: -199px;
        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.

    Code:
    .aboutus_text {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 160%;
        color: #000;
        line-height: 120%;
        padding-bottom: 2px;
        padding-top: 1px;
      /*  margin-left: 233px;*/
        margin-top: 35px;
        display: inline;
        float: right;
        position: relative;
        /*margin-top: -199px;*/
        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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •