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.

Results 1 to 10 of 10
  1. #1
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    403
    Member #
    751
    Liked
    2 times
    ...as I've struggled to make my page look the same at most screen sizes, I've lapsed into closing elements within tables. Can someone share a fix for the following page so it looks ok on smaller screens. It looks fine until I view on a computer with a smaller monitor and everything is shifted all around..

    EDIT: link removed

    Can someone look at my code? It's just one page. I initially tried to stick with correct code but small differences in Mozilla and IE had me resorting to old habits. I thought this would be a simple enough layout to control but the yahoo news feed at the bottom of the page doesn't want to stay put without wrapping it in a table (without tables, it moves when I decrease the browser window size) and, like I said, the whole page is shifted on a smaller monitor.

    So I guess my question is: Seeing my sites' layout and probably knowing more than me, how would you code it to make everything stay where it is and look normal in most browsers and especially on smaller monitors? In other words, ignoring my coding, how would you code it to better maintain this layout? Thank you.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,723
    Member #
    5580
    Liked
    718 times
    1) You need to create a separate .css file for all of your CSS definitions.

    2) You need to specify the minimum width and center it within the
    body id ...

    I have an example site I used for a previous question ...

    http://catpin.com/ets/

    and here's the .css file:
    http://catpin.com/ets/main.css

    See in the <head> section how the .css file is loaded and
    see in the .css file how the width is set to 770 and it's centered
    in the browser. There will be no horizontal scroll bars if you use
    this method.


  4. #3
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    403
    Member #
    751
    Liked
    2 times
    Quote Originally Posted by mlseim
    1) You need to create a separate .css file for all of your CSS definitions.

    2) You need to specify the minimum width and center it within the
    body id ...

    I have an example site I used for a previous question ...

    http://catpin.com/ets/

    and here's the .css file:
    http://catpin.com/ets/main.css

    See in the <head> section how the .css file is loaded and
    see in the .css file how the width is set to 770 and it's centered
    in the browser. There will be no horizontal scroll bars if you use
    this method.
    Many Thanks. So far this is working well. I'm going to take the link down so the page doesn't get indexed by search engines. I'll restore it if I have any more problems. Thanks again!

  5. #4
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    403
    Member #
    751
    Liked
    2 times
    mlseim, this works very well.

    however, i ran into some very minor display problems I hope you or someone can give some advice on getting rid of. The new page is here:

    edit: link removed

    If someone can take a look at the page, they'll notice,when viewed in firefox 1.0.7, that there is an empty retangular box over the video player that I can't get rid of. I can live with it if need be but if anyone knows how to fix this that would great.

    The other problem is the "newspaper" bumper banner. If you look closely, you'll notice it is not centered with the main banner. It's the same size as the main banner but it's slightly to the right. You can really only notice it if you look closely or use a ruler but it's bugging the heck out of me. I tried putting the bumper image in the css with the exact same parameters as the main banner but it still displays slightly to the right.

    Any further help or advice would be most appreciated. Thanks.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,723
    Member #
    5580
    Liked
    718 times
    ok ... I'll check on Monday (tomorrow) with firefox, as I only have IE at home.

    ... meanwhile, someone else might pop in with a solution.


  7. #6
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    403
    Member #
    751
    Liked
    2 times
    Quote Originally Posted by mlseim
    ok ... I'll check on Monday (tomorrow) with firefox, as I only have IE at home.

    ... meanwhile, someone else might pop in with a solution.
    Mega thanks, mlseim. btw - i just checked the page on my smaller monitor and, besides the minor problems i just outlined, the original layout problems are completely gone. :classic:

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,723
    Member #
    5580
    Liked
    718 times
    The extra box problem:

    That extra box above your video player is being caused by the source
    that's displaying the player. Just like the box that is below the video player,
    there must be a caption that goes in there. With IE, if the caption is gone,
    it must not display it ... but FireFox does. I don't think there's anything you
    can do except find out how to put some text in that box (like a title?)

    The Banner not centering problem:

    The banner at the very top is 747 pixels wide by 99 pixels high.

    The other banner (lower down is) 751 X 91 pixels.

    That difference in width is causing them to look slightly off center from each other.

    Make them both identical in width (height is not so important here) ...
    ... and they will center themselves identical.

    Other things:

    You have a lot of extra carriage returns in your HTML around the video
    portion. I think you need to make the Javascript one contiguous line without
    carriage returns. Eliminate some of the extra "white-space" with some of those
    lines. I think you can also put both <divs> into one ... like this:

    <div id="center_left">
    <h1>GRAB OUR RSS VIDEO FEED: <a href="http://www.webulot.ms11.net/blalaala.xml"><img src="http://img475.imageshack.us/img475/1949/rss8pm.png" border="0"></a></h1>
    <br />
    <script language="javascript" src="http://www.rss-info.com/rss2.php?integration=js&windowopen=1&rss=http%3A%2 F%2Fwww.webulot.ms11.net%2Fblalaala.xml&number=1&w idth=300&ifbgcol=FFFFFF&bordercol=000000&textbgcol =FFFFFF&rssbgcol=FFFFFF&showrsstitle=1&showtext=1" ></script>
    </div>


    It would also be nice if the text next to each small photo had some padding between the
    photo and the text. Again, this is controlled by the Javascript that you are inserting ...
    you have no control over that (that I know of at least). If you are able to control some of
    the Javascripts that display those news items ... add some padding to the right of the thumbnail photos.



    .


  9. #8
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    403
    Member #
    751
    Liked
    2 times
    Quote Originally Posted by mlseim
    The extra box problem:

    That extra box above your video player is being caused by the source
    that's displaying the player. Just like the box that is below the video player,
    there must be a caption that goes in there. With IE, if the caption is gone,
    it must not display it ... but FireFox does. I don't think there's anything you
    can do except find out how to put some text in that box (like a title?)

    The Banner not centering problem:

    The banner at the very top is 747 pixels wide by 99 pixels high.

    The other banner (lower down is) 751 X 91 pixels.

    That difference in width is causing them to look slightly off center from each other.

    Make them both identical in width (height is not so important here) ...
    ... and they will center themselves identical.

    Other things:

    You have a lot of extra carriage returns in your HTML around the video
    portion. I think you need to make the Javascript one contiguous line without
    carriage returns. Eliminate some of the extra "white-space" with some of those
    lines. I think you can also put both <divs> into one ... like this:

    <div id="center_left">
    <h1>GRAB OUR RSS VIDEO FEED: <a href="http://www.webulot.ms11.net/blalaala.xml"><img src="http://img475.imageshack.us/img475/1949/rss8pm.png" border="0"></a></h1>
    <br />
    <script language="javascript" src="http://www.rss-info.com/rss2.php?integration=js&windowopen=1&rss=http%3A%2 F%2Fwww.webulot.ms11.net%2Fblalaala.xml&number=1&w idth=300&ifbgcol=FFFFFF&bordercol=000000&textbgcol =FFFFFF&rssbgcol=FFFFFF&showrsstitle=1&showtext=1" ></script>
    </div>


    It would also be nice if the text next to each small photo had some padding between the
    photo and the text. Again, this is controlled by the Javascript that you are inserting ...
    you have no control over that (that I know of at least). If you are able to control some of
    the Javascripts that display those news items ... add some padding to the right of the thumbnail photos.



    .
    Thanks mlseim. I'll try these fixes out and let you know.

    As for the the javascript I'm using for the video player, I get that from :

    http://www.rss-info.com/en_rssinclude-simple.html

    In the final version of the site, I plan to use their php code instead of the script. I don't know if that will make a difference but, if you (or anyone) knows of a better free online html to rss converter, let me know if you can. In the meantime I will implement the changes you recommended. Thanks again!

  10. #9
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    403
    Member #
    751
    Liked
    2 times
    Quote Originally Posted by mlseim
    [B]
    The Banner not centering problem:

    The banner at the very top is 747 pixels wide by 99 pixels high.

    The other banner (lower down is) 751 X 91 pixels.

    That difference in width is causing them to look slightly off center from each other.

    Make them both identical in width (height is not so important here) ...
    ... and they will center themselves identical.





    .
    For this problem I went into MS paint and redid the bottom banner so it matched up and overlapped exactly in width to the top banner but they are still not being centered with each other. It seems the lower banner is being slightly indented and I don't have a clue why. I don't think the script for the video player is interfering because I replaced it for a second with a cartoon image and the banners were still not lining up. hmmm...

  11. #10
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    403
    Member #
    751
    Liked
    2 times
    Quote Originally Posted by duck444
    For this problem I went into MS paint and redid the bottom banner so it matched up and overlapped exactly in width to the top banner but they are still not being centered with each other. It seems the lower banner is being slightly indented and I don't have a clue why. I don't think the script for the video player is interfering because I replaced it for a second with a cartoon image and the banners were still not lining up. hmmm...
    Okay I used padding-right: 31px; for the lower banner to get bothe banners centered. I just need to know if this will work in most browsers and screen sizes or will it screw it up even more?


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 02:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com