CSS Layout Fundamental Verification Help?

Thanks for the very quick reply, I do however have another font declared but maybe in the wrong place. I have it in the body. I know the body font color is inherited but is font type? Should I move my declaration somewhere else?

body {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
    padding: 0;
    color: #730000;
    background : #856b43;
    background-repeat: repeat;
    font-size: 1em; "Arial Black", Gadget, sans-serif;
}

Font size only accepts the font size - not the font family. That code is essentially this

font-size: 1em;
"Arial Black", Gadget, sans-serif; /*This is invalid. It's by itself*/

Invalid.

You need to set it like this - use the shorthand font property (which lets you use font-size + font-family (plus some others if you wantā€¦)

font: 1em "Arial Black", Gadget, sans-serif;

That semi-colon you had denotes the end of the declaration. So the font family was not being used.

1 Like

Opā€™s

Sorry but I see the issue. Strange I could not see it in front of my face until it was posted in the grey box in this post. I guess it was not noticeable in notepad.

I included the font family in the line with font size :blush:

1 Like

All working now?

Indeed it is, I guess that is what you get when you look at your screen too many hours without taking a break.

Now to figure out the menu and slide show then I can start the real site.

Thanks again.

1 Like

I would strongly advise you to download an HTML editor which will highlight code for you. It makes life so much easier, because itā€™s that much easier to spot where a typo or moment of distraction has created an error. (It will do much more for you than that, but thatā€™s a good start.)

There are any number of good, free editors around. Just try a couple until you find one you like. (I use Bluefish on Linux; notepad++ seems to be popular for Windows.)

2 Likes

Thanks, I already have notepad++ but wanted to just do the basics first with notepad then go to notepad ++. Other than highlighting and matching tags which I have checked out what else is there worth checking out in notepad++?

I also have crimson editor, and blue griffon. I will check them out more soon.

To be honest, (I use Sublime Text 3 as my basic editor, and used to use Notepad++) I would never use regular Notepad for anything at all unless in an insane hurry and it was my only option for some reason. Thereā€™s just no reason to do so that I can think of. The clear indentations/tabbing, wrapping(or not), syntax highlighting, etc are worth their weight in gold for speed and easy legibility of code, unless youā€™re a command-line text-only type of personality - very few people wouldnā€™t see an improvement in efficiency with a proper editor, Iā€™d guess.

2 Likes

Here are two free tools that I find invaluable while developing a site:

http://jigsaw.w3.org/css-validator/

Just copy and paste your URL into the Address textedit box and errors and warnings are shown both of which are best removed to prevent browsers having to guess your intentions :slight_smile:

2 Likes

Well then, I guess I best get to working with Notepad++. Just got it a couple of days ago and really wanted to find my Nav Menu first but what the heck. Next shift I will swap over.

The blue griffon is a wysiwyg editor. I do not use it for that purpose, I downloaded just to take a look at it and see what it could do. Really not worth anything to me other than it has a dual window where you can just jump from source to web view. Nice for a quick source change and quick verify that is what you wanted to do. I guess it has itā€™s place.

1 Like

Thanks, I was there just a few minutes ago to see how it went. CSS is my challenge and I have a lot of years with html4 but none with CSS and html5.

I feel good that so far my first CSS validates and passes the mobile friendly Google Mobile Friendly Tester.

2 Likes

Yes, there are tons of pre-made menus that do all of that. Here are some resources I know of:

http://jasonweaver.name/lab/flexiblenavigation/

There are also lots of ready-made slideshows. Which one you pick depends on how you want ti to behave, though, so perhaps suggest what youā€™d like it to do and Iā€™ll suggest something.

The logo is looking better. There are ways to optimize the birds, too. If you are using Photoshop, you can remove that white edge around the images.

Thanks for those links. I did build one menu already but in the end I did not like tne end results, maybe these resources will have what I want.

No photo shop here big have another tool that may fix that issue. If not I can see if the person who does our brochure can clean them up. My various editora may be able to do that if I knew what feature to look for.

I rarely edit images other than those birds mostly I use them for resize and file type converson.

Well, maybe I have just been a glutton for punishment all these years. But on the other hand I only had to worry about plain ol html 4 without style sheets until now. I guess modern technology requires modern tools.

2 Likes

ralphm, I checked those out. One of them I had seen before, the others I did not. Before I checked them out I did download a menu program to give it a try. It was okay but had some alignment issues (my faullt) with it. I started a new thread for just menus and alignment as stated below. I will revisit the links you mentioned because I was reluctant to go with java as I somehow in my new to CSS brain researching this subject got the impression that CSS was a better way to go for the menu instead of Java and a site map which I had used for years.

Maybe it is a matter of opinion on which way to go Java / CSS but simply enough once the project up and running I would like a rather friendly site that on my end mostly only needs content updates like prices and some style from time to time.

Because the menu and alignment was really not discussing being new and being my first post, as we mentioned before I did start a new thread in the CSS/HTML page based solely on menu and menu alignment. This thread was great to point me to where I had to go but think a more appropriate title for a specific issue will over all be more productive for someone looking for the same cure I am seeking in the future.

CSS can do some amazing things, but itā€™s not always the best choice. JavaScript is a better option for menus, because things like drop down menus with CSS only are not very accessible to people using assistive devices and so on.

Definitely so. You did the right thing. :slight_smile:

I even found a good source to help people walk through alignment of the page. I just walked through it and fixed a lot of issues or at least I think it is better.

I had played with a menu and could not get it aligned up correctly. I still have not finished with that but what I have done was correct what was probably a big issue.

Instead of setting a size for my main wrapper I had left it at defaults and was setting a % size for the elements it contained so my header, nav, sections and footers were all 80%.

I have now changed the wrapper to 80% and no width conditions on the elements.

I will have the newest rendering up in about 5 minutes. Then will continue through the night and work on a final menu. No matter what I choose I can always move to a different solution later.

1 Like

@ralphm
You know, right now there is not a lot I can contribute to this forum except for an article I find here and there if they are good.

What I am wondering is I have a tool in my collection that works like a set of calipers and even looks like them to measure distances on a computer screen. I use it for checking spacing.

The tool is free unless a user wanted advanced features. Would it be considered span to share that here as a small token of thanks? This nothing I built just something I found of real value over the years.

Here is the site I promissed eariler. What a great read espically for those new to css.

For anyone looking for help to get a site aligned this site got me to where I needed to be. I now have my alignments in good shape.

Generally, if a link is relevant to a discussion, itā€™s not considered spam or promotion. Thatā€™s OK. You might as well post a link, now that youā€™ve whetted out appetite. :slight_smile: