Ok, here's what's going on... I've been trying to learn CSS and was playing around creating side-by-side boxes last night. I created divs in the body and gave them styles right there in the same tag. Once I made three boxes I felt I finally understood what I was doing. Ha... 
I went back and put the same styles in the header for each div. In the body, I changed the div tags to read <div class="name">. But when I did this, the boxes no longer showed up. Only the text they contained! Why would that happen if it's the EXACT same styles?
Here's the original code:
<div style="float: left; border: 3px solid #C0C0C0; border-style: ridge; margin-top: 10px; margin-right:10px; margin-bottom:10px; margin-left:5px; padding: 5px; background-color: #C0C0C0; width: 710px;">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div style="float: right; border: 3px solid #C0C0C0; border-style: ridge; margin-top: 10px; margin-right:10px; margin-bottom:10px; margin-left:0; padding: 5px; background-color: #C0C0C0; width: 150px;">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div style="float: right; border: 3px solid #C0C0C0; border-style: ridge; margin-top: 5px; margin-right:10px; margin-bottom:10px; margin-left:0; padding: 5px; background-color: #C0C0C0; width: 150px;">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
And here's the code after I changed it:
<head>
<style type="text/css">
.leftbox
{
style="float: left;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 10px;
margin-right:10px;
margin-bottom:10px;
margin-left:5px;
padding: 5px;
background-color: #C0C0C0;
width: 710px;
}
.righttopbox
{
float: right;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 10px;
margin-right:10px;
margin-bottom:10px;
margin-left:0;
padding: 5px;
background-color: #C0C0C0;
width: 150px;
}
.rightbottombox
{
float: right;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 5px;
margin-right:10px;
margin-bottom:10px;
margin-left:0;
padding: 5px;
background-color: #C0C0C0;
width: 150px;
}
</style>
</head>
<body>
<div class="leftbox">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div class="righttopbox">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div class="rightbottombox">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
Is there something I've missed? Will someone help me out with this? I'm sure it's something I've overlooked since I'm still learning. Thanks so much if you can teach me a little by telling what's wrong here.Yeah, I know it's stupid to reply to yourself, but here are links I left out. It's the full page so you can see for yourself what I mean.
Good (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->)
Bad (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage2.html">http://members.cox.net/williamsray/testpage2.html</a><!-- m -->).leftbox
{
style="float: left;While this won't affect the appearence of your boxes, why don't you close all of your <p> tags? Get into some good habits and you'll probably make less mistakes and save some time in future.
Looks like you have a good starting point for a three column layout there, (if you specify a fluid width for at least one of the columns).
Thanks, Ray. I looked over that so many times and never even noticed that. I really appreciate it. Now I see why it wouldn't work!
And lavalamp, I didn't know you had to. I thought you only put a <p> when you wanted to start a new paragraph. I'll be sure to close my <p> tags from now on.I don't think that you do have to close them in HTML 4.01 Transitional but like I say, good habits and all that.
In XHTML you have to close all tags, including <img />, <br /> and <meta />!Thanks, Ray. I looked over that so many times and never even noticed that. I really appreciate it. Now I see why it wouldn't work!
That's why Paired Programming works so well.Primal,
You have a "cut-n-paste" typo which is messing up your code. Rid yourself of this in your code example: style="
it should be like this:
.leftbox {
float: left;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 10px;
margin-right:10px;
margin-bottom:10px;
margin-left:5px;
padding: 5px;
background-color: #C0C0C0;
width: 710px;
}
and, you can consolidate the code by doing this:
.leftbox {
float: left;
border: 3px ridge #C0C0C0;
margin: 10px 10px 10px 5px;
padding: 5px;
background-color: #C0C0C0;
width: 710px;
}
if you use CSS you will want to memorize this order top, right, bottom, left (think of a clock starting at midnight
The same applies to padding, border and, of course, margins.
or get real fancy and do this:
<style type="text/css">
<!-- //
.left {
float: left;
margin-top: 10px 10px 10px 5px;
width: 710px;
}
.top {
float: right;
margin: 10px 10px 10px 0px;
width: 150px;
}
.bottom {
float: right;
margin-top: 5px 10px 10px 0px;
width: 150px;
}
.box {
border: 3px ridge #C0C0C0;
padding: 5px;
background-color: #C0C0C0;
}
-->
</style>
<div class="left box">..</div>
<div class="top box">..</div>
<div class="bottom box">..</div>
cheersYou got your comments mixed up.Originally posted by Norsk
<style type="text/css">
<!-- //
-->
</style>For HTML the comments should just be:<style type="text/css"><!--
--></style>And for XHTML:<style type="text/css">/*<![CDATA[*/
/*]]>*/</style>I say that the comments "should" be this and that, technically you shouldn't need them at all because browsers are supposed to just ignore the tags they don't know, but some old naughty browsers don't.
I went back and put the same styles in the header for each div. In the body, I changed the div tags to read <div class="name">. But when I did this, the boxes no longer showed up. Only the text they contained! Why would that happen if it's the EXACT same styles?
Here's the original code:
<div style="float: left; border: 3px solid #C0C0C0; border-style: ridge; margin-top: 10px; margin-right:10px; margin-bottom:10px; margin-left:5px; padding: 5px; background-color: #C0C0C0; width: 710px;">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div style="float: right; border: 3px solid #C0C0C0; border-style: ridge; margin-top: 10px; margin-right:10px; margin-bottom:10px; margin-left:0; padding: 5px; background-color: #C0C0C0; width: 150px;">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div style="float: right; border: 3px solid #C0C0C0; border-style: ridge; margin-top: 5px; margin-right:10px; margin-bottom:10px; margin-left:0; padding: 5px; background-color: #C0C0C0; width: 150px;">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
And here's the code after I changed it:
<head>
<style type="text/css">
.leftbox
{
style="float: left;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 10px;
margin-right:10px;
margin-bottom:10px;
margin-left:5px;
padding: 5px;
background-color: #C0C0C0;
width: 710px;
}
.righttopbox
{
float: right;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 10px;
margin-right:10px;
margin-bottom:10px;
margin-left:0;
padding: 5px;
background-color: #C0C0C0;
width: 150px;
}
.rightbottombox
{
float: right;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 5px;
margin-right:10px;
margin-bottom:10px;
margin-left:0;
padding: 5px;
background-color: #C0C0C0;
width: 150px;
}
</style>
</head>
<body>
<div class="leftbox">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div class="righttopbox">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
<div class="rightbottombox">This is where some text goes!<p>This is where some text goes!<p>This is where some text goes!</div>
Is there something I've missed? Will someone help me out with this? I'm sure it's something I've overlooked since I'm still learning. Thanks so much if you can teach me a little by telling what's wrong here.Yeah, I know it's stupid to reply to yourself, but here are links I left out. It's the full page so you can see for yourself what I mean.
Good (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage.html">http://members.cox.net/williamsray/testpage.html</a><!-- m -->)
Bad (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/testpage2.html">http://members.cox.net/williamsray/testpage2.html</a><!-- m -->).leftbox
{
style="float: left;While this won't affect the appearence of your boxes, why don't you close all of your <p> tags? Get into some good habits and you'll probably make less mistakes and save some time in future.
Looks like you have a good starting point for a three column layout there, (if you specify a fluid width for at least one of the columns).
Thanks, Ray. I looked over that so many times and never even noticed that. I really appreciate it. Now I see why it wouldn't work!And lavalamp, I didn't know you had to. I thought you only put a <p> when you wanted to start a new paragraph. I'll be sure to close my <p> tags from now on.I don't think that you do have to close them in HTML 4.01 Transitional but like I say, good habits and all that.
In XHTML you have to close all tags, including <img />, <br /> and <meta />!Thanks, Ray. I looked over that so many times and never even noticed that. I really appreciate it. Now I see why it wouldn't work!
That's why Paired Programming works so well.Primal,
You have a "cut-n-paste" typo which is messing up your code. Rid yourself of this in your code example: style="
it should be like this:
.leftbox {
float: left;
border: 3px solid #C0C0C0;
border-style: ridge;
margin-top: 10px;
margin-right:10px;
margin-bottom:10px;
margin-left:5px;
padding: 5px;
background-color: #C0C0C0;
width: 710px;
}
and, you can consolidate the code by doing this:
.leftbox {
float: left;
border: 3px ridge #C0C0C0;
margin: 10px 10px 10px 5px;
padding: 5px;
background-color: #C0C0C0;
width: 710px;
}
if you use CSS you will want to memorize this order top, right, bottom, left (think of a clock starting at midnight
The same applies to padding, border and, of course, margins.or get real fancy and do this:
<style type="text/css">
<!-- //
.left {
float: left;
margin-top: 10px 10px 10px 5px;
width: 710px;
}
.top {
float: right;
margin: 10px 10px 10px 0px;
width: 150px;
}
.bottom {
float: right;
margin-top: 5px 10px 10px 0px;
width: 150px;
}
.box {
border: 3px ridge #C0C0C0;
padding: 5px;
background-color: #C0C0C0;
}
-->
</style>
<div class="left box">..</div>
<div class="top box">..</div>
<div class="bottom box">..</div>
cheersYou got your comments mixed up.Originally posted by Norsk
<style type="text/css">
<!-- //
-->
</style>For HTML the comments should just be:<style type="text/css"><!--
--></style>And for XHTML:<style type="text/css">/*<![CDATA[*/
/*]]>*/</style>I say that the comments "should" be this and that, technically you shouldn't need them at all because browsers are supposed to just ignore the tags they don't know, but some old naughty browsers don't.