Beginner's question: How to limit page width?

D

dchris

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
 
C

Chaddy2222

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.
 
D

dorayme

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>
 
D

dchris

Chaddy2222 said:
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
 
T

The Eclectic Electric

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
 
J

John Hosking

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!
 
B

Brian Cryer

John Hosking said:
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.
 
J

Jonathan N. Little

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.
 
D

dchris

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
 
J

Jonathan N. Little

On Jan 17, 3:20 pm, "Jonathan N. Little" <[email protected]>
wrote:
I will give it a try.



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...
 
J

Jukka K. Korpela

Scripsit (e-mail address removed):
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top