a question of directing a link into a...

User 122279 Photo


Senior Advisor
14,571 posts

Paul, see if this is what you are after...

I made a mockup skeleton of what I think you want. All the ugly colours are just examples, you can delete/change them as you want. But it is a good idea to put in some colours while working, then it is easier to see where you are and what is happening.

The menu can also be edited and styled. And when styling h1 through h6 they don't get the 'class dot'.

The secret about avoiding scrollbars etc on the included files is setting their dimensions so that they fit into the 'holes' in the main document, including margins, paddings and all. And also, the middle part, the 'main' div of the document is not supposed to be included. I think that's where you got the problems.

Note the start of each html document. You have to include the doctype and the charset, which I have done.

You will see that the included files have embedded styles. There is only one of each, and they are all different, so I thought that to be the easiest.

Further it is good practice to write all the code in lowercase. You must be having a very aged css editor, I think it's more than 10-12 years ago that they used uppercase. It's also a good ides to have all the file names in lowercase. Everybody is so used to it now, that they might be getting trouble if they want to address one particular page. Unix servers, and they seem to be the most common ones, don't know that A and a are two instances of the same letter, they are regarded as two different ones.

Just let us know if you need more help :)
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2168940 Photo


Registered User
49 posts

WOW!!

Thank you, Inger! The sample that you spent your time an effort is right on the button.

This arrangement is what I had in mind, with far less messing around than I had ahead of me without your kind help. It is going to teach me a fair bit about how to do what I am imagining.

I am very impressed with this whole CC community.

Thanks again,
-Paul-



User 122279 Photo


Senior Advisor
14,571 posts

Glad you can use it :)

And yes! we are quite a nice lot in here :lol:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 184085 Photo


Ambassador
1,707 posts

@Inger

How would google see those pages, I never could get it to see my pages when I had a menu in an object, but then I gave up with the time constraints I had at the time.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 122279 Photo


Senior Advisor
14,571 posts

Giving the menu.html its own meta tags?
Make sure the various pages of a site have their own specific keywords/description, After all, I don't think Google is so very keen on the menu as long as it can find the pages.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2168940 Photo


Registered User
49 posts

Hi Inger,

I've had a day or two to study the files that you have sent. Having fun doing that, but I have two small questions concerning the css file. (if you wouldn't mind?)

#1) You define two things in the script: They would appear to be the same thing, except wrapper has the # and body doesn't. What is the difference between haviung the hash mark and not having it?

body { background: #ccc url('../img/background1.gif')repeat;
color: black; <- is necessary?
font-family: Corbel, Arial, Tahoma, sans-serif;
}

#wrapper {
/* background: #ccc url('../img/background2.gif')repeat; */
width: 890px;
margin: 0 auto;
}

#2) You define some colours as: background-color: #eee; <- Just the three letters?

Thank you sir,
-Paul-
User 271657 Photo


Ambassador
3,816 posts

Hi Paul,
This will explain the # marks (IDs and Classes):
http://www.w3schools.com/css/css_id_class.asp

For the hex (color) codes, which always start with # – the 3 letters are abbreviations. Normally you'd have a combination of 6 letters/numbers, but if all 6 are the same (as for black: #000000), you can shorten them to 3 (#000).
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2168940 Photo


Registered User
49 posts

Thanks paintbrush,

This was good of you. I would NEVER have caught the abbreviation thing...EVER. I would have just continued trying different three-letter combinations. A monkey could could Accidentally scribe an entire bible before I got the picture.

Also, thanks for the link to the W3C tutorial about id and class. I thought I had been to this site, it looks familiar. However, it was a first for a tutorial not making assumptions with my vocabulary.

Thanks again,
-Paul-

Inger: I still like those sites you did for the Dental Clinic.
User 271657 Photo


Ambassador
3,816 posts

Leave it to Inger to do all the 'heavy lifting', I can jump in on the basic stuff :lol:

Check out the CoffeeCup Website Color Schemer: http://www.coffeecup.com/color-schemer/
– Very handy for finding out the hex #s for your colors. You can also use the eyedropper tool to sample a color on anything in your screen to get the RGB and hex # for it. It also allows for saving your color schemes. ;)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 122279 Photo


Senior Advisor
14,571 posts

I haven't followed the links that Paintbrush quoted, but she is right about the # in front of 'hex' values, like #ffffff (white), #ff0000 (red) etc. These can be abbreviated to only three digits, #fff and #000 because they consist of three pairs of the same value. You can also use the name for a color, in that case without the #. There are lots of named colors that can be used, but shades between them have to be defines as 'hex' code.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.