Are HTML frames good?

[Water Cooler v2]

I do not have any special question. I am just trying to learn some
positioning for Web development/design.

OK, I tried the solution with frames. And it worked. Now, I am trying
it with CSS and here's the CSS I use to embed the sidebar. Please have
a look at this:

DIV.sidebar
{
font-family: Georgia;
font-size: 9pt;
background-colorink;
margin-top:0px;
}

DIV.contentPane
{
margin-left:200px;
margin-top: 0;
margin-bottom:0;
margin-right: 50px;
}

Yet, the side bar takes up the entire width of the browser.

If I set the width of the side bar like so:

width:200px;

The side bar squeezes to 200 pixels but the rest of the space to the
right remains empty and the contentPane still starts below the end of
the sidebar, althought at a proper left-alignment of 200 px.

How do I make the sidebar a floating object? I rememeber there is a CSS
tag to do that. Although, from the code of the web page Stephen posted,
no such thing is used. Yet, the side bar on his page stays docked to
the left.

 

[Beauregard T. Shagnasty]

OK, I tried the solution with frames. And it worked.

...but has all the 'evilness' of frames. ;-)

Now, I am trying it with CSS and here's the CSS I use to embed the
sidebar. Please have a look at this:

DIV.sidebar
{
font-family: Georgia;
/* font-size: 9pt; */ <-- points are for printing

font-size: 100%; <-- your visitors' default size

background-colorink;
margin-top:0px;

width: 12em; <-- need to specify a width
10 to 12 should suffice depending
upon the width of your words

}

DIV.contentPane
{
/* margin-left:200px;
margin-top: 0;
margin-bottom:0;
margin-right: 50px; */ margin: 0 0 5em 13em;
}

Yet, the side bar takes up the entire width of the browser.

If I set the width of the side bar like so:

width:200px;

The side bar squeezes to 200 pixels but the rest of the space to the
right remains empty and the contentPane still starts below the end of
the sidebar, althought at a proper left-alignment of 200 px.

If the contentpane were, say, margin-left: 210px it probably would have
worked. However, the trouble with pixel-specific layouts is that when
your visitor increases her text size (due to your 9pt microfont), all
the text escapes the box.

See this site of mine. Note the CSS ids for #crmenu and #boxcontent
Note also how my style sheet does not use: DIV.crmenu ...

http://countryrode.com/

 

[Water Cooler v2]

font-size: 100%; <-- your visitors' default size
width: 12em; <-- need to specify a width
10 to 12 should suffice depending
upon the width of your words
If the contentpane were, say, margin-left: 210px it probably would have
worked. However, the trouble with pixel-specific layouts is that when
your visitor increases her text size (due to your 9pt microfont), all
the text escapes the box.

See this site of mine. Note the CSS ids for #crmenu and #boxcontent
Note also how my style sheet does not use: DIV.crmenu ...

http://countryrode.com/

Thanks for your invaluable corrections. I have now changed the CSS to
look like this:

#sidebar
{
font-family: Georgia;
background-color:green;
font-size: 80%;
margin-top:0px;
width:10em;
height:100%;
}

#contentPane
{
margin:0em 0em 0em 3em;
}


Yet, the right pane starts below the end of the side bar. Help would be
greatly appreciated.

 

[Beauregard T. Shagnasty]

Thanks for your invaluable corrections. I have now changed the CSS to
look like this:

#sidebar
{
font-family: Georgia;
background-color:green;
font-size: 80%; <-- that is 4/5th of my default size
margin-top:0px;
width:10em;
height:100%;
}

#contentPane
{
margin:0em 0em 0em 3em;

margin:0em 0em 0em 12em;

}

Yet, the right pane starts below the end of the side bar. Help would
be greatly appreciated.

Change your 3em to 12em or thereabouts and it should work. It needs to
be larger than the width of the sidebar. I had recommended sidebar at
width of 12 and the contentpane starting at 13. If your 10em above is
wide enough for the sidebar content, then use 11 or so for the left
margin of the contentpane.

Since we haven't seen the rest of your page, why don't you assign

font-size: 100%;

in the body { } style, and you won't need font-sizing anywhere else.
And all your visitors will be happy to be using their own default size.

 

[Water Cooler v2]

margin:0em 0em 0em 12em;


Change your 3em to 12em or thereabouts and it should work. It needs to
be larger than the width of the sidebar. I had recommended sidebar at
width of 12 and the contentpane starting at 13. If your 10em above is
wide enough for the sidebar content, then use 11 or so for the left
margin of the contentpane.

Since we haven't seen the rest of your page, why don't you assign

font-size: 100%;

in the body { } style, and you won't need font-sizing anywhere else.
And all your visitors will be happy to be using their own default size.

I actually had it set at 12em before. But it still didn't work, so I
changed it to 3em. I have changed it back to 12em and it still doesn't
work. OK, I am posting my test page here.

INDEX.HTML

<HTML>

<HEAD>
<link rel="stylesheet" type="text/css" href="css.css">
</HEAD>

<BODY>

<SPAN ID="sidebar">
<P><IMG width="100%" height="40%" src="1.jpg" /><BR></P>
<A href="Stevey.html">Stevey's Drunken Blog Rants</A><BR>
<A href="OCaml.html">O Caml</A><BR>
<A href="MoreOCaml.html">More O Caml</A><BR>
</SPAN>


<SPAN ID="contentPane">
<SPAN>When you click on a link in the navigation bar, the content of
that link appears

here.</SPAN>
</SPAN>

</BODY>

</HTML>

 

[Water Cooler v2]

I think I got it. I just removed all margin properties and put in a
vertical-align:top to both, the sidebar and the content and it worked.

Thanks very much for your help.

 

[Beauregard T. Shagnasty]

I actually had it set at 12em before. But it still didn't work, so I
changed it to 3em. I have changed it back to 12em and it still doesn't
work. OK, I am posting my test page here.

INDEX.HTML

<HTML>

<HEAD>
<link rel="stylesheet" type="text/css" href="css.css">
</HEAD>

<BODY>

<SPAN ID="sidebar">
<P><IMG width="100%" height="40%" src="1.jpg" /><BR></P>
<A href="Stevey.html">Stevey's Drunken Blog Rants</A><BR>
<A href="OCaml.html">O Caml</A><BR>
<A href="MoreOCaml.html">More O Caml</A><BR>
</SPAN>

<SPAN ID="contentPane">
<SPAN>When you click on a link in the navigation bar, the content of
that link appears

here.</SPAN>
</SPAN>

</BODY>

</HTML>

Well, that was simple to find. You are using <SPAN>s instead of <DIV>s.
Span is an inline element; div is a block-level element.

Your contentpane should be in headers and paragraphs as well, not more
spans. Your list of links in the sidebar should be a .. list.

<div id="sidebar">
<div><IMG width="[use exact pixels]" height="[use exact pixels]"
src="1.jpg"></div>
<ul>
<li><A href="Stevey.html">Stevey's Drunken Blog Rants</A></li>
<li><A href="OCaml.html">O Caml</A></li>
<li><A href="MoreOCaml.html">More O Caml</A></li>
</ul>
</div>

Style the list with your CSS.

Why not examine the source of the site I gave you a couple of posts ago?

 

[Els]

#sidebar
{
font-family: Georgia;
background-color:green;
font-size: 80%;
margin-top:0px;
width:10em;
height:100%;
}

You forgot:
float:left;

Without that, it just won't float ;-)

 

[Beauregard T. Shagnasty]

You forgot:
float:left;

Without that, it just won't float ;-)

Har! There's no float in my menu... ;-)

 

[Beauregard T. Shagnasty]

I think I got it. I just removed all margin properties and put in a
vertical-align:top to both, the sidebar and the content and it
worked.

I don't see how that would make a difference.

Thanks very much for your help.

Well, I hope you come back to read my last post about your spans...

 

[Water Cooler v2]

Well, I hope you come back to read my last post about your spans...

Yes, I was conscious of the difference between the DIV and SPAN tags
and that is why I changed the DIVs to SPAN. But even if I were to
change them back, it would work now. Right? I will also look and
closely study your CSS. Thank you very much for your help.


Yes, Els. The float:left was what I was not able to remember. Thanks.

 

[Beauregard T. Shagnasty]

Yes, I was conscious of the difference between the DIV and SPAN tags
and that is why I changed the DIVs to SPAN. But even if I were to
change them back, it would work now. Right? I will also look and
closely study your CSS. Thank you very much for your help.

You're welcome. Hope you get it sorted out.

[gone for the evening soon]

 

[Els]

Har! There's no float in my menu... ;-)

I see now
But position:absolute isn't a good idea in all pages. It may of course
work for yours, but it seems you always have content being taller than
navigation?

 

[Beauregard T. Shagnasty]

I see now
But position:absolute isn't a good idea in all pages. It may of course
work for yours, but it seems you always have content being taller
than navigation?

Content is king!

 

[Els]

Content is king!

True!

(but if there's a lot of king's pages, the navigation will also grow
taller)

 

[Terry]

Are HTML frames a good thing or a bad thing?

http://72.14.203.104/search?q=cache...rld&hl=en&gl=us&ct=clnk&cd=2&client=firefox-a
In case that link does not work, google catinadogsworld and look at
google's cache (the 1k version). Bad, I would say.

--
TK
http://wejuggle2.com/
Still Having a Ball










..

 

[Blinky the Shark]

True!

(but if there's a lot of king's pages, the navigation will also
grow taller)

But all the king's pages
And all the king's men
Couldn't put Humpty Dumpty
Back together again

 

[dorayme]

Oh, no no no. This is usenet; people are plain spoken.
They won't adjust to you. You adjust to them.
The groups are, for the most part discussion groups, not
help groups.

A tricky thing really: if everyone really adjusts to "them", then
everyone adjusts to everyone else...

er... no... er.... I dunno...better get my Game Theory reference
books out...

 

[mbstevens]

A tricky thing really: if everyone really adjusts to "them", then
everyone adjusts to everyone else...

er... no... er.... I dunno...better get my Game Theory reference
books out...

One complication seems to be that you have both zero-sum and
non-zero-sum games going on in the same bucket.

 

[Brendan Gillatt]

Are HTML frames a good thing or a bad thing?

They are bad in the way most people use them - as a way of changing the
content on all pages with just one file. Server side scripting is far
more adept to this job and only pumps out one page.
What they should be used for is exactly what they are named as - a way
to frame multiple, differing pages of information, perhaps from
different websites, into one. For example a site may decide to have a
comparison of two different pages with a similar topic, say different
specifications for alternative products.

For someone who knows HTML, and only a measely bit of JavaScript and
DOM familiarity, what are the alternatives to frames?

If you want a menu I would say use <div> elements and server side
scripting to include a common page of information.