I have a sort of dog-logo image I float right (if I can) on all my main pages. I'm in the process of changing from HTML 4.01 Transitional to Strict, and have the hang of that now, whew!
But then also, I'm changing the layout of some pages; some will remain full-page, but some will have banner, horizontal nav, and then main page headings, all full-page-sidth (excluing background image, a .gif strip 20px wide, at the left, repeat-y only) - followed by a two-column structure for content. At the bottom of the page, I have another full-page-width area, to accommodate a decorative image, followed by the full-page-width copyright notice.
A sketch for that layout is visible on my site, at
<!-- m --><a class="postlink" href="http://www.coherentdog.org/layout.htm">http://www.coherentdog.org/layout.htm</a><!-- m -->
It's the right-hand sketch; my other ideas are in the left-hand-sketch, but for now, I've abandoned those ideas.
I'm re-doing all my CSS, of course, to accommodate the new tw0-column structure in the middle of the page.
Finally, with lots of help from Fang, I have what looks like a workable CSS for my two-column structure. I've colored various page-areas differently from how I intend them to appear, just to see the structures for myself, before I change background-colors back to how I want them. (None of this is on my site; I find it too complex to try to publish it.)
I have a remaining problem that shouldn't surprise anybody! Must be very common!
That is, in Opera and Firefox, my dog-logo in the full-page headings area, floats right just fine. But in IE, I guess, predictably, it appears above the headings area, all by itself. ARGH! Must have something to do with the box model? Or maybe a problem with right-float?
Here's my code (partly; a mock-up of it).
CSS code:
#pagetop {
margin: 0;
display: block;
margin-bottom: 10px;
}
#masthead {
width: 96%;
margin-left: 20px;
border: 0;
}
#hedsmanymany {
height: 400px;
width: 96%;
background-color: #0c6;
margin-left: 20px;
margin-bottom: 10px;
z-index: 1;
}
HTML code, editing out details, just to show the structure
<body>
<div id="pagetop">
<div id="masthead">[banner]</div>
<div id="nav">[horizontal nav]</div>
<div id="animlogo"><img alt="Kwali.." src=http://www.webdeveloper.com/forum/archive/index.php/..</div>
<div id="hedsmanymany">
<h1>Dogs are Coherent</h1>
<h2>[and so forth]</h2>
<h3>[and so forth]</h3>
<p>This entire site [and so forth; a few paragraphs]</p>
</div>
</div>
[and so forth]
</body>
I've never tried attaching a file here before, but I'm going to try now,to show first how Opera and Firefox show the logo, and then how IE shows it.
Can somebody help me fix the code, or point me to where I can learn? THANKS!
Wed, 23 Feb 2005 17:14:53Hi Carol,
It would be easier to try to help if you posted a link to the pages you're referring to. Do you think you could do that? You don't need to actually put them on your site - just put them on your server with names like test1.htm and test2.htm - things like that. You say that you float your picture right, but that's not apparent in the code that you've posted.
(Thanks for the nice comment you left on my site by the way).
Hi BonRouge; good to hear from you!
Originally posted by BonRouge
Hi Carol,
It would be easier to try to help if you posted a link to the pages you're referring to. Do you think you could do that? You don't need to actually put them on your site - just put them on your server with names like test1.htm and test2.htm - things like that. You say that your float your picture right, but that's not apparent in the code that you've posted.
(Thanks for the nice comment you left on my site by the way).
I've bookmarked your site, and will be visiting, quite a lot, when I get to the next stage in my workings (playings, rather). Gotta study your gallery method; it looks wonderful! I had a look at your three-column stuff, too, and may study it again later. For now, I'm using Russ Weakley's tutorials on the MaxDesign site (sorry I don't have the URL right handy for that, though it's on my layout page).
Had a great success today (oops; yesterday); finally beginning to catch on to the horizontal nav stuff that MstrBob kindly led me into; I used his code, but have now substituted Russ Weakley's tutorial code for it, and then altered that slightly, copying MstrBob in parts, and that part seems to be working fine!
How silly of me not to have noticed I didn't post the float part of the CSS! Here it is:
#animlogo {
float: right;
border: thin solid black;
margin: 2px 20px 2px 5px;
padding: 1px;
z-index: 2;
}
But now, you can also get it from my site. I was aware that people post test stuff on their servers without publishing on their sites, but mostly, I decided to post right on my site, because I have lots of friends who might like to make themselves web pages, and I'd like to encourage them not to be afraid to try, and not to be afraid to make mistakes, either!
Apparently people are enjoying this; anyway, they are enjoying the site, though these are mostly dog-people. Most likely one in ten-thousand would actually dare to try, but you never know! I have so much work to do on content, and when I get the structure reasonably as I like it, I'll try to fill out the content part, including some pointers for people who start as I did, knowing absolutely nothing - and including links to these forums, and a number of other places. But these forums lead to all kinds of wonderful places! So I don't have to provide too many links, haha!
Well, now I do have the whole thing up on my site, though I should have edited the title on the bad-columns page, and I'll do that first thing - after I've had some sleep and done my chores.
Must fall into bed; can hardly type! Thanks!
Thu, 24 Feb 2005 02:31:43Place #animlogo in #hedsmanymany
<div id="hedsmanymany">
<div id="animlogo"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"doggy.gif">..</div>
....Dear Fang,
Originally posted by Fang
Place #animlogo in #hedsmanymany
<div id="hedsmanymany">
<div id="animlogo"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"doggy.gif">..</div>
....
WOW! Bow, wow! It's Fang to the rescue again!
I'm off to try it!
Nested IDs! well, divs. Whatever!
I'll report back! Again, fifty-million thanks!
Thu, 24 Feb 2005 10:46:38Originally posted by Fang
Place #animlogo in #hedsmanymany
<div id="hedsmanymany">
<div id="animlogo"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"doggy.gif">..</div>
....
Update: It worked perfectly! Of course! Makes sense to me, too!
Now a new thread concerning the same basic layout (but this time, without the IE shove-the-animlogo-around problem (big grin)
See "Bottomless Pit Revisited" (yet to be written)
Thu, 24 Feb 2005 11:04:22
But then also, I'm changing the layout of some pages; some will remain full-page, but some will have banner, horizontal nav, and then main page headings, all full-page-sidth (excluing background image, a .gif strip 20px wide, at the left, repeat-y only) - followed by a two-column structure for content. At the bottom of the page, I have another full-page-width area, to accommodate a decorative image, followed by the full-page-width copyright notice.
A sketch for that layout is visible on my site, at
<!-- m --><a class="postlink" href="http://www.coherentdog.org/layout.htm">http://www.coherentdog.org/layout.htm</a><!-- m -->
It's the right-hand sketch; my other ideas are in the left-hand-sketch, but for now, I've abandoned those ideas.
I'm re-doing all my CSS, of course, to accommodate the new tw0-column structure in the middle of the page.
Finally, with lots of help from Fang, I have what looks like a workable CSS for my two-column structure. I've colored various page-areas differently from how I intend them to appear, just to see the structures for myself, before I change background-colors back to how I want them. (None of this is on my site; I find it too complex to try to publish it.)
I have a remaining problem that shouldn't surprise anybody! Must be very common!
That is, in Opera and Firefox, my dog-logo in the full-page headings area, floats right just fine. But in IE, I guess, predictably, it appears above the headings area, all by itself. ARGH! Must have something to do with the box model? Or maybe a problem with right-float?
Here's my code (partly; a mock-up of it).
CSS code:
#pagetop {
margin: 0;
display: block;
margin-bottom: 10px;
}
#masthead {
width: 96%;
margin-left: 20px;
border: 0;
}
#hedsmanymany {
height: 400px;
width: 96%;
background-color: #0c6;
margin-left: 20px;
margin-bottom: 10px;
z-index: 1;
}
HTML code, editing out details, just to show the structure
<body>
<div id="pagetop">
<div id="masthead">[banner]</div>
<div id="nav">[horizontal nav]</div>
<div id="animlogo"><img alt="Kwali.." src=http://www.webdeveloper.com/forum/archive/index.php/..</div>
<div id="hedsmanymany">
<h1>Dogs are Coherent</h1>
<h2>[and so forth]</h2>
<h3>[and so forth]</h3>
<p>This entire site [and so forth; a few paragraphs]</p>
</div>
</div>
[and so forth]
</body>
I've never tried attaching a file here before, but I'm going to try now,to show first how Opera and Firefox show the logo, and then how IE shows it.
Can somebody help me fix the code, or point me to where I can learn? THANKS!
Wed, 23 Feb 2005 17:14:53Hi Carol,
It would be easier to try to help if you posted a link to the pages you're referring to. Do you think you could do that? You don't need to actually put them on your site - just put them on your server with names like test1.htm and test2.htm - things like that. You say that you float your picture right, but that's not apparent in the code that you've posted.
(Thanks for the nice comment you left on my site by the way).
Hi BonRouge; good to hear from you!Originally posted by BonRouge
Hi Carol,
It would be easier to try to help if you posted a link to the pages you're referring to. Do you think you could do that? You don't need to actually put them on your site - just put them on your server with names like test1.htm and test2.htm - things like that. You say that your float your picture right, but that's not apparent in the code that you've posted.
(Thanks for the nice comment you left on my site by the way).
I've bookmarked your site, and will be visiting, quite a lot, when I get to the next stage in my workings (playings, rather). Gotta study your gallery method; it looks wonderful! I had a look at your three-column stuff, too, and may study it again later. For now, I'm using Russ Weakley's tutorials on the MaxDesign site (sorry I don't have the URL right handy for that, though it's on my layout page).
Had a great success today (oops; yesterday); finally beginning to catch on to the horizontal nav stuff that MstrBob kindly led me into; I used his code, but have now substituted Russ Weakley's tutorial code for it, and then altered that slightly, copying MstrBob in parts, and that part seems to be working fine!
How silly of me not to have noticed I didn't post the float part of the CSS! Here it is:
#animlogo {
float: right;
border: thin solid black;
margin: 2px 20px 2px 5px;
padding: 1px;
z-index: 2;
}
But now, you can also get it from my site. I was aware that people post test stuff on their servers without publishing on their sites, but mostly, I decided to post right on my site, because I have lots of friends who might like to make themselves web pages, and I'd like to encourage them not to be afraid to try, and not to be afraid to make mistakes, either!
Apparently people are enjoying this; anyway, they are enjoying the site, though these are mostly dog-people. Most likely one in ten-thousand would actually dare to try, but you never know! I have so much work to do on content, and when I get the structure reasonably as I like it, I'll try to fill out the content part, including some pointers for people who start as I did, knowing absolutely nothing - and including links to these forums, and a number of other places. But these forums lead to all kinds of wonderful places! So I don't have to provide too many links, haha!
Well, now I do have the whole thing up on my site, though I should have edited the title on the bad-columns page, and I'll do that first thing - after I've had some sleep and done my chores.
Must fall into bed; can hardly type! Thanks!
Thu, 24 Feb 2005 02:31:43Place #animlogo in #hedsmanymany
<div id="hedsmanymany">
<div id="animlogo"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"doggy.gif">..</div>
....Dear Fang,
Originally posted by Fang
Place #animlogo in #hedsmanymany
<div id="hedsmanymany">
<div id="animlogo"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"doggy.gif">..</div>
....
WOW! Bow, wow! It's Fang to the rescue again!
I'm off to try it!
Nested IDs! well, divs. Whatever!
I'll report back! Again, fifty-million thanks!
Thu, 24 Feb 2005 10:46:38Originally posted by Fang
Place #animlogo in #hedsmanymany
<div id="hedsmanymany">
<div id="animlogo"><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"doggy.gif">..</div>
....
Update: It worked perfectly! Of course! Makes sense to me, too!
Now a new thread concerning the same basic layout (but this time, without the IE shove-the-animlogo-around problem (big grin)
See "Bottomless Pit Revisited" (yet to be written)
Thu, 24 Feb 2005 11:04:22