Creating a frameless site - how do I position my <div>s

[Trevor L.]

Why position:absolute? Just let the footer 'float' under everythign
else - then you do not need to position anything. Also,
vertical-align will do nothing for a block tag.

O.K.
I did think later of removing position:absolute.

I'll have to think about vertical-align and block tags,
1. What tags does vertical-align affect?
2. What is the difference between a block tag vs in-line tag?
There was a post on this recently which I saved.
Is this a correct interpretation?
===============
With "block" elements, there also exists "inline" elements. You
typically employ "block" elements to position and contain
"inline" elements. An inline element flows from "left to right"
and "top to bottom" and one property of the inline element
equates to the line-height. Basically, it's easier to think of inline
elements as lines of text or specific areas of text inside a paragraph
of text. They typically wrap around or flow around block elements
===============
This last sentence looks a bit strange. I thought block elements would
contain in-line elements, not the other way around.

Ugh. Why? Try overflow:scroll.

I will.
What I need are good HTML CSS and JS references which I can download and
refer to when I have problems rather than having to
1. Rely on memory
OR
2. Keep searching sites such as w3schools.com

I guess using TopStyle Lite for editing my CSS may improve things

I hope I can say that I hate the direction you are heading in here. I get
the feeling that you are 'pimping' your page with everything
including the coon tail on the antenna, the running boards, and the
whitewall tires. Keep it simple, Trevor. You are just trying to do
too much and confusing yourself in the process. The page is already
unmanageable, and the stylesheets are once again littered with custom
classes.....

No Murray, it is OK to say that.
All input is welcome, so long as it isn't totally abusive (and yours is not)

But to reply:
1. I suppose it could seem overloaded
I just want a structure which to me seems simple and which can easily be
done with frames.
a. Header
b. Side Menu
c. Main page (to the right of the side menu and underneath the header )
d. Footer (underneath everything else)
I only decided on the footer because with frames there was no problem in
getting a full page, so I thought that this idea would help me do the same
thing

2. Yes, there are a lot of custom classes.
I asked before what is the best approach
1. Specific CSS in the header of each page
2. HTML attributes in the tags
3. In-line styles (inside the tag such as <p style="text-align: left;"> -
just an example; not relevant to anything in particular)
What do you think?

 

[Trevor L.]

Murray,
Another follow-up

Why position:absolute? Just let the footer 'float' under everythign
else - then you do not need to position anything.

I found this works
#footer
{
position: relative;
text-align: center;
left: 14%; width: 86%;
overflow: auto;
}

Without relative (or absolute), the <div> positions under all the <div>s (as
you said).

At least I assume it does.
Anyway, without it, centering text in the "footer" <div> doesn't centre it
in the "right" <div> (43% in from the left of the "footer" <div>)
Instead, it positions 36% in from the left of the "footer" <div> (50% - 14%)
, which is not where I want it.

But now the "footer" <div> doesn't bottom justify.
It top justifies to the maximum of the bottom of the "left" <div> and the
"right" <div> (when expanded).
Which I guess is what the CSS tells it to do. I want it at the very bottom

Ugh. Why? Try overflow:scroll.

overflow:auto is fine.
The scroll bars then don't show when they are not needed.

You are just trying to do too much and confusing yourself
in the process.

Using frames, this is easy, so I don't think it is too much.
And I think my confusion is being removed as part of the learning process.

If you have no more ideas, then that is fine. As I say, I am learning a lot
as I go.

 

[Kevin Spencer]

Hi Murray,

I hope I can say that I hate the direction you are heading in here. I get
the feeling that you are 'pimping' your page with everything including the
coon tail on the antenna, the running boards, and the whitewall tires.
Keep it simple, Trevor. You are just trying to do too much and confusing
yourself in the process. The page is already unmanageable, and the
stylesheets are once again littered with custom classes.....

I think Trevor is using his web site to teach himself how to do HTML, CSS,
and JavaScript, and as an experimental medium, I don't think it falls under
the same category as most web sites.

Your instincts regarding design are excellent, of course. But I admire
Trevor's intrepid efforts to learn these technologies. I wish more people
had that attitude! Trevor is the type of person I would bend over backwards
to help (and in fact, have!).

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Kevin Spencer]

Hi Trevor,

What I need are good HTML CSS and JS references which I can download and
refer to when I have problems rather than having to
1. Rely on memory
OR
2. Keep searching sites such as w3schools.com

The ones I gave you should supply you with all the information you need. Of
course, from time to time I Google a specific topic, in order to get a more
"human" explanation of something.

The Microsoft .Net SDK contains the complete MSDN Library, if you'd care to
install that, and it's a free download:

http://msdn.microsoft.com/netframework/downloads/updates/default.aspx

Yes, it looks like it's specific to .Net development, and does require the
..Net platform (also free) to install, but in fact, the entire MSDN Library
is included. One of the nicest things about it is the "Help Favorites,"
which enables you to create local bookmarks to topics you need to look up
frequently.

Specifically to those of us doing HTML, DHTML, CSS, JavaScript, XML, etc.,
those topics, including standards references, are all in there, under the
topic of "Web Development."

I keep it open all day, every day!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Murray]

Your instincts regarding design are excellent, of course. But I admire

Trevor's intrepid efforts to learn these technologies. I wish more people
had that attitude! Trevor is the type of person I would bend over
backwards to help (and in fact, have!).

Oh, I definitely agree with you, Kevin. Trevor's ability to grasp
javascript has amazed me - we just have to find a way to get him rolling on
this CSS thing! 8)

 

[Murray]

Trevor:

I'll have to think about vertical-align and block tags,
1. What tags does vertical-align affect?

Any inline tag - that is, any content that is rendered in a text box as
opposed to a block.

2. What is the difference between a block tag vs in-line tag?

Ahh - the seminal question.

There are three different kinds of tags - presentational, inline, and block.

An inline tag is rendered in a text-box (an inline box). This is a complex
thing that is really designed for text - it includes space below for text
character descenders, and above for diacritical marks and other 'up there'
stuff. In addition, it is (by default) only as wide as the content. Thus,
you can have many text boxes adjacent to each other on the same horizontal
line. To see how *REALLY* complicated the inline box is, go here -

http://www.meyerweb.com/eric/css/inline-format.html

Since text boxes are designed for the display of text content, they allow
certain attributes that are not available to block tags, just as block tags
have applicable attributes that don't work for inline tags.

The vertical-align styles are for inline tags.

Block tags are used for blocks of content. As such, they fill the width of
the container, pushing adjacent content to the next line. Just as inline
tags being rendered within inline boxes, blocks are rendered using a block
box, or the infamous box model - basically the box is one that has width,
padding, borders, and margins. The block tag notion is the one that allows
CSS layout.

Common examples of presentational tags are -

<strong>, <b>, <i>, <em>, etc.

Common examples of inline tags are -

<span>, <img>, <a>, <br>, and others I can't think of right now.

Common examples of block tags are -

There was a post on this recently which I saved.
Is this a correct interpretation?

It's muddled, frankly.

What I need are good HTML CSS and JS references which I can download and
refer to when I have problems rather than having to

Personally, I think that the Foundations ebook at
http://www.projectseven.com (commercial) is one of the best.

2. Yes, there are a lot of custom classes.
I asked before what is the best approach

Understand and use descendent selectors. As I said before, I rarely use
custom classes. A stylesheet filled with custom classes is one that gives
no clue as to the location or purpose of the rule. Descendent selectors
immediately reveal where they apply, and may even offer a clue to their
purpose. For example, it should be immediately clear what the purpose of
this rule is -

#masthead #menu a

which will apply only to the <a> tags within a container called menu, within
a container called masthead.

Does that help?

 

[Trevor L.]

The Microsoft .Net SDK contains the complete MSDN Library, if you'd
care to install that, and it's a free download:

http://msdn.microsoft.com/netframework/downloads/updates/default.aspx

I downloaded this and attempted to install. But it said I must have .Net
Framework 1.1.
Strange, Control Panel Add or Remove says I have:
Microsoft MSDN 2005 Express Edition 682.00 MB
Microsoft .Net Framework 2.0 71.45MB

These came when I tried, but failed, to install Visual Studio Express 2005.
I can't find any shortcuts for them, so I don't know what they are.

Why should it object ??

Not to worry, the message said I could install just the doco. That sounded
OK so I gave that a try
I now also have:
Microsoft .Net Framework SDK 1.1 100.00MB

I now have to launch it and have a look. It put a shortcut in All
Users/Startup
(I expected it on the desktop, but I'll make another one )

BTW,
What are the other two ?
What do they do and how do I use them?
Are they useful or should I delete them to save some space ?
(My 40GB C: drive is 57% used, but why keep what can't be used??)

Or is there a Microsoft .Net Framework SDK 2.0?

 

[Trevor L.]

I have loaded another version at
http://tandcl.homemail.com.au/newweb.index.html

This version adds a blank gif of differing height to the bottom of all pages
to pad out the page with the background image.
When expanded (e.g. in Site Map or About Us), there is no grey space.

But *only* in IE7. In Firefox1.5 it ignores the padding

Questions.
1. What does one do to get it work in Firefox?
2. Given it can be made to work in both,
How can one write a script to determine what height to make the gif ?
3. Similar to 2, but how to do this when the page is unexpanded (e.g. Site
Map or About Us when first entered.)

I have tried measuring the height of elements, but <div>s or <table>s don't
return a height, unless it is hard coded in.
I can't figure out how to display the height when expanded.
Even using JS to change the height of a <div> doesn't actually increase its
height.

 

[Windsun]

IE7 is still beta. It still has a LOT of CSS bugs, not sure about any HTML
ones.

 

[Kevin Spencer]

Hi Trevor,

I'm not sure what you installed, but all you needed to install was the
Framework, which is the redistributable (it is a free installation for any
Windows computer). Then you could install the SDK.

Visual Studio Express is a stripped-down and free version of Microsoft
Visual Studio, the Integrated Development Environment for creating .Net
applications of all kinds. As you're a programmer, you might enjoy giving it
a try!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
We got a sick zebra a hat,
you ultimate tuna.

 

[Kevin Spencer]

Hi Trevor,

I have loaded another version at
http://tandcl.homemail.com.au/newweb.index.html

The URL *should* be: http://tandcl.homemail.com.au/newweb/index.html

This version adds a blank gif of differing height to the bottom of all
pages to pad out the page with the background image.
When expanded (e.g. in Site Map or About Us), there is no grey space.

But *only* in IE7. In Firefox1.5 it ignores the padding

You shouldn't be using IE7 to debug your stuff, since it is buggy as well!
But I know that IE6 handles padding differently than Mozilla. I don't know
whether IE7 does or not. You may have to check the documentation.

I'm not sure what you mean by "to pad out the page with the background
image". I didn't see any background image there." What exact requirement are
you trying to fulfill with this tactic?

Also be aware that in IE6, the right div will go down below the left if the
window is resized too small.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
We got a sick zebra a hat,
you ultimate tuna.

 

[Murray]

But I know that IE6 handles padding differently than Mozilla. I don't know

whether IE7 does or not. You may have to check the documentation.

It does not on a page with a valid and complete doctype. On such a page,
the box model is identical. That's another reason to always use good
doctypes.

 

[Trevor L.]

Hi Trevor,
The URL *should* be: http://tandcl.homemail.com.au/newweb/index.html

Yep - mea culpa

You shouldn't be using IE7 to debug your stuff, since it is buggy as
well!

Well, I suppose I could delete it (except that it isn't in the Add or Remove
Programs)
I dont know how to keep two versions at once - IE6 and IE7

But I know that IE6 handles padding differently than Mozilla. I
don't know whether IE7 does or not. You may have to check the
documentation.

Murray said that IE6 and IE7 are the same

I'm not sure what you mean by "to pad out the page with the background
image". I didn't see any background image there." What exact
requirement are you trying to fulfill with this tactic?

Hmm. I'll try to explain.
Padding wasn't a good choice of word, since it makes one think of the CSS
term padding

The "right" <div> has a background image, but the image only extends in
height as far as the <div> itself.
So I added a "footer" <div> below and inside the "right"<div>
<div id = "right">
<div id = "footer">
</div> <!-- end "footer"-->
</div> <!-- end "right"-->

What I want to do is put something into the "footer" <div> so that it
extends to the bottom of the browser page.
This will obviously also expand the "right"<div> and therefore the
background image will expand with it.
My browser page is 768. For others with different size browsers (more
pixels) there will still be a gap, but they wouldn't be any worse off than
now.

So I want to find out where the "right"<div> ends and set the height of

Also be aware that in IE6, the right div will go down below the left
if the window is resized too small.

Yes, I have tried this and with 800*600 it is OK. Not many would be smaller
than this, I hope.

 

[Kevin Spencer]

Hi Trevor,

Well, I suppose I could delete it (except that it isn't in the Add or
Remove Programs)

In Add/Remove programs, check the "Show Updates" box, and you'll find it.

I dont know how to keep two versions at once - IE6 and IE7

You can't. IE is an integrated part of the operating system. As such, there
can only be one running on the system.

So I want to find out where the "right"<div> ends and set the height of
blank.gif to fill the space between where the "right" <div>ends and the
bottom of the browser window.

After looking it over, I think it may have something to do with the width
you've set for the image of 0 pixels. Try setting it to 1 pixel.

Yes, I have tried this and with 800*600 it is OK. Not many would be
smaller than this, I hope.

Tut-tut, Trevor. You're not thinking fourth-dimensionally! You're only
thinking of the size of the screen, not the size of the window. The window
can be resized to any size, regardless of the screen size!

This is the sort of thing that separates the men from the boys. As a
programmer, remember that you should account for any contingency! ;-)

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
We got a sick zebra a hat,
you ultimate tuna.

 

[Murray]

Murray said that IE6 and IE7 are the same

No - I said that IE6 and Mozilla were the same on a STANDARDS page.

 

[Trevor L.]

In Add/Remove programs, check the "Show Updates" box, and you'll find
it.

Yep, found it

You can't. IE is an integrated part of the operating system. As such,
there can only be one running on the system.

OK. So I'll keep the install in case I want to swap.

After looking it over, I think it may have something to do with the
width you've set for the image of 0 pixels. Try setting it to 1 pixel.

I tried 1 pixel. It didn't seem to make any difference. But I can try again
during daylight hours when I am more awake (after midnight here in OZ).

I am still wondering about how to measure the size of the elements in a

Tut-tut, Trevor. You're not thinking fourth-dimensionally! You're only
thinking of the size of the screen, not the size of the window. The
window can be resized to any size, regardless of the screen size!

I forgot to mention that I also tried shrinking the size of the window. When
it gets really small, the "right" <div> jumps to the bottom.
However, I thought smaller windows would only matter when viewers had
smaller screens. As you say, it ain't necessarily so.

This is the sort of thing that separates the men from the boys. As a
programmer, remember that you should account for any contingency! ;-)

Too true.

 

[Kevin Spencer]

I tried 1 pixel. It didn't seem to make any difference. But I can try

again during daylight hours when I am more awake (after midnight here in
OZ).

It was a guess. I am afraid I don't have an overabundance of time right now
to work it out on my own machine. But there is some reason why the image is
not pushing the div in FireFox. And there isn't a lot of stying applied.
Perhaps a simple non-breaking space is needed. Again, just a guess.

I am still wondering about how to measure the size of the elements in a
<div> so that I can add a gif of a specified size. I'll search some of the
references in the morning.

It depends upon the elements. Some useful properties from the DOM that are
available in both IE6 and Mozilla:

Element properties:
clientHeight,clientWidth - includes padding, but not scrollbar, border, or
margin.
offsetHeight,offsetWidth - includes padding, border, scrollbar, but not
margin.
scrollHeight, scrollWidth - total height/width of an element, including
padding.
When the element scrolls, represents the height/width of the content,
regardless of the size of the viewable content.
scrollLeft, scrollTop - distance from left/top of viewable portion of
element
to it's actual top. When the element scrolls, the actual top may not be
visible.
offsetLeft, offsetTop - Distance from left/top of element to its parent
container's top.
This one is tricky. IE6 and Mozilla calculate parent elements
differently.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
We got a sick zebra a hat,
you ultimate tuna.

 

[Murray]

Trevor:

It was a guess. I am afraid I don't have an overabundance of time right
now to work it out on my own machine. But there is some reason why the
image is not pushing the div in FireFox. And there isn't a lot of stying
applied. Perhaps a simple non-breaking space is needed. Again, just a
guess.

Could you post a link to the page again, and tell me which image to look at
here - there's a good explanation lurking there, and I want to find it!

Must you? Really? I hate stuff like this....

 

[Trevor L.]

Trevor:


Could you post a link to the page again, and tell me which image to
look at here - there's a good explanation lurking there, and I want
to find it!

http://tandcl.homemail.com.au/newweb/about.html
is a good example

Lines 339 - 346:
<div id="footer">
<img src =ïmages/display/blank.gif" width="1" height= "160" />
<input type="button" value="Home" class="hidden"
onclick="location.href='index.html'"/>
</div>

</div>
<!-- End Right division -->

class="hidden" is a print style.
The image blank.gif pushes down the "Home" button in IE6 but not in Firefox

Must you? Really? I hate stuff like this....

Hmm. I suppose it is a bit of a kludge and it also wouldn't work if
Javascript is turned off, but the page looks nicer when the background is
complete (no gap at the bottom).

I can do this with frames, but the whole object of the exercise is to get
away from using frames !!

 

[Stefan B Rusynko]

I'd say you have bigger problems in the page layout
- starting w/ the wrong Doctype for a non frameset page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- look at it in an 800x600 browser window

FF is ignoring the image because it sees
<img src =?mages/display/blank.gif" width="1" height= "160" />And IE Sees <img src =ïmages/display/blank.gif" width="1" height=
"160" />

Instead of

<img src =images/display/blank.gif" width="1" height= "160" />

Note the difference in the I in images/

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Murray wrote:
| > Trevor:
| >
| >> It was a guess. I am afraid I don't have an overabundance of time
| >> right now to work it out on my own machine. But there is some reason
| >> why the image is not pushing the div in FireFox. And there isn't a
| >> lot of stying applied. Perhaps a simple non-breaking space is
| >> needed. Again, just a guess.
| >
| > Could you post a link to the page again, and tell me which image to
| > look at here - there's a good explanation lurking there, and I want
| > to find it!
|
| http://tandcl.homemail.com.au/newweb/about.html
| is a good example
|
| Lines 339 - 346:
| <div id="footer">
| <img src =ïmages/display/blank.gif" width="1" height= "160" />
| <input type="button" value="Home" class="hidden"
| onclick="location.href='index.html'"/>
| </div>
|
| </div>
| <!-- End Right division -->
|
| class="hidden" is a print style.
| The image blank.gif pushes down the "Home" button in IE6 but not in Firefox
|
| >>> I am still wondering about how to measure the size of the elements
| >>> in a <div> so that I can add a gif of a specified size. I'll search
| >>> some of the references in the morning.
| >
| > Must you? Really? I hate stuff like this....
|
| Hmm. I suppose it is a bit of a kludge and it also wouldn't work if
| Javascript is turned off, but the page looks nicer when the background is
| complete (no gap at the bottom).
|
| I can do this with frames, but the whole object of the exercise is to get
| away from using frames !!
|
| --
| Cheers,
| Trevor L.
| Website: http://tandcl.homemail.com.au
|
|