Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    universal page size?

    Greetings,

    I am curious to know if there is html code for making a page adjustable to the size of the monitor that it is being viewed through. I am currently designing a site on a small 15" monitor, but want all to be able to view it the same without the backgrounds being doubled or so.

    I give thanks for any help.

    One Love,

    Ras Gabriel

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Salutations ...

    You can set the widths and heights of elements to a percentage (using %) to achieve a 'liquid' layout which will expand and collapse to the size of the browser area defined by the resolution the monitor is using.

    [edit: ] However with backgrounds there is no atribute to 'stretch' the image to the bounds of the page ... So the only alternatives are to make it really big (will increase load time though) or make it 'seamless' which will permit it to repeat without the user being able to easily see where it repeats. Or you can set it to not repeat at all.
    Last edited by Mhtml; 01-07-2004 at 05:28 AM.
    Omnis mico antequam dominus Spookster!

  • #3
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you for your quik response.

    where would you insert the % value? and you are saying that 96% is what I should use?

  • #4
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how am I able to set the background not to repeat at all? and what will it show instead? will it center the page, or how exactly will it look?

  • #5
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hmmm ... Perhaps you could do with a little quick training in CSS .

    I highly recommend w3Schools - www.w3schools.com/css
    Omnis mico antequam dominus Spookster!

  • #6
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Ras,

    where would you insert the % value? and you are saying that 96% is what I should use?

    Perhaps I am misunderstanding your question, but I think that the 96 you are referring to is actually just % (percent). Depending on the font used, % can also look like 96.

    Dieter

  • #7
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah yes...css is foreign to me. thank you for the link...

    as far as I can tell I would just add this to the background attributes:

    background-repeat: no-repeat

    thanks again



    ooops...thanks Deiter

  • #8
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Correct Ras, that would work! Quick learner.
    Omnis mico antequam dominus Spookster!

  • #9
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks.

    I am curious though what "fills in the gaps" around the browser window on larger monitors if I add this code.

  • #10
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Ras Gabriel

    I am curious though what "fills in the gaps" around the browser window on larger monitors if I add this code.
    Code:
    background-color:#ffffff
    This would "fill the gaps" with white.

    I take no responsibility for the above nonsense.


    Left Justified

  • #11
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Am I overstanding this right?...that I would add this code directly into the HTML background properties?

    So that it would look similar to this:

    <body background="whatever.jpg" background-color:#ffffff><IMG src="http://www.whateversite.com/whatever.jpg">
    wouldn't this change the background image?

    or would it just put the white "behind" or "underneath" the image?


    also, how could I code it so that the background as well as the rest of the page is centered as far as the larger monitor's view?
    Last edited by Ras Gabriel; 01-07-2004 at 08:28 PM.

  • #12
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Almost..
    Code:
    <body style="background:#ffffff url(whatever.jpg) no-repeat">
    <img src="whatever.jpg"/>
    You would further shorten the "#ffffff" to #fff, but I didn't want to confuse.
    Your <img> tag needed a self closing end tag (/>).
    Also, start writting ALL tags and attributes as lower case now so that you don't have to think about it later when you start coding to XHTML standards

    *edit - Added the "no-repeat" after re-reading your earlier post
    Last edited by mindlessLemming; 01-08-2004 at 01:13 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #13
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reminder to code in all lowercase.
    as far as the self closing tag...i didn't know you had to close the image source tags. thanks.
    when you wrote "url (whatever.jpg)"....would I write the actual url where the image is found? or just write url.
    also, how could I code it so that the background as well as the rest of the page is centered as far as the larger monitor's view?
    is it just:
    <p align=center> the code for the page </p> ?
    thanks for your help.

  • #14
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're welcome
    In XHTML (your next step...) all single tags (<b> <img>, etc)
    need to be closed with a forward slash. I think you also need a space between the last character and the slash as well;
    i.e. <b> becomes <b />
    If you start practicing this stuff now you will wake up one morning and realise that you already code in XHTML. (well, almost )

    url in the css tells the browser that the following string is a file location. You just need to place the location of your file in relation to the html file;
    ie - background:#fff url (images/myPic.jpg) blah blah...;

    Code:
    #mainPosition {
    position:absolute;
            left:50%;
            width:760px;         /* is the width of the page*/
            margin-top:0px;
            margin-left:-380px;  /*is the negative 1/2 width of the page*/
                    }
    then encase all tags within the mainPosition div like so...
    Code:
    <body>
      <div id="mainPosition">
        ...code for page...
      </div>
    </body>
    Next step: Externalise your CSS and refer to it in the head of your html files like so
    Code:
    <link rel="stylesheet" type="text/css" media="screen" href="layout.css">
    <style type="text/css">
    @import "layout.css";
    </style>
    I've doubled up on the call to the CSS file so as to avoid IE's dreaded F.O.U.C.
    but you can just use the <link> one if you like.
    Last edited by mindlessLemming; 01-13-2004 at 09:38 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #15
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by mindlessLemming
    You're welcome
    In XHTML (your next step...) all single tags (<b> <img>, etc)
    Err... <b> = obselete presentational markup for making things bold, which isn't empty. I assume you mean <br/>
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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