Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    amg
    amg is offline
    Junior Member
    Join Date
    Sep 2011
    Posts
    7
    Member #
    29298
    Hey guys,

    i'm having a problem with making the div's on my webpage stay put once the browser window becomes smaller.

    Here's the page:
    http://www.lowcutconnie.com

    I've done the exact same kind of web layout with centered div content without any problems before but can't figure out what the problem is. This is supposed to be a quick temp webpage for a client and it's taking me way too long to figure this one out.

    The css and html are right on the page.

    Please help! I'm pretty certain the problem is a tiny coding error somewhere but can't seem to figure it out for the life of me.

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    not sure what you mean ? looks and re-sizes fine in chrome ... ?

    can you take some screen shots of what you are talking about and post them , might be helpful.

  4. #3
    amg
    amg is offline
    Junior Member
    Join Date
    Sep 2011
    Posts
    7
    Member #
    29298
    Hey there, elements start to shift when i make the window browser horizontally smaller. i am not planning to make the mobile version right away and it looks all over the place on a mobile web browser.

    I used the same concept for this page here and i didn't have that problem. www.psmrf.org

    What do you think the problem could be?
    Attached Images Attached Images

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Oh, you're using safari ? On a Mac or pc ?

    Safari CSS support is flaky at best. Like I mentioned earlier, chrome on windows wasn't doing that. I'm now on an iPhone and can't see the source , so we need to find out how it's behaving in other browsers, if it's fine in all other browsers, then you'll need to create a separate CSS just for safari.

    See if you can get others to look and see if it's doing the same with different browsers. I wouldn't do a whole bunch of changes until you know that.

  6. #5
    amg
    amg is offline
    Junior Member
    Join Date
    Sep 2011
    Posts
    7
    Member #
    29298
    Ive tried it on safari, chrome and firefox, and it's doing the same thing on all of them. I'm on a mac. It was also behaving the same way on safari on iphone.

    It seems like elements starts shifting things when the window is smaller than 900px or so, which is prob why it looks crazy on my iphone.

    It's very strange because it's the exact same kind of structure and coding i have used on my last webpage, www.psmrf.org, and everything was totally fine.

    It feels like the elements are not really embedded in my wrap div

    Thoughts?

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Do you have any min-width attributes on these elements ? IE might not play nice with them, but all other browsers do. If you don't have a min width set for the main wrapper, the all the child elements will shift around when the browser is resized.

  8. #7
    amg
    amg is offline
    Junior Member
    Join Date
    Sep 2011
    Posts
    7
    Member #
    29298
    Yeah, i've tried that as well. Also tried to do a percentage based min-width with no result.

    Here are the codes if that can help..

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Low Cut Connie</title>
    <style type="text/css">
    <!--
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        background-image: url(bg.jpg);
        background-color: #000000;
        margin-top: 0px;
        margin-bottom: 0px;
        background-position: center top;
        background-attachment: scroll;
        background-repeat: no-repeat;
    }
    body,td,th {
        color: #FFFFFF;
    }
    
    #master {
    width:1050px;
        height:1819px;
        z-index:1;
    margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        position: relative;
        left: 0px;
        top: 0px;
    
    }
    
    #rs {
        position:absolute;
        left:747px;
        top:-1px;
        width:148px;
        height:67px;
        z-index:2;
        visibility: visible;
        background-color: #000000;
    }
    #paypal {
        position:absolute;
        left:392px;
        top:655px;
        width:301px;
        height:118px;
        z-index:2;
        visibility: visible;
    }
    #itunes {
        position:absolute;
        left:393px;
        top:754px;
        width:310px;
        height:55px;
        z-index:2;
        visibility: visible;
    }
    #connect {
        position:absolute;
        left:757px;
        top:677px;
        width:223px;
        height:52px;
        z-index:3;
        visibility: visible;
    }
    #readmore {
        position:absolute;
        left:793px;
        top:1017px;
        width:156px;
        height:29px;
        z-index:2;
        visibility: visible;
    }
    #press {
        position:absolute;
        left:758px;
        top:1078px;
        width:236px;
        height:186px;
        z-index:2;
        visibility: visible;
    }
    #photos {
        position:absolute;
        left:759px;
        top:1294px;
        width:267px;
        height:202px;
        z-index:2;
        visibility: visible;
    }
    #apDiv1 {
        position:absolute;
        left:517px;
        top:564px;
        width:310px;
        height:99px;
        z-index:2;
    }
    #player {
        position:absolute;
        left:392px;
        top:573px;
        width:305px;
        height:88px;
        z-index:2;
    }
    #contact {
        position:absolute;
        left:56px;
        top:1713px;
        width:653px;
        height:87px;
        z-index:2;
        visibility: visible;
    }
    #upcomingshows {
        position:absolute;
        left:68px;
        top:854px;
        width:646px;
        height:265px;
        z-index:2;
        visibility: visible;
    }
    #apDiv2 {
        position:absolute;
        left:744px;
        top:455px;
        width:256px;
        height:160px;
        z-index:2;
        visibility: visible;
        background-color: #000000;
    }
    #containerDownload {
        position:absolute;
        left:390px;
        top:592px;
        width:312px;
        height:84px;
        z-index:2;
        visibility: visible;
    }
    .style1 {color: #000000}
    #wrap {
        position:absolute;
        left:0px;
        top:0px;
        width:1051px;
        height:1804px;
        z-index:4;
        visibility: visible;
    }
    
    -->
    </style>
    <script type="text/javascript" src="audio-player/audio-player.js"></script>
    <script type="text/javascript">
                        AudioPlayer.setup("http://lowcutconnie.com/audio-player/player.swf", {
                            width: 280
                        });
                </script>
    <script type="text/javascript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    
    <body>
    <div id="master">
    <div id="wrap">
    <div id="rs"><a href="http://www.rollingstone.com/music/albumreviews/get-out-the-lotion-20110621" target="_blank"><img src="images/rs.jpg" border="0" /></a></div>
    
    <div id="paypal">
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="ZJB5L7TE5Z3NA">
    <input type="image" src="images/buy.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form></div>
    <div id="itunes"><a href="http://itunes.apple.com/us/album/get-out-the-lotion/id415533995  " target="_blank"><img src="images/itunes.jpg" width="309" height="52" border="0" /></a></div>
    <div id="connect"><img src="images/connect.jpg" width="241" height="51" border="0" usemap="#Map" />
    <map name="Map" id="Map"><area shape="rect" coords="81,7,114,45" href="http://facebook.com/lowcutconnie " target="_blank" />
    <area shape="rect" coords="121,10,153,46" href="http://myspace.com/lowcutconnie" target="_blank" />
    <area shape="rect" coords="159,8,190,42" href="http://twitter.com/lowcutconnie" target="_blank" />
    <area shape="rect" coords="196,7,231,45" href="http://itunes.apple.com/us/album/get-out-the-lotion/id415533995  " target="_blank" />
    </map></div>
    
    <div id="readmore"><a href="reviews.html" target="_blank"><img src="images/readmore.png" width="171" height="36" border="0" /></a></div>
     
    <div id="press"><img src="images/press.png" width="234" height="216" border="0" usemap="#Map2" />
    <map name="Map2" id="Map2"><area shape="rect" coords="0,38,115,192" href="press/barbershop.jpg" target="_blank" />
    <area shape="rect" coords="123,36,234,114" href="press/thunderbird.jpg" target="_blank" />
    <area shape="rect" coords="124,116,236,191" href="press/Low Cut Connie philly.jpg" target="_blank" />
    </map></div>
    
    <div id="photos"><a href="http://www.flickr.com/photos/67515073@N03/" target="_blank"><img src="images/photos.png" width="264" height="214" border="0" /></a></div>
     
    <div class="style1" id="containerDownload">.
      <p id="audioplayer_1">Couldn't play, sorry</p>
                            <script type="text/javascript">
                                AudioPlayer.embed("audioplayer_1", {
                                soundFile: "http://lowcutconnie.com/music/mp3/GOTL/02 Rio.mp3,http://lowcutconnie.com/music/mp3/GOTL/04 Darlin.mp3,http://lowcutconnie.com/music/mp3/GOTL/05 Full of Joy.mp3,http://lowcutconnie.com/music/mp3/GOTL/03 Big Thighs NJ.mp3,http://lowcutconnie.com/music/mp3/GOTL/01 The Cat and The Cream.mp3",
                                titles: "Rio,Darlin,Full of Joy,Big Thighs NJ,The Cat and The Cream"});
                            </script></div>
    
    <div id="contact"><img src="images/contact.png" width="703" height="85" border="0" usemap="#Map3" />
    <map name="Map3" id="Map3"><area shape="rect" coords="19,18,184,70" href="press/lowcutconnie-Press_Release.pdf" target="_blank" />
    <area shape="rect" coords="436,24,597,48" href="mailto:myladyfingers@gmail.com" />
    <area shape="rect" coords="501,47,659,68" href="mailto:modmedia@theriver.com" />
    </map></div>
    <div id="upcomingshows"><img src="images/shows.png" width="656" height="277" border="0" usemap="#Map4" />
    <map name="Map4" id="Map4"><area shape="rect" coords="353,71,568,101" href="http://coleschicago.blogspot.com" target="_blank" />
    <area shape="rect" coords="367,109,556,133" href="http://www.wilbertsmusic.com" target="_blank" />
    <area shape="rect" coords="393,144,578,167" href="http://www.livingroomny.com" target="_blank" />
    <area shape="rect" coords="364,177,565,209" href="http://www.littlebarphilly.com" target="_blank" />
    <area shape="rect" coords="401,214,593,245" href="http://www.livingroomny.com" target="_blank" />
    </map></div>
    
    <div id="apDiv2"><a href="http://social.entertainment.msn.com/music/blogs/expert-witness-blogpost.aspx?post=a9128012-89f3-4d43-87bb-e86a6eb7212d&amp;_p=1f7f97c3-b6d7-40dc-8345-bced51ff308c&amp;_nwpt=1" target="_blank"><img src="images/review.png" width="256" height="160" border="0" /></a></div>
    </div>
    </div>
           
    </body>
    </html>

  9. #8
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    we'll thats gone a bit pete tong hasn't it.

    I think i see your issue here. Your site width is 1050px but in the first image you compressed it to 800x600?? im guessing.

    When the browser gets smaller it can have that effect. When you do create tablet and phone css make sure they are separate stylesheets to your main css... otherwise youll have no end of problems.

    P.S: its 04:31 in the morning so my brain is going off on one, so if none of this makes sense i shall check it out again once ive woken properly =)
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  10. #9
    amg
    amg is offline
    Junior Member
    Join Date
    Sep 2011
    Posts
    7
    Member #
    29298
    thanks for your reply!

    ok, which first image, the background?

  11. #10
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Problem is solved by adding <div id="wrapper"> outside your "master" div.

    Then add the following CSS:
    Code:
    div#wrapper {
        background: #000 url('bg.jpg') no-repeat center top;
        width: 100%;
        min-width: 1050px;
    }
    And get rid of the background CSS on your body.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:00 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com