Beginner's question: How to limit page width?

Discussion in 'HTML' started by dchris@netcom.ca, Jan 17, 2007.

  1. Guest

    Hi,

    My web page is at www.dcproof.com. I used Front Page to create it. How
    do I limit the page width without using breaks so that text does not go
    across the entire page as it does now in some parts? (e.g. the
    paragraph labelled, "What is DC Proof?") I don't want the text to go
    much beyond the widest graphic (the 2nd screen shot). Must I use a
    layout table? I hope there is a simpler way.

    Dan
     
    , Jan 17, 2007
    #1
    1. Advertising

  2. Chaddy2222 Guest

    wrote:
    > Hi,
    >
    > My web page is at www.dcproof.com. I used Front Page to create it. How
    > do I limit the page width without using breaks so that text does not go
    > across the entire page as it does now in some parts? (e.g. the
    > paragraph labelled, "What is DC Proof?") I don't want the text to go
    > much beyond the widest graphic (the 2nd screen shot). Must I use a
    > layout table? I hope there is a simpler way.
    >
    > Dan

    Don't use FP or any other MS product for web design, they do a
    perthetic job of it.
    If you really want a WYSIWYG then check out NVU, http://www.nvu.com and
    get a CSS template, http://www.oswd.org
    Now on to your question.
    Set the content to be 80% in width, this will give you some space on
    each side of the content, but the content will still re-size at smaller
    window sizes.
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Jan 17, 2007
    #2
    1. Advertising

  3. dorayme Guest

    In article
    <>,
    "" <> wrote:

    > Hi,
    >
    > My web page is at www.dcproof.com. I used Front Page to create it. How
    > do I limit the page width without using breaks so that text does not go
    > across the entire page as it does now in some parts? (e.g. the
    > paragraph labelled, "What is DC Proof?") I don't want the text to go
    > much beyond the widest graphic (the 2nd screen shot). Must I use a
    > layout table? I hope there is a simpler way.
    >
    > Dan


    I have not looked at your code, Dan, but your biggest pic seems
    to be 713 px wide. So, you could just make a container div and
    fix it at 713 px wide. You could also look into max width. You
    could also throw out Frontpage and read some html/css tutes (soon
    to be recommended to you).

    I would tend to do this though for limited parts where I don't
    want the text to be so much wider than the pic, set a width on
    the <p>s that the text are in.

    <p style="width: 713px">Let this start to wrap at the pic
    width....</p>

    --
    dorayme
     
    dorayme, Jan 17, 2007
    #3
  4. Guest

    Chaddy2222 wrote:
    > wrote:
    > > Hi,
    > >
    > > My web page is at www.dcproof.com. I used Front Page to create it. How
    > > do I limit the page width without using breaks so that text does not go
    > > across the entire page as it does now in some parts? (e.g. the
    > > paragraph labelled, "What is DC Proof?") I don't want the text to go
    > > much beyond the widest graphic (the 2nd screen shot). Must I use a
    > > layout table? I hope there is a simpler way.
    > >
    > > Dan

    > Don't use FP or any other MS product for web design, they do a
    > perthetic job of it.


    Perhaps, but I'm just creating a very simple website. Except for this
    problem, I haven't encountered any other difficulties.


    > If you really want a WYSIWYG then check out NVU, http://www.nvu.com and
    > get a CSS template, http://www.oswd.org
    > Now on to your question.
    > Set the content to be 80% in width, this will give you some space on
    > each side of the content, but the content will still re-size at smaller
    > window sizes.


    That sounds like what I need. What tag(s) will accomplish this?

    Dan
     
    , Jan 17, 2007
    #4
  5. <> wrote in message
    news:...
    > Hi,
    >
    > My web page is at www.dcproof.com. I used Front Page to create it. How
    > do I limit the page width without using breaks so that text does not go
    > across the entire page as it does now in some parts? (e.g. the
    > paragraph labelled, "What is DC Proof?") I don't want the text to go
    > much beyond the widest graphic (the 2nd screen shot). Must I use a
    > layout table? I hope there is a simpler way.
    >
    > Dan


    Simplest way is to add the following inside your body tag:

    style="width:800px"

    (or whatever width you want to set)

    +e
     
    The Eclectic Electric, Jan 17, 2007
    #5
  6. John Hosking Guest

    wrote:
    > Hi,
    >
    > My web page is at www.dcproof.com. I used Front Page to create it.



    Dorayme has a good tip for your question about width.

    And instead of using <blockquote> (HTML view in FrontPage) all over the
    place for indentation, assign a margin (sizable to suit your whim) such as

    <body style="margin-left:3.2em; margin-right:1em; background:white;">

    If you want, you *can* apply <blockquote> to your Norman Megill text,
    since that *is* a quote, and you can get rid of the <pre> tags, which
    you are not really using.

    Try replacing [see footnote 1] this:

    <div align="left">
    <pre>
    <font face="Arial" size="3">&quot;A better tool for learning about
    proofs in the way that mathematicians usually do
    them.<i>&quot;<br></i>–Norman Megill, Author of &quot;Metamath&quot;</font>
    </pre>
    </div>

    with:

    <blockquote>
    "A better tool for learning about proofs in the way that
    mathematicians usually do them."<br>
    <cite>–Norman Megill, Author of "Metamath"</cite>
    </blockquote>

    The above elements also styleable, too, so you can shift the positioning
    of the cite part if you want to and as you wish.

    Use of cite: http://www.w3.org/TR/html401/struct/text.html#h-9.2.1
    Blockquote: http://www.w3.org/TR/html401/struct/text.html#h-9.2.2


    Note 1: Try doing the above in HTML view in FrontPage. The WYSIWYG part
    is misleading, as Chaddy was trying to caution you about. It's why you
    have junk like this in your page:

    <b><h1 align="left"><img border="0" src="rp3.JPG" width="411"
    height="289"></b><font face="Arial"><br>
    <span style="font-weight: 400">Click for Free
    </span></font></font><span style="font-weight: 400">
    <font color="#FF0000" face="Arial">
    <a
    href="http://www.dcproof.com/dcpsetup.exe">Download</a></font></span></h1>

    Note 2: Try fiddling in the HTML view (or using Notepad while FrontPage
    is closed!) and seeing what happens when you add or delete something.
    Twiddle with stuff. Try to make the source smaller (bit by bit) and see
    what happens. Have fun.

    Note 3: Good luck!

    --
    John
     
    John Hosking, Jan 17, 2007
    #6
  7. Brian Cryer Guest

    "John Hosking" <> wrote in message
    news:45adfa19$...
    > wrote:
    >> Hi,
    >>
    >> My web page is at www.dcproof.com. I used Front Page to create it.

    >
    > Dorayme has a good tip for your question about width.
    >
    > And instead of using <blockquote> (HTML view in FrontPage) all over the
    > place for indentation, assign a margin (sizable to suit your whim) such as
    >
    > <body style="margin-left:3.2em; margin-right:1em; background:white;">


    <snip>

    For information: This is one good example of where FrontPage falls down.
    Select the option to "Increase Indent" and FrontPage inserts <blockquote>.
    Microsoft Expression doesn't suffer from this problem, but if you use
    FrontPage then its one of its foibles that you ought to be aware of.
    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Jan 17, 2007
    #7
  8. wrote:
    > Chaddy2222 wrote:
    >> wrote:
    >>> Hi,
    >>>
    >>> My web page is at www.dcproof.com. I used Front Page to create it. How
    >>> do I limit the page width without using breaks so that text does not go
    >>> across the entire page as it does now in some parts? (e.g. the
    >>> paragraph labelled, "What is DC Proof?") I don't want the text to go
    >>> much beyond the widest graphic (the 2nd screen shot). Must I use a
    >>> layout table? I hope there is a simpler way.
    >>>
    >>> Dan

    >> Don't use FP or any other MS product for web design, they do a
    >> perthetic job of it.

    >
    > Perhaps, but I'm just creating a very simple website. Except for this
    > problem, I haven't encountered any other difficulties.


    Maybe because you haven't looked at your source?

    <blockquote>
    <p align="center">&nbsp;</p>
    <p align="center"><b><font face="Arial">
    <img border="0" src="peano3e_qvga.JPG" width="113"
    height="111"></font></b>&nbsp;</p>
    </blockquote>
    <p align="center"><font face="Arial" size="2">Copyright © 2004 Dan
    Christensen</font></p></font>
    </blockquote>

    </blockquote>

    </b>


    Nested blockquotes? Empty paragraphs? FONT elements everywhere? A simple
    site, do it in notepad and use tutorials at http://www.htmldog.com

    Won't take long to learn and with the simplicity of your site won't take
    long to handcode. The benefits will be priceless.

    To original question, why would you want to constrain your paragraphs?
    If I have the room, why can I not use it? How about if I zoom the text,
    then what? It looks fine the way it is in my opinion, just fix your poor
    markup.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 17, 2007
    #8
  9. Guest

    On Jan 17, 3:20 pm, "Jonathan N. Little" <>
    wrote:
    > wrote:
    > > Chaddy2222 wrote:
    > >> wrote:
    > >>> Hi,

    >
    > >>> My web page is atwww.dcproof.com. I used Front Page to create it. How
    > >>> do I limit the page width without using breaks so that text does not go
    > >>> across the entire page as it does now in some parts? (e.g. the
    > >>> paragraph labelled, "What is DC Proof?") I don't want the text to go
    > >>> much beyond the widest graphic (the 2nd screen shot). Must I use a
    > >>> layout table? I hope there is a simpler way.

    >
    > >>> Dan
    > >> Don't use FP or any other MS product for web design, they do a
    > >> perthetic job of it.

    >
    > > Perhaps, but I'm just creating a very simple website. Except for this
    > > problem, I haven't encountered any other difficulties.

    > Maybe because you haven't looked at your source?
    >
    > <blockquote>
    > <p align="center">&nbsp;</p>
    > <p align="center"><b><font face="Arial">
    > <img border="0" src="peano3e_qvga.JPG" width="113"
    > height="111"></font></b>&nbsp;</p>
    > </blockquote>
    > <p align="center"><font face="Arial" size="2">Copyright © 2004 Dan
    > Christensen</font></p></font>
    > </blockquote>
    >
    > </blockquote>
    >
    > </b>
    >
    > Nested blockquotes? Empty paragraphs? FONT elements everywhere? A simple
    > site, do it in notepad and use tutorials athttp://www.htmldog.com
    >


    OK, it's a mess!


    > Won't take long to learn and with the simplicity of your site won't take
    > long to handcode. The benefits will be priceless.
    >


    I will give it a try.


    > To original question, why would you want to constrain your paragraphs?
    > If I have the room, why can I not use it? How about if I zoom the text,
    > then what? It looks fine the way it is in my opinion,


    Thanks. I just thought it looked unbalanced on an wider screen. Is this
    generally accepted in web-page design?

    Dan
     
    , Jan 17, 2007
    #9
  10. wrote:
    >
    > On Jan 17, 3:20 pm, "Jonathan N. Little" <>
    > wrote:


    > I will give it a try.
    >
    >
    >> To original question, why would you want to constrain your paragraphs?
    >> If I have the room, why can I not use it? How about if I zoom the text,
    >> then what? It looks fine the way it is in my opinion,

    >
    > Thanks. I just thought it looked unbalanced on an wider screen. Is this
    > generally accepted in web-page design?


    Yes, simple philosophy "Flexible". Design with the acceptance that you will

    1) Not know what browser the visitor is use
    2) Not know what OS
    3) Not know what the window size "your canvas" will be.
    4) Do not assume that "display size" == "your canvas", not every one
    "maximizes" their browser.
    5) Do not know what fonts or font size visitor's default will be, so
    design with relative sizes for fonts and containing text blocks (i.e., em)
    6) Don't assume they can see your images, use meaningful ALT attributes
    on IMG elements
    7) I think your will get the idea, do the tutorials...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 18, 2007
    #10
  11. Scripsit :

    > My web page is at www.dcproof.com. I used Front Page to create it.


    Copy the texts you have there into a safe place and start afresh. You need a
    new start, not patches. Read a book or tutorial on web design first.

    > How
    > do I limit the page width without using breaks so that text does not
    > go across the entire page


    That's easy once you've done the homework. You will have learned how to use
    very basic CSS, and then you can add there, for example

    body { max-width: 40em; }

    Make sure you have a correct DOCTYPE declaration at the start so that
    browsers will work in "standards" mode. Note that the above rule is ignored
    by IE versions up to IE 6 inclusively, but this isn't a big issue. This is
    about optional styling, and you get a reasonably good and rapidly increasing
    browser coverage. There's really no need to start learning clumsier
    techniques that can simulate this simple setting in older browsers.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 18, 2007
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?S3VydCBTY2hyb2VkZXI=?=

    No Class at ALL!!! beginner/beginner question

    =?Utf-8?B?S3VydCBTY2hyb2VkZXI=?=, Feb 2, 2005, in forum: ASP .Net
    Replies:
    7
    Views:
    603
    =?Utf-8?B?S3VydCBTY2hyb2VkZXI=?=
    Feb 3, 2005
  2. AndrewF
    Replies:
    1
    Views:
    790
    Bruce Barker
    Oct 10, 2005
  3. Replies:
    1
    Views:
    1,089
    Victor Bazarov
    Jun 28, 2005
  4. cera
    Replies:
    1
    Views:
    1,288
    Neredbojias
    Aug 18, 2007
  5. Replies:
    0
    Views:
    496
Loading...

Share This Page