Well, I've made some adjustments to the attached files. Just be aware that when I downloaded the bits and pieces of your site to my desktop, I saved it all on the same level, therefore you'll have to correct the paths to css files and images.

I am studying the files to understand what was done:

In the top portion of the css2.css file where you have:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}

I'm assuming you are just assigning these values (margin, padding, etc.) to all the tags above it?

So, can that and the one right below it:

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

be used in most CSS files for websites, at least as a starting point?


Then, there are 2 body tags (not sure if you did that on purpose or not);
the first being:

body {
line-height: 1;
}

and then roughly 30 lines under that:

body {
}


Also, I see you put the entire header tag in the HTML above the container tag . . . what advantage/disadvantage is that, or is that just preference?


Thank you very much!

The top section of the css2 is a 'reset' set of rules. What it does is remove all the browser specific differences, mainly margins and paddings, so that the site will look the same in all browsers. It's not my own invention, I used a well known reset sheet created by someone by the name of Eric Meyer. There is a reference to him in the file, which should stay there.

And yes, the values are assigned to all the tags mentioned. They can be used in all css files, and from that starting point you'll have to build all the margins, paddings etc the way you want them.

I think the second body tag is something you had put in, isn't it? If you are not going to use it, you may delete it. The fact that there is the body tag twice is not a problem as long as it's for the same 'body', and the rules given don't contradict each other.

I made the header div as I needed to float some of the contents, in order to get rid of some of the space. Whether the header is inside or outside the container, is really a preference, but it seems to be the common way of doing things, and personally I find it easier that way.

I want to add that it would have been much easier to avoid the big gaps between the images if you had just set a background colour in those two divs at the top instead of the images. It's no problem to place text on top of a background color.

I didn't even realize I could do that so I did just go in and put a
background-color: #DAF6E7; for the logo_left div instead of the image and that worked fine to tie it to the park picture on the vertical side. The horizontal, e.g. the right side, doesn't tie seamlessly to the logo_top_right portion, however.

Here we go again...

Same as earlier: correct the paths.

Actually, I thought the previous look, with the small gaps, was quite nice...

Thank you, Inger. Sorry for being so brain-dead on this but trying to understand how the CSS files all interact and I am missing something somewhere along the lines. I noted the changes you made and I have it almost where I would like it but a couple things I don't quite follow:

In the HTML, there is the following for the menu in the top upper right portion:

<div id="logo_top_right">
<ul class="top_menu-menu">
<li class="first"><a href="index.htm">Home</a></li>
<li><a href="about.htm">About Us</a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>
</div>

When I go to the top_menu-menu.css file, I do not find the location in there that I can move that menu up or down (I can make it wider or narrower, but cannot move it vertically). Can you tell me where to look or what to look for to accomplish that? I don't want you to have to do it ... I just want to understand what I am looking for in order to move a <div> item up, down, left or right.

I wonder as well if I am using the CC Editor not as efficiently as I should ... I use the CC Editor for the HTML for coding and to view the site, but I use Notepad II for editing the CSS files .. .perhaps I should be using the CC Editor for both and that would help (although not sure how to use it for both. I would be very interested in CC Software providing some sort of class/education on learning to use CSS to help with website building).

I have edited the files I have online at http://www.jayjaynet.com/jayjay/dev . Once I can move <divs> where I want/need them, I can begin learning to add text and other items (I hope!) Thank you for all your help!

Sometimes you have to create a div inside a div inside a div... in order to be able to position things the way you want. The CC css menu is such a case. If you left it completely alone, whithout any positioning, it would turn up at the top left corner of a page.
What you need to do is to create a div around it, with the exact width of the menu, and then position that div in another div (which serves as a containing element)

Your top menu is inside the <div id="logo_top_right">, which then is the containing element. It is trying to place itself top left within that, but it can't get quite up to the top because of the padding-top of 22px given to that element. But it certainly gets as far left as possible.

To move the top menu a bit over to the right, we need a div that we can put the menu into, and then set some positioning on that div. I then wrap the whole <ul></ul> with everything inside into a new div, let us call it div class="positioning". The menu will still try to get as far left as possible inside the 'positioning', therefore the new class has to be given a width that matches the with of the menu exactly. Try setting the width too wide and see what happens.

So, when the exact width has been set, you can add rules to the position class like margin: auto; which will center the class 'positioning' and its content within its contain ing element. If you don't want to have it centered, set some margin-left pixels.

If you want to have your menu further up or down, play around with the padding given to the containing element, the togo_top_right.

Do you think you'll manage with this?

I believe so. Thank you very much for your help. I will play with this and resize in different ways to ensure I have it and then will start working with placing text in the text boxes.

Thanks again!

When you create that .position, a smart hint is to set a height, and a border in some eyecatching colour against the background, e.g. border: 1px solid red; so that you can see how wide that div is. Afterwards you remove that height and the border again.