Re: Help with CSS Page Layout

Wow! Thank you so much. I'm going to print this out and go over it carefully. Obviously I don't have a life since I'm obsessed with this on New Years!

Thanks again.

Hello,

I saw you changed it since I looked at it.
I thought this might help. I just copied your code and changed it a bit.
You can see the result here:

http://tnsgraphics.com/test.htm

The trick is putting the maincontent, rightsidebar and leftbox in a container.
Don't float the maincontent or leftbox, just the right sidebar.
Remove the width of the maincontent and give the right sidebar a left margin
so the text doesn't but up right against it.

Now, when the browser window is smaller, the maincontent just keeps getting
thinner, because it has no width assigned. Just check out the code on the page
I linked, it should help.

You might notice some other things as well, such as no need to repeat font
styles in all tags if it's already defined in the body. That's the beauty of
Cascading Styles :-)
Also, rather than assigning a class to every <p> tag in a container, you can
just use CSS to say "apply this to all <p> tags in container "rightsidebar" ,
like this:

.rightsidebar p {
margin: 2px 10px;
font-size: large;
}


Take care,
Tim

One last important thing..

For headers like "Friendship, fun and golfing opportunities for women of all
skill levels", that's the perfect opportunity to use an H1 tag instead of a
<span>.
It even helps with search engine rankings, specially if there's a keyword or
two in it that match a word or two in your title.

Take care,
Tim

Hi, Tim...

You have been very kind to help me learn CSS! I very much appreciate it and
am really delighted to have gained a better understanding of this. I studied
all your suggestions and started the page from scratch. Take a look here:
http://www.allisonwebcreations.com/e.../indexgood.htm I'm very
pleased with it. I discovered a couple of things:

I didn't realize that
margin-top: 0px;
margin-right: auto;

is not the same as margin: 0px auto;

are they two different codes? Anyway, it didn't center until I fixed that.

I understand what you're saying about the font codes being redundant, however
I found that they all took on the font of the maincontent and I had to fix them
individually. This must be an error in how I'm coding it. Is the order in
which I did them to blame? I put it in the order that I'm reading it, but
perhaps I should do it differently.

I also couldn't get the footer to move left to the margin. I'm not sure why,
since I think I followed all your suggestions.

I put my bold sentence (Friendship, Fun, etc.) in h1, but I had to change the
color & size, so that added another style element. I'm afraid that probably
isn't correct. I also couldn't have my normal content text follow immediately
on the same line. Maybe that isn't possible.

I don't quite understand the .rightsidebar p { and container p{
I am assigning the spacing to the <p> tag? What exactly is that doing?

I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div class="footer"> ?

Do you use the <div class="container"> technique all the time? How do you
decide what goes in it -- just floating items or can I think of it as a table
that holds all my main blocks of info? Why not include the footer in it?

If you'll indulge me one more question, I wonder if it's possible to put a
graphic (say, of a putting green) underneath my rightsidebar? I would want the
sidebar to lay on top of the putting green for an interesting artistic touch.

Thank you, thank you, thank you again. Here are my css codes (which I have in
an external file. Is it better to import or link to the file?)

Have a wonderful New Year.






.body {
padding: 0px;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.masthead {
width: 780px;
margin: 0px auto;
padding-top: 10px;
padding-right: 0px;
}
.maincontent {
background-color: #FFFFFF;
text-align: left;
width: 60%;
margin-top: 0px;
padding-top: 10px;
padding-right: 0px;
font-family: "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
}
.maincontent p{
margin-top: 2px;
margin-right: 10px;

}
.rightsidebar {
font-size: small;
background-color: #DEEBE4;
text-align: center;
float: right;
width: 250px;
margin-top: 10px;
margin-left: 20px;
border: thick solid #941238;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;

}
.leftbox {
font-size: small;
font-style: italic;
color: #336600;
background-color: #DEEBE4;
text-align: center;
clear: both;
width: 300px;
margin-top: 50px;
border: thin solid #941238;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
}
.footer {
font-size: small;
margin: 100px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-style: normal;
}
.container {
width: 90%;
margin: 0px auto;
}
.clear {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}
.event {
font-size: 24px;
font-weight: bold;
color: #00493E;
}
.upcomingdate {
font-size: 20px;
color: #990134;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

.eventitem {
font-size: 18px;
color: #000000;
font-weight: bold;
margin: 0px;
}
.eventlink {
font-size: 14px;
font-style: italic;
margin: 0px;
}
.smallboxhead {
font-size: large;
color: #00493E;
font-style: normal;
font-weight: bold;
}
.companyname {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-style: italic;
color: 990134;
}

One other quick question... I'm experimenting with various "ready-made" drop
down menus that work as Dreamweaver extensions. Is this a good idea? Do you
know of any that are particularly good? I've been playing with the trial
version from Softery but if I'm going to buy one, I'd like to be sure it's a
good one.

Jane, can you email me at briantoz (AT) ihug (DOT) co.nz if you have voicing facilities on Skype or Messenger Live.

On Tue, 1 Jan 2008 18:11:49 +0000 (UTC), "janeinpa"
<webforumsuser (AT) macromedia (DOT) com> wrote:

One other quick question... I'm experimenting with various "ready-made" drop
down menus that work as Dreamweaver extensions. Is this a good idea? Do you
know of any that are particularly good? I've been playing with the trial
version from Softery but if I'm going to buy one, I'd like to be sure it's a
good one.

Flash menus? Ick.

You can't go wrong with any of the menu offerings from PVII:

www.projectseven.com

Win
--
Win Day, Wild Rose Websites
http://www.wildrosewebsites.com
winday (AT) NOSPAMwildrosewebsites (DOT) com
Skype winifredday

Hi Jane,

I'll try to answer all your questions, then a tip or two to stop the main
content from dropping when the browser window size is reduced.

- " I didn't realize that
margin-top: 0px;
margin-right: auto;
is not the same as margin: 0px auto;

That's right.
margin: 0px auto; is actaully saying make the top margin 0, the right margin
auto, the bottom margin 0 and the left margin auto.
It's just CSS shorthand.
For example, you might have:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left:15px;

You could just use margin: {10px 20px 5px 15px;}
Think of a clock to remember the directions.
12:00 top, 3:00 right, 6:00 bottom, 9:00 left.
If any of the values are the same, you can shorten it more.
For example, if top is 10, right is 20, bottom is 5 and left is 20, it's
margin: {10px 20px 5px;}
If the 4th location (left) is missing a value, it makes it the same as what
you have for right.
If top and bottom are 10px, and left and right are 20px, it's:
margin {10px 20px;}
If the last two positions ( bottom and left vlaues ) are missing, then it
will use the top value for the bottom, and the right value for the left.

What auto right and left is doing is subtracting your content width (the
container width) from the browser window width, and then dividing the
remainder in 2 and applying each value to each side of the container.

-"I found that they all took on the font of the maincontent and I had to fix
them
individually. "
The only text that should be Time is the text in your main content, where
you have that font defined. Everything else should be Arial if you define
the body as such. I'll post a link at the end of this.


- "I put my bold sentence (Friendship, Fun, etc.) in h1, but I had to change
the
color & size, so that added another style element. "
You don't need to give the h1 a class. You can actually just style the h1
tag:
h1 {
margin: 10px 10px 2px;
font-size: larger;
color: #941238;
}
You can only use h1 once on a page.
You can use h2, h3, h4, etc, as many times as you would like, and you can
style these just like the h1 style above.

- "I don't quite understand the .rightsidebar p { and container p{
I am assigning the spacing to the <p> tag? What exactly is that doing?"

That is saying, give all the <p> tags inside the rightsidebar container the
follwing style.
So, in this example:
..rightsidebar p {
font-size: 18px;
margin: 2px 10px;
}
it's saying give all the <p> tags in this container a size of 18 and margin
of 2px top and bottom, and 10px left and right.
It's a lot easier than giving a class to every <p> tag :-)

- "I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div class="footer">"

You could, if the footer was in the container. It just needs to be the final
element before the close of a container that contains the float(s).

-Do you use the <div class="container"> technique all the time?

Yes, most of the time. I usually put everything in it, and use the
margin:0px auto; to center it.
That way, I don't have to try to get a number of different elements to align
with the right and left sides by applying values to all of them, which can
get tricky quickly.

-"If you'll indulge me one more question, I wonder if it's possible to put a
graphic (say, of a putting green) underneath my rightsidebar? I would want
the sidebar to lay on top of the putting green for an interesting artistic
touch.

Yes, you can give that div a background image. You just need to make the div
the same size as the image so you see it all (or vice-versa).


Now, to make that maincontent not drop like it does you can remove the width
in the CSS. Now it will expand over to the left edge of the rightsidebar.
You can control how close it gets by giving the right sidebar a bigger left
margin. The point is, with no width assigned, the maincontent will shrink
down to the longest word in it before it drops.

Here's what it looks like:
http://tnsgraphics.com/test2.htm

Let me know if you have any questions.

Take care,
Tim





"janeinpa" <webforumsuser (AT) macromedia (DOT) com> wrote

Hi, Tim...

You have been very kind to help me learn CSS! I very much appreciate it
and
am really delighted to have gained a better understanding of this. I
studied
all your suggestions and started the page from scratch. Take a look here:
http://www.allisonwebcreations.com/e.../indexgood.htm I'm
very
pleased with it. I discovered a couple of things:

I didn't realize that
margin-top: 0px;
margin-right: auto;

is not the same as margin: 0px auto;

are they two different codes? Anyway, it didn't center until I fixed
that.

I understand what you're saying about the font codes being redundant,
however
I found that they all took on the font of the maincontent and I had to fix
them
individually. This must be an error in how I'm coding it. Is the order
in
which I did them to blame? I put it in the order that I'm reading it, but
perhaps I should do it differently.

I also couldn't get the footer to move left to the margin. I'm not sure
why,
since I think I followed all your suggestions.

I put my bold sentence (Friendship, Fun, etc.) in h1, but I had to change
the
color & size, so that added another style element. I'm afraid that
probably
isn't correct. I also couldn't have my normal content text follow
immediately
on the same line. Maybe that isn't possible.

I don't quite understand the .rightsidebar p { and container p{
I am assigning the spacing to the <p> tag? What exactly is that doing?

I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div class="footer"> ?

Do you use the <div class="container"> technique all the time? How do you
decide what goes in it -- just floating items or can I think of it as a
table
that holds all my main blocks of info? Why not include the footer in it?

If you'll indulge me one more question, I wonder if it's possible to put a
graphic (say, of a putting green) underneath my rightsidebar? I would
want the
sidebar to lay on top of the putting green for an interesting artistic
touch.

Thank you, thank you, thank you again. Here are my css codes (which I
have in
an external file. Is it better to import or link to the file?)

Have a wonderful New Year.






.body {
padding: 0px;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.masthead {
width: 780px;
margin: 0px auto;
padding-top: 10px;
padding-right: 0px;
}
.maincontent {
background-color: #FFFFFF;
text-align: left;
width: 60%;
margin-top: 0px;
padding-top: 10px;
padding-right: 0px;
font-family: "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
}
.maincontent p{
margin-top: 2px;
margin-right: 10px;

}
.rightsidebar {
font-size: small;
background-color: #DEEBE4;
text-align: center;
float: right;
width: 250px;
margin-top: 10px;
margin-left: 20px;
border: thick solid #941238;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;

}
.leftbox {
font-size: small;
font-style: italic;
color: #336600;
background-color: #DEEBE4;
text-align: center;
clear: both;
width: 300px;
margin-top: 50px;
border: thin solid #941238;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
}
.footer {
font-size: small;
margin: 100px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-style: normal;
}
.container {
width: 90%;
margin: 0px auto;
}
.clear {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}
.event {
font-size: 24px;
font-weight: bold;
color: #00493E;
}
.upcomingdate {
font-size: 20px;
color: #990134;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

.eventitem {
font-size: 18px;
color: #000000;
font-weight: bold;
margin: 0px;
}
.eventlink {
font-size: 14px;
font-style: italic;
margin: 0px;
}
.smallboxhead {
font-size: large;
color: #00493E;
font-style: normal;
font-weight: bold;
}
.companyname {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-style: italic;
color: 990134;
}

I second what Win said, you can't go wrong with ProjectSeven.
Their support is outstanding, also.

Tim

"janeinpa" <webforumsuser (AT) macromedia (DOT) com> wrote

One other quick question... I'm experimenting with various "ready-made"
drop
down menus that work as Dreamweaver extensions. Is this a good idea? Do
you
know of any that are particularly good? I've been playing with the trial
version from Softery but if I'm going to buy one, I'd like to be sure it's
a
good one.

Thank you again -- I just got your new post & I'm going to go over it in
detail after I feed my crazy dogs!

I get the picture that flash menus are ICK, so I'll look into the company you
mention!

Thanks again.

Jane