Forum Moderators: not2easy
Please advice. Im not sure whether I am doing the right code - it seems to work but I just wanted to check ...I would really be greatful for any feedback....apologies for not introducing myself to the forum - I couldnt find the introduction topic....many thanks in advance
PLEASE SEE RELEVANT XHTML CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="npdreamerscode.css/">
</head>
PLEASE SEE CSS CODE
img
{position:absolute;
right:11px;
margin-top:-10px
}
p.zarinandgreen
{
text-align: center;
font-family: arial;
font-size: 37px;
margin-top: 20px;
color: #EDD9AA
}
img.topthread
{position:absolute;
left:6.5px;
margin-top:-40px
}
Most any reasonably current version of Firefox is probably adequate. Firefox users stay fairly current, and rendering issues between minor upgrades are not usually of significance. However, you must test in IE7 and IE8 both. IE6 also if you support that version.
....................................
You should validate your code as 'best practice'. Did not test, but am sure that the sample will not validate.
[validator.w3.org...]
1) <title> is required in the <head>
2) Declaration of a charset is required, .e.g. -
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
3) <link rel="stylesheet" type="text/css" href="npdreamerscode.css/">
The above is not correct. It should end .css" /> Is it actually rendering that external stylesheet? Crossbrowser?
....................................
4) font-family: arial is okay, but 'best practice' would include the generic family as well for back-up, e.g. -
{font-family: Arial, sans-serif;}
....................................
5)
img {
position: absolute;
right: 11px;
margin-top: -10px
}
This would concern me as risky. It works now, but develop the page or site and it could be a problem later. img is a 'global' delcaration, id est, EVERY img on EVERY page that links to this stylesheet will apply this style to EVERY <img> unless explicitly over-ridden in the cascade by a class or id declaration as with your img.topthread
That global {right: 11px;} may still get picked up by img.topthread as a 'loose cannon'. Test this to make sure there are no issues.
....................................
6) I'll take your word that everything is working well, but beware using absolute positioning without understanding any consequences to window resizing. Coded correcty - not a problem. Coded badly - big problem. Just grab a corner of the browser and check out rendering differences as the viewport size changes. If nothing explodes, no problem.
....................................
7) Uppercase on {color: #EDD9AA;} is okay, but I feel that consistent lower case is best practice.
....................................
8) Just a few things to consider. Plenty of people will tell you, "If it works, it works.", and that is good enough. My comments represent the views of exactly one person. LOL Other comments may differ significantly.
font-family: arial;
Somethign liek
font-family: arial, heletica, sans-serif;
With the img {
position: absolute;
right: 11px;
margin-top: -10px
}
I have been going crazy trying to put that in as a background then I read somewhere that Firefox doesnt always recognise it....I nearly cried with relief but of course I could easily be wrong.
So the first image which is the background should be img.backgorund the same way Ive used img.topthread?
Or what is the best way?
Also in some css coding Ive seen the document start with: 'body' is that necessary or just for the coder?
Many thanks in advance again and apologies for such ignorance!
I have been going crazy trying to put that in as a background.....Also in some css coding Ive seen the document start with: 'body' is that necessary or just for the coder?
I always begins my CSS file with:
html, body {
margin: 0; padding: 0; font-size: 100%;
}
This ensures the removal of any margin or padding that a browser may add by default so you are sure of starting with a clean slate. The font-size: declaration may not be strictly necessary for IE7 and 8 - but its inclusion solved issues in IE6 and 5.5. In certain situations resized text would explode if the initial font-size: was not set.
...........................
Two choices on the background-image: for the body. If you are SURE that you will use the same background image on every page, then you can declare in external stylesheet.
html, body {
margin: 0; padding: 0; font-size: 100%;
background: #color url(/image-file-path.jpg);
}
Note: It is a good idea to select a color that closely matches the background-image: - The color will render instantly. If the image shows up to the party a couple of seconds late, the POP is much softer. That is, if the background-color: is white, and the image is blue, the screen is going to really jump when that blue image POPS in. If the background-color is already a closely matching blue, the <img> won't make such a grand entrance. It will just sort of slip into place.
...........................
I usually do not declare a global background-image: - although it can be over-ridden if needed. In fact, I usually do not put a background-image: in any container declaration. Keeping the options open, I put a 'library' of background-image: in the external stylesheet, and then call as needed. Perhaps I have a perfectly good .some-container with margin: padding: font-size; etc. - That class may be more useful and much more reusable if I can give it different background-image: in different places or on different pages. Instead of adding more and more container declarations to the stylesheet (or more and more embedded or inline over-rides), I can use the 'library' of background-image: to reuse containers that are exactly the same, but 'redecorated'
...........................
For example:
CSS:
html, body {
margin: 0; padding: 0; font-size: 100%;
}
/*****Background library*/
.background-1 {
background: #color url(/image-file-path-1.jpg);
}
.background-1 {
background: #color url(/image-file-path-1.jpg);
}
.background-1 {
background: #color url(/image-file-path-3.jpg);
}
.background-1 {
background: #color url(/image-file-path-4.jpg);
}
HTML
<body class="background-1">
or
<div class="some-container background-3">
...........................
The use of a library can be extended to border: font-weight: and more. Don't go overboard, but the use of 'library declarations' make stylesheets smaller, not larger - and make containers more useful by being more flexible.
<div class="some-container background-3 border-b">
...........................
It sounds like you might have in mind using one large image for the page background, rather than a small, fast-loading, tiling image. If so, be careful about that. Large images tend to have large file sizes and are slow to load for many users. Save the pretty pictures for smaller boxes.
Thank you
