Loading External Document Into A Division

[ALPHA]

I'd like to know if it is possible to load an external .html document into a division much like you would if it were an iframe. I've set up a basic template, no idea if it is valid (it doesn't matter), if you can get something to load into #box I'd be jumping for joy. Also is there a way to get Internet Explorer to deal with min-height?

 

[RX-7_FC_DrIfteR]

Why don't you just use iframe instead of Div?

 

[ALPHA]

Why don't you just use iframe instead of Div?

Because I don't want an inline frame.

 

[Sage]

I think you'd have to use the object element. It's in that book that I made you buy – page 260.

As for min-height, IE handles the height property as min-height, because it's retarded (this is assuming you don't mess with the overflow property at all – the second you do, IE handles height correctly). You can use this goof-up to your advantage by feeding IE a height value and other browsers a min-height value. In fact, you might not have to even go out of your way to do that, so long as the height value is fed first, like:

#thing {
          height: 100px;
          min-height: 100px;
}

If that doesn't work, then just use a CSS filter to get what you want. 👍

 

[ALPHA]

Thanks for the help but as soon as I read the part about Internet Explorer giving the object element an ugly scroll bar I thought forget it. Oh well, I'll just use javascript layers and hide and unhide them, marvellous.

So if a javascript layer is hidden, the images will still load, am I correct? Is there a way to disable this loading of images until they are actually visible or am I just asking way too much.

Also why is it that when you declare a <p> element in decides to drop it down onto a new line?

 

[Sage]

So if a javascript layer is hidden, the images will still load, am I correct? Is there a way to disable this loading of images until they are actually visible or am I just asking way too much.

I'm sure there is, but hell if I know. I bought a Quickstart guide for Javascript a while ago, but haven't read it yet.

Also why is it that when you declare a <p> element in decides to drop it down onto a new line?

Because… that's… the very definition of a paragraph, duh? Don't tell me that you put two paragraphs on the same line when working in Microsoft Word…

 

[ALPHA]

Because… that's… the very definition of a paragraph, duh? Don't tell me that you put two paragraphs on the same line when working in Microsoft Word…

So what can I do to get a paragraph directly underneath a heading?

After a days worth of digging, I found this except it loads the content into a buffer (the iframe) then plonks it into the #display division, I think. I just need to find out if it has to load the content into the iframe first, and how to rid of the loading.gif without getting a javascript error. I wish I knew what I was doing.

 

[Sage]

So what can I do to get a paragraph directly underneath a heading?

OOooooooohhhh, that's what you mean!

I have a really neat trick for you (and everybody else) that I just learned a couple weeks ago. Put this at the very top of your CSS doc:

* {
          margin: 0;
          padding: 0;
}

Browsers automatically give every block element (except divisions) preset margin and padding space. Using this rule, it'll all be reset to 0 (the asterisk is a "star selector", which selects all known elements in a document), which works wonders – different browsers have different preset values, especially with lists, and it also solves problems such as paragraphs drifting far from headings. Beautiful, ain't it?

After a days worth of digging, I found this except it loads the content into a buffer (the iframe) then plonks it into the #display division, I think. I just need to find out if it has to load the content into the iframe first, and how to rid of the loading.gif without getting a javascript error. I wish I knew what I was doing.

Dun ask me. Any particular reason you're doing it this way? This might (or might not) work better for what you're trying to accomplish.

 

[ALPHA]

OOooooooohhhh, that's what you mean!

I have a really neat trick for you (and everybody else) that I just learned a couple weeks ago. Beautiful, ain't it?

Jolly fantastic!

Dun ask me.

What kind of a sucky web developer/designer/thing are you then?

This might (or might not) work better for what you're trying to accomplish.

Looks tricky, I'll print it off and give myself some bed time reading later on, thank you .

 

[Sage]

What kind of a sucky web developer/designer/thing are you then?

A growing one!

[/corny]

 

[Blake]

So what can I do to get a paragraph directly underneath a heading?

Or if you could be bothered you could use absolute positioning.

h1.header {
position: absolute;
top: 100px;
left: 100px;
}

And just adjust the pixels to suit where you want it on the page.

 

[Sage]

That would absolutely ruin a multiple-heading design though, because positioning is based off of the parent element – thus all child elements would be affected (and frankly, assigning a class [or more properly, an ID] to each heading is tedious). It's much easier to modify the element's box within the flow of the document instead of messing with positioning. Just deleting the margins and padding will accomplish that with no muss, no fuss.

 

[ALPHA]

EDIT: I'm so stupid! I didn't think of giving the body a specific height in pixels. I had #left set to a height of 100%, it worked in Internet Explorer but in Firefox, the division only came down to the size of the window, not 100% of the body size, any ideas why it didn't work in Firefox? Anyway, I just gave #left a pixel value and now I'm happy because everything works. &#8592; See?

I've decided to do away with loading content externally as it was far too much of a hassle, plus I have no more hair to pull out.

So I've gone with individual pages but this has given me some problems, I've got a main content divison and it wont let me give it any padding between it and the bottom of the page. Also my band of colour on the left hand side (#left divison) doesn't go to the bottom of the page like a good little division should. If you could sort out these hiccups, I would be happy, and being happy is good.

 

[Shannon]

OOooooooohhhh, that's what you mean!

I have a really neat trick for you (and everybody else) that I just learned a couple weeks ago. Put this at the very top of your CSS doc:

* {
          margin: 0;
          padding: 0;
}

Browsers automatically give every block element (except divisions) preset margin and padding space. Using this rule, it'll all be reset to 0 (the asterisk is a "star selector", which selects all known elements in a document), which works wonders – different browsers have different preset values, especially with lists, and it also solves problems such as paragraphs drifting far from headings. Beautiful, ain't it?

There's only one problem with that though. When you have multiple paragraphs, as there is no margin, all the paragraphs get sucked up nice and close and it's hard to distinguish a paragrah. What I mean is:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed suscipit luctus risus. Proin sagittis. Aliquam justo leo, dignissim non, laoreet placerat, sagittis vitae, magna. Cras aliquet libero vitae nulla.

Curabitur molestie, nunc ac tincidunt luctus, sapien massa tempus orci, commodo pulvinar turpis ante ac quam. Curabitur at mauris. Mauris porttitor orci ac dolor. Maecenas eleifend dui ac turpis. Aliquam eros. Praesent ut est id lorem laoreet ullamcorper. Maecenas gravida ipsum vitae elit. Nullam a lorem ac nunc mollis faucibus. Nulla porttitor, elit ac ultrices gravida, arcu lacus venenatis tortor, eu rhoncus ante nisl et nibh. Cras quis libero. Aenean quis tortor tempus lacus convallis dictum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed suscipit luctus risus. Proin sagittis. Aliquam justo leo, dignissim non, laoreet placerat, sagittis vitae, magna. Cras aliquet libero vitae nulla.
Curabitur molestie, nunc ac tincidunt luctus, sapien massa tempus orci, commodo pulvinar turpis ante ac quam. Curabitur at mauris. Mauris porttitor orci ac dolor. Maecenas eleifend dui ac turpis. Aliquam eros. Praesent ut est id lorem laoreet ullamcorper. Maecenas gravida ipsum vitae elit. Nullam a lorem ac nunc mollis faucibus. Nulla porttitor, elit ac ultrices gravida, arcu lacus venenatis tortor, eu rhoncus ante nisl et nibh. Cras quis libero. Aenean quis tortor tempus lacus convallis dictum.

Now, if IE wasn't an arse and supported adjacent selectors everything'd be fine and dandy, as we could just go:

h1 + p {
	margin: 0;
	padding: 0;
	}

But that'd be too much to ask of Microsoft.

 

[Sage]

Shannon – I think you misunderstand the point of that "global reset". Different browsers set different defaults for block-element margins and padding – IE, Firefox, and Safari probably all have different default paddings for paragraphs, for instance, and I know they have different default values for headers and lists. By using this global reset, you just set everything to 0 in one quick swipe, then go through and individually set each element to exactly what you want, so that there are no cross-browser rendering issues.

In this example, after setting everything to 0, ALPHA could just add this in:

p {
         padding-bottom: 10px;
}

… which would work just fine. The whole point is that you later go through and set everything to exactly what you want… if you don't do the global reset first, then the chance that a default value will pop up and bite you in the butt is high.

 

[Pupik]

So what can I do to get a paragraph directly underneath a heading?

I hated the <p> tag, because it always put whitespace above and below every beginning and end-tag.

However, if you assign the proper margins for a header tag like <h1>, then you can use a <p> tag underneath with no whitespace after the header, and have the text go directly below it. Of course, you can use the style sheet to define how big the text for <h1> will be, the padding, margins, etc. just like any ohter tag. An example:

Header with an <h1> tag
Text goes here. Text goes here. Text goes here.
Text goes here. Text goes here. Text goes here.
Text goes here. Text goes here. Text goes here.

You can use multiple <h1> tags with CSS, just don't try to use them in a WYSIWYG web page editor, or you'll get mixed results. <h1> tags are old-school but Google and Yahoo!'s bots still like to read your source and scan for information in the title, meta-tags, the first 20 words of your site, and other non-<p> tags that might give good information. Or so I'm told...

 

[RX-7_FC_DrIfteR]

So...What was the final anwser to getting a external document into the Div?