My columns are falling down the well, but only in IE. Still, they are doing it in IE, very baaaaaaaaaad!
I was considering the effect of widths. At one stage last night, working with changing from full-page to two-column layut in the central area of the viewport, I had the two coumns all right. I wasn't checking with IE at this stage, though (I kept the files, and could go back and look).
To my pleasure, I discovered that using a width specification inside a column (div) allows you to specify 90%, and quite apparently, that's now (inside the div) 90% of the column width, not of the full-page width. Please somebody tell me if I'm wrong about that.
I have a very sneaking suspicion, though, that my code has some incompatibilities in the CSS width specifications. Maybe Opera, Firefox and Netscape all go into Quirks mode (see? I'm learning more words) to deal with my incompatibilities. I try to calculate, and even use a calculator, and I understand that browsers may round percentages a bit diffrently, too. It's quite possible I miscalculated something, and perhaps, with boxes ("box model") defined in my CSS, and IE not handling that like the other browsers, IE goes beyond Quirks mode into outer space, or something like that.
So I plan to go over the CSS (and HTML) carefully and check my width specifications, in case IE is having trouble with those. Won't have time till late today, or more likely tomorrow, to do that. But if I can, I'll post the new page that Fang fixed for me in a single post (see the thread on the floating dog-logo, IE ouch). Maybe I can get the page with Fang's solution up today; if not, then tomorrow.
So, am I right about widths, do you think? You could check it now, because I have the pre-Fang-solution page up here:
<!-- m --><a class="postlink" href="http://www.coherentdog.org/index7007.htm">http://www.coherentdog.org/index7007.htm</a><!-- m -->
Explanations are at:
<!-- m --><a class="postlink" href="http://www.coherentdog.org/layout.htm">http://www.coherentdog.org/layout.htm</a><!-- m -->
The CSS file (for the IE Bottomless Pit file) is called codog7007.css, and it's in the same directory as the page. Well, you people know how to find it, I expect. I still don't, not without logging into my ISP and using their file-manager.
Thu, 24 Feb 2005 11:21:46Hi Carol,
I'm not sure what you mean about columns falling down the well, but if you mean that you can't get two columns to work, here's a simple way to do it :
css
#container {
position:relative;
}
#right {
width:49%;
float:right;
}
#left {
margin-right:49%;
}
html
<div id="container">
<div id="right">
This is on the right
</div>
<div id="left">
This is on the left
</div>
</div>
If you add borders to those divs, you'll see how it works.
I think I understand your question about widths... Here, the container has/is (?) 'position:relative', so elements inside that will be relative to it. That means that, as you said, if the container is 300px wide and you make a child of that 50% wide, it will be 150px and stay inside the parent. I use width:49% here rather than 50% to prevent them overlapping as browsers round up or down differently.
One problem you may have with what I've posted here is if you want to use different backgrounds for those columns. The best I can suggest with completely fluid columns is to make the floated column into a box rather than a complete column. If one of the columns has a fixed width it becomes a lot easier - you can use a background image in the container. Another way is if you know the height of the container - if it's a fixed height. Then you can set the floated div to be the same height and give it a background.
But...I think you weren't worrying about different backgrounds with your dog, so no worries, I guess.
To find your css file (or anyone else's), there are a couple of things you can do. The easiest way (I think) is to have the WebDev toolbar installed in Firefox. With this, you can go to where it says 'css' and choose 'view css'. Otherwise, you can look at the source code of someone's page easily with any browser and find the location of the css file from the head. For example, the address of one of your pages is "http://www.coherentdog.org/index7007.htm". If I go there and view the source, I can see this: <link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"codog7007.css" type="text/css"> in your head.
If I substitute 'index7007.htm' for 'codog7007.css', I can see your css file. Have a look here : <!-- m --><a class="postlink" href="http://www.coherentdog.org/codog7007.css">http://www.coherentdog.org/codog7007.css</a><!-- m -->.
I hope this helps.
Good luck with everything.Dear BonRouge,
Your reply is so very rich that I'll be working with it for some time. You have explained many things that I can come close to visualizing, because I've been looking around at numbers of sites, yours included, and View-ing Source, often enough. Thanks for the tips on picking up the CSS file, if it's available! (Isn't always; I plan to keep mine available, partly because they're no great shakes, and I don't have secrets - I'm not a web-designer (hehe)
And thanks for your wonderful analyis and teachings! Are you a teacher? If so, you're surely a very effective one.
I do think I can use your suggestions for any two-column page layouts, because probably, I could keep the leftmost column fixed in width. Not sure yet, but I'll play with it. Your post is just full of stuff I can both study and really learn from.
When I first came here, less than three months ago, I found it hard to read and understand any post, including replies to my questions (which I had trouble asking, because to ask questions, you have to know enough to be able to ask them!)
But my experince in taking on new endeavors is that it takes about four months (for me, at least, and I think it's common for others, too) to become oriented somewhat, and that can happen if you keep working away at things, and also, keep reading, even if you don't nnderstand very well. Well, BonRouge, you and others here are proving me right by the excellence of your posts and teachings! So, the fool who rushes in where angels fear to tread, and squeaks, gets the grease (deadpan).
Thanks!
Thu, 24 Feb 2005 20:48:18I forgot to say, about falling down the well, that in IE (but not Opera, Firefox nor Netscape), column two in my current version (index7008.htm - not posted) - appears below, not beside, column one. So I have, in effect, all one column, though their background colors are different. It makes a long page! And a bit blank-looking on the right (hehe)
Haven't posted index7008.htm; that's the one I fixed with Fang's tip about putting the animal-logo INSIDE the headings div. It worked instantly, of course. I'll probably post it on my site, to show how one tip from one person can fix a nagging difficulty.
Probably some of my friends would really like to make themselves web sites, and though none of us is likely to become a web-designer professionally, I see no reason we shouldn't enjoy making our own fairly simple (I hope not -minded) sites (deadpan again - but with great thanks to everyone here).
Thu, 24 Feb 2005 21:04:53Originally posted by CarolW
And thanks for your wonderful analyis and teachings! Are you a teacher? If so, you're surely a very effective one.
Hi Carol,
Actually, I'm an English teacher.
Good guess.
I'm glad you found the information useful.
Good luck.Well, I half did it. My head is still spinning, and I'm getting really silly, but still having fun. I have a two-column layout that seems to be working as intended (astounding!). Put up my first page that way the other night in the wee hours, and then adapted a couple more pages. My page requesting help with layout is one of them, and it's become a tangled mess in the content, soaking up this and that event, and - thanking some of you people here. All the same, I forced it into two columns (in the middle of the viewport; I left my two big sketches full-page)
But you can tell how very silly I've become - yet ecstatic - if you have a look at
<!-- m --><a class="postlink" href="http://www.coherentdog.org/">http://www.coherentdog.org/</a><!-- m -->
and there's a link to layout.htm from there. Thanks also for your help with finding CSS on sites; I got stuck in Firefox yesterday - how do you stop it, once you start it? Maybe I should read the docs? I don't think I can read anything now; too tired. Fang solved a problem for me that I'd been sweating and sweating over, and BonRouge's analysis triggered something that ended up working. Triumph and Ray 326 were in on my earlier stuff, and MstrBob (where is he? working on the web standards stuff?) and toicontien were earlier helpers, and so was Dave SW. Maybe I missed somebody; I think so! My apologies.
No more bottomless pits! For the moment, anyway. I haven't opened my site yet, and won't, still, till I get at least most of the pages converted, and get some decent content in there. Yet - people are visiting (dog-people, you understand), and they are really liking it, which gives me a great sense of pleasue, but reminds me I MUST get some of my other projects going - some interactive stuff - small shared conversations. Comments, that sort of stuff. I foresee more disorientation for me, but - that's par for the course. This post is really my very great thanks to all of you, not only for your help to me directly, but also, to all you asking questions, and you answering, because that's how I'm learning.
Mon, 28 Feb 2005 17:48:37
I was considering the effect of widths. At one stage last night, working with changing from full-page to two-column layut in the central area of the viewport, I had the two coumns all right. I wasn't checking with IE at this stage, though (I kept the files, and could go back and look).
To my pleasure, I discovered that using a width specification inside a column (div) allows you to specify 90%, and quite apparently, that's now (inside the div) 90% of the column width, not of the full-page width. Please somebody tell me if I'm wrong about that.
I have a very sneaking suspicion, though, that my code has some incompatibilities in the CSS width specifications. Maybe Opera, Firefox and Netscape all go into Quirks mode (see? I'm learning more words) to deal with my incompatibilities. I try to calculate, and even use a calculator, and I understand that browsers may round percentages a bit diffrently, too. It's quite possible I miscalculated something, and perhaps, with boxes ("box model") defined in my CSS, and IE not handling that like the other browsers, IE goes beyond Quirks mode into outer space, or something like that.
So I plan to go over the CSS (and HTML) carefully and check my width specifications, in case IE is having trouble with those. Won't have time till late today, or more likely tomorrow, to do that. But if I can, I'll post the new page that Fang fixed for me in a single post (see the thread on the floating dog-logo, IE ouch). Maybe I can get the page with Fang's solution up today; if not, then tomorrow.
So, am I right about widths, do you think? You could check it now, because I have the pre-Fang-solution page up here:
<!-- m --><a class="postlink" href="http://www.coherentdog.org/index7007.htm">http://www.coherentdog.org/index7007.htm</a><!-- m -->
Explanations are at:
<!-- m --><a class="postlink" href="http://www.coherentdog.org/layout.htm">http://www.coherentdog.org/layout.htm</a><!-- m -->
The CSS file (for the IE Bottomless Pit file) is called codog7007.css, and it's in the same directory as the page. Well, you people know how to find it, I expect. I still don't, not without logging into my ISP and using their file-manager.
Thu, 24 Feb 2005 11:21:46Hi Carol,
I'm not sure what you mean about columns falling down the well, but if you mean that you can't get two columns to work, here's a simple way to do it :
css
#container {
position:relative;
}
#right {
width:49%;
float:right;
}
#left {
margin-right:49%;
}
html
<div id="container">
<div id="right">
This is on the right
</div>
<div id="left">
This is on the left
</div>
</div>
If you add borders to those divs, you'll see how it works.
I think I understand your question about widths... Here, the container has/is (?) 'position:relative', so elements inside that will be relative to it. That means that, as you said, if the container is 300px wide and you make a child of that 50% wide, it will be 150px and stay inside the parent. I use width:49% here rather than 50% to prevent them overlapping as browsers round up or down differently.
One problem you may have with what I've posted here is if you want to use different backgrounds for those columns. The best I can suggest with completely fluid columns is to make the floated column into a box rather than a complete column. If one of the columns has a fixed width it becomes a lot easier - you can use a background image in the container. Another way is if you know the height of the container - if it's a fixed height. Then you can set the floated div to be the same height and give it a background.
But...I think you weren't worrying about different backgrounds with your dog, so no worries, I guess.
To find your css file (or anyone else's), there are a couple of things you can do. The easiest way (I think) is to have the WebDev toolbar installed in Firefox. With this, you can go to where it says 'css' and choose 'view css'. Otherwise, you can look at the source code of someone's page easily with any browser and find the location of the css file from the head. For example, the address of one of your pages is "http://www.coherentdog.org/index7007.htm". If I go there and view the source, I can see this: <link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"codog7007.css" type="text/css"> in your head.
If I substitute 'index7007.htm' for 'codog7007.css', I can see your css file. Have a look here : <!-- m --><a class="postlink" href="http://www.coherentdog.org/codog7007.css">http://www.coherentdog.org/codog7007.css</a><!-- m -->.
I hope this helps.
Good luck with everything.Dear BonRouge,
Your reply is so very rich that I'll be working with it for some time. You have explained many things that I can come close to visualizing, because I've been looking around at numbers of sites, yours included, and View-ing Source, often enough. Thanks for the tips on picking up the CSS file, if it's available! (Isn't always; I plan to keep mine available, partly because they're no great shakes, and I don't have secrets - I'm not a web-designer (hehe)
And thanks for your wonderful analyis and teachings! Are you a teacher? If so, you're surely a very effective one.
I do think I can use your suggestions for any two-column page layouts, because probably, I could keep the leftmost column fixed in width. Not sure yet, but I'll play with it. Your post is just full of stuff I can both study and really learn from.
When I first came here, less than three months ago, I found it hard to read and understand any post, including replies to my questions (which I had trouble asking, because to ask questions, you have to know enough to be able to ask them!)
But my experince in taking on new endeavors is that it takes about four months (for me, at least, and I think it's common for others, too) to become oriented somewhat, and that can happen if you keep working away at things, and also, keep reading, even if you don't nnderstand very well. Well, BonRouge, you and others here are proving me right by the excellence of your posts and teachings! So, the fool who rushes in where angels fear to tread, and squeaks, gets the grease (deadpan).
Thanks!
Thu, 24 Feb 2005 20:48:18I forgot to say, about falling down the well, that in IE (but not Opera, Firefox nor Netscape), column two in my current version (index7008.htm - not posted) - appears below, not beside, column one. So I have, in effect, all one column, though their background colors are different. It makes a long page! And a bit blank-looking on the right (hehe)
Haven't posted index7008.htm; that's the one I fixed with Fang's tip about putting the animal-logo INSIDE the headings div. It worked instantly, of course. I'll probably post it on my site, to show how one tip from one person can fix a nagging difficulty.
Probably some of my friends would really like to make themselves web sites, and though none of us is likely to become a web-designer professionally, I see no reason we shouldn't enjoy making our own fairly simple (I hope not -minded) sites (deadpan again - but with great thanks to everyone here).
Thu, 24 Feb 2005 21:04:53Originally posted by CarolW
And thanks for your wonderful analyis and teachings! Are you a teacher? If so, you're surely a very effective one.
Hi Carol,
Actually, I'm an English teacher.
Good guess.I'm glad you found the information useful.
Good luck.Well, I half did it. My head is still spinning, and I'm getting really silly, but still having fun. I have a two-column layout that seems to be working as intended (astounding!). Put up my first page that way the other night in the wee hours, and then adapted a couple more pages. My page requesting help with layout is one of them, and it's become a tangled mess in the content, soaking up this and that event, and - thanking some of you people here. All the same, I forced it into two columns (in the middle of the viewport; I left my two big sketches full-page)
But you can tell how very silly I've become - yet ecstatic - if you have a look at
<!-- m --><a class="postlink" href="http://www.coherentdog.org/">http://www.coherentdog.org/</a><!-- m -->
and there's a link to layout.htm from there. Thanks also for your help with finding CSS on sites; I got stuck in Firefox yesterday - how do you stop it, once you start it? Maybe I should read the docs? I don't think I can read anything now; too tired. Fang solved a problem for me that I'd been sweating and sweating over, and BonRouge's analysis triggered something that ended up working. Triumph and Ray 326 were in on my earlier stuff, and MstrBob (where is he? working on the web standards stuff?) and toicontien were earlier helpers, and so was Dave SW. Maybe I missed somebody; I think so! My apologies.
No more bottomless pits! For the moment, anyway. I haven't opened my site yet, and won't, still, till I get at least most of the pages converted, and get some decent content in there. Yet - people are visiting (dog-people, you understand), and they are really liking it, which gives me a great sense of pleasue, but reminds me I MUST get some of my other projects going - some interactive stuff - small shared conversations. Comments, that sort of stuff. I foresee more disorientation for me, but - that's par for the course. This post is really my very great thanks to all of you, not only for your help to me directly, but also, to all you asking questions, and you answering, because that's how I'm learning.
Mon, 28 Feb 2005 17:48:37