Quantcast

CSS help, please

INNspiring.com | Innkeeper Forum & Innkeeping Resources

Help Support INNspiring.com | Innkeeper Forum & Innkeeping Resources:

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
How do you:
Use CSS to get the tables centered 'on the page'?
Make the spaces between tables disappear (ie- I have 3 tables which contain different data...2 linkbars with a "text" table in between) In FP they look fine, 'live' they all have a big space between the individual tables (so the background color of the page shows).
Is this the correct way to 'comment out' a line in CSS: /* some info */ ?
Get rid of the 'phantom frame' around photos that are set in a <div rather than in a table? I get a 10px 'invisible' frame around the header picture which skews all the tables from lining up. Should I create a table and put the header pic in that?
In IE the tables line up down the middle of the screen. In Firefox and Chrome the tables all go to the left. The header photo is removed in this example as it was making me cry whenever I looked at it!
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
OK, figured out the spacing issue myself. Still need help getting the tables centered and the 'phantom frame' fixed. And, yes, /* */ is the comment command as that's how I figured out the spacing problem.
I put a photo in so you can see what I mean by the 'phantom frame'. I set the picture to be the same size as the tables above and below it but it skews off to the side and the background is visible around the edges.
 

toby

New member
Joined
Feb 22, 2009
Messages
1
Reaction score
0
OK, figured out the spacing issue myself. Still need help getting the tables centered and the 'phantom frame' fixed. And, yes, /* */ is the comment command as that's how I figured out the spacing problem.
I put a photo in so you can see what I mean by the 'phantom frame'. I set the picture to be the same size as the tables above and below it but it skews off to the side and the background is visible around the edges..
Hi Bree,
You can center your page in Firefox and Chrome by adding "margin: auto;" to your body. So, you could change your CSS to:
body {
background-color: #48593c;
margin:auto;
}
Hope that helps,
Toby
 

EmptyNest

Well-known member
Joined
May 22, 2008
Messages
8,741
Reaction score
1
are you still using Front PAGE to do your editing??? That may also be adding to the problem. What I sent you was a template created in Dreamweaver. What I do is create a template .dwt in dreamweaver set it all up the way I want it. LInk the style sheet to it and save it all. Then when I do another page it is exactly the same through out. THen later if I need to make universal changes, I do it on the .dwt and style sheets and it changes all of the pages.
You have got to lose Front page I think:-(
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
are you still using Front PAGE to do your editing??? That may also be adding to the problem. What I sent you was a template created in Dreamweaver. What I do is create a template .dwt in dreamweaver set it all up the way I want it. LInk the style sheet to it and save it all. Then when I do another page it is exactly the same through out. THen later if I need to make universal changes, I do it on the .dwt and style sheets and it changes all of the pages.
You have got to lose Front page I think:-(.
Yes, sorry to say, still using FP. That's why I asked awhile ago what would be a good program to switch to.
I am using the stylesheet you sent. (Thanks!) What happens to me is that I see a good thing working and I want to use it for everything. If I could style the fonts and the colors, why not style the tables, too? I'm wild with the power of the whole thing! I've been reading CSS help forums all over the place. I tried all the hints they had but kept having the same problems. I'd find one that was really great and then the person with the problems would say, 'I'll email you offline....' and that would be the end of the help for the table formatting.
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
OK, figured out the spacing issue myself. Still need help getting the tables centered and the 'phantom frame' fixed. And, yes, /* */ is the comment command as that's how I figured out the spacing problem.
I put a photo in so you can see what I mean by the 'phantom frame'. I set the picture to be the same size as the tables above and below it but it skews off to the side and the background is visible around the edges..
Hi Bree,
You can center your page in Firefox and Chrome by adding "margin: auto;" to your body. So, you could change your CSS to:
body {
background-color: #48593c;
margin:auto;
}
Hope that helps,
Toby
.
toby said:
Hi Bree,
You can center your page in Firefox and Chrome by adding "margin: auto;" to your body. So, you could change your CSS to:
body {
background-color: #48593c;
margin:auto;
}
Hope that helps,
Toby
My entire family thanks you (seriously). I tried margin-left:auto;margin-right:auto;to no avail. Who knew plain old 'margin:auto' would work. (Obviously YOU did!)
OK, now tell me how to get that 'space' around the photo to disappear. You can see it skews everything slightly to the right and I don't like the spacing between the 'elements'. (Sorry, you come on, you help and already I want more.)
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
OK, figured out the spacing issue myself. Still need help getting the tables centered and the 'phantom frame' fixed. And, yes, /* */ is the comment command as that's how I figured out the spacing problem.
I put a photo in so you can see what I mean by the 'phantom frame'. I set the picture to be the same size as the tables above and below it but it skews off to the side and the background is visible around the edges..
Hi Bree,
You can center your page in Firefox and Chrome by adding "margin: auto;" to your body. So, you could change your CSS to:
body {
background-color: #48593c;
margin:auto;
}
Hope that helps,
Toby
.
PS- Did you just join this forum to save my butt or are you an innkeeper? Either way, 'Thanks!'
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
A few things to help .... drop Frontpage and at least switch to Kompozer. It's free and will let you create templates and is a little more css friendly.
Download the webdeveloper plugin for Firefox. It has great tools for seeing what css is in play for specific elements on a page.
Don't specify your font sizes in px ... they will look gigantic on small screens and tiny on large screens and will not allow people to adjust the size in their browser. I suggest using em rather than px.
for photos just apply a class to the img tag and then set the padding or margin to be what you want it to be.
 

JunieBJones (JBJ)

Well-known member
Joined
May 22, 2008
Messages
3,893
Reaction score
0
A few things to help .... drop Frontpage and at least switch to Kompozer. It's free and will let you create templates and is a little more css friendly.
Download the webdeveloper plugin for Firefox. It has great tools for seeing what css is in play for specific elements on a page.
Don't specify your font sizes in px ... they will look gigantic on small screens and tiny on large screens and will not allow people to adjust the size in their browser. I suggest using em rather than px.
for photos just apply a class to the img tag and then set the padding or margin to be what you want it to be..
swirt said:
A few things to help .... drop Frontpage and at least switch to Kompozer. It's free and will let you create templates and is a little more css friendly.
Download the webdeveloper plugin for Firefox. It has great tools for seeing what css is in play for specific elements on a page.
Don't specify your font sizes in px ... they will look gigantic on small screens and tiny on large screens and will not allow people to adjust the size in their browser. I suggest using em rather than px.
for photos just apply a class to the img tag and then set the padding or margin to be what you want it to be.
Question O Guru - - Will any of this have impact on her google/seo placement? Creatign style sheets and templates and replacing her existing website?
What does she need to retain to retain the good bits for SEO?
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.)
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.).
A-ha! Another question then...this stylesheet I will set up for media: screen. Should I create separate stylesheets for different media? Do they all go in the header and I hope that the right one is used?
Thanks for all the other bits in the previous post...I'll change to em instead of px. And work on the pic tags. And look at Kompozer. (You realize it's scary to change editors at this date. Plus I don't know if my webhost will accept Kompozer.)
Because I have to touch every page to put the code in and fix anything that falls apart and take out all the old code I don't need, I am also going to work on the titles, descriptions and headlines. Which is why this is going to be such a long project.
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.).
A-ha! Another question then...this stylesheet I will set up for media: screen. Should I create separate stylesheets for different media? Do they all go in the header and I hope that the right one is used?
Thanks for all the other bits in the previous post...I'll change to em instead of px. And work on the pic tags. And look at Kompozer. (You realize it's scary to change editors at this date. Plus I don't know if my webhost will accept Kompozer.)
Because I have to touch every page to put the code in and fix anything that falls apart and take out all the old code I don't need, I am also going to work on the titles, descriptions and headlines. Which is why this is going to be such a long project.
.
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.).
A-ha! Another question then...this stylesheet I will set up for media: screen. Should I create separate stylesheets for different media? Do they all go in the header and I hope that the right one is used?
Thanks for all the other bits in the previous post...I'll change to em instead of px. And work on the pic tags. And look at Kompozer. (You realize it's scary to change editors at this date. Plus I don't know if my webhost will accept Kompozer.)
Because I have to touch every page to put the code in and fix anything that falls apart and take out all the old code I don't need, I am also going to work on the titles, descriptions and headlines. Which is why this is going to be such a long project.
.
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
.
swirt said:
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
Anything that I do that is 'odd' is probably because I don't know what I'm doing! I just added the 'Arial' to the list that El had because I wanted Arial. I have no idea how the font ordering system works. (And didn't know there was one!) I suppose there's a place I can look that up.
I'm not using the the styles, but thanks for pointing that out. I'm going to comment them out in case a need arises for them someday.
Right now my brain is full so I need to do something un-CSS tomorrow like the site map and the privacy statement. And right now the power is sketchy here so I'm shutting down altogether.
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.).
A-ha! Another question then...this stylesheet I will set up for media: screen. Should I create separate stylesheets for different media? Do they all go in the header and I hope that the right one is used?
Thanks for all the other bits in the previous post...I'll change to em instead of px. And work on the pic tags. And look at Kompozer. (You realize it's scary to change editors at this date. Plus I don't know if my webhost will accept Kompozer.)
Because I have to touch every page to put the code in and fix anything that falls apart and take out all the old code I don't need, I am also going to work on the titles, descriptions and headlines. Which is why this is going to be such a long project.
.
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
.
swirt said:
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
Anything that I do that is 'odd' is probably because I don't know what I'm doing! I just added the 'Arial' to the list that El had because I wanted Arial. I have no idea how the font ordering system works. (And didn't know there was one!) I suppose there's a place I can look that up.
I'm not using the the styles, but thanks for pointing that out. I'm going to comment them out in case a need arises for them someday.
Right now my brain is full so I need to do something un-CSS tomorrow like the site map and the privacy statement. And right now the power is sketchy here so I'm shutting down altogether.
.
Bree said:
I have no idea how the font ordering system works. .
The list is designed so that the first font in the list is the first one the site will try to use, but if the font is not available, the site tries the next one in the list, and if that one is not available, it tries the next one. So the idea of the list is to have a safety net.
All machines may not have Georgia, but they are likely to have Times, but just in case, they ALL have Serif. Put them in order from what your really want, down to what you can live with
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.).
A-ha! Another question then...this stylesheet I will set up for media: screen. Should I create separate stylesheets for different media? Do they all go in the header and I hope that the right one is used?
Thanks for all the other bits in the previous post...I'll change to em instead of px. And work on the pic tags. And look at Kompozer. (You realize it's scary to change editors at this date. Plus I don't know if my webhost will accept Kompozer.)
Because I have to touch every page to put the code in and fix anything that falls apart and take out all the old code I don't need, I am also going to work on the titles, descriptions and headlines. Which is why this is going to be such a long project.
.
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
.
swirt said:
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
Anything that I do that is 'odd' is probably because I don't know what I'm doing! I just added the 'Arial' to the list that El had because I wanted Arial. I have no idea how the font ordering system works. (And didn't know there was one!) I suppose there's a place I can look that up.
I'm not using the the styles, but thanks for pointing that out. I'm going to comment them out in case a need arises for them someday.
Right now my brain is full so I need to do something un-CSS tomorrow like the site map and the privacy statement. And right now the power is sketchy here so I'm shutting down altogether.
.
Bree said:
I have no idea how the font ordering system works. .
The list is designed so that the first font in the list is the first one the site will try to use, but if the font is not available, the site tries the next one in the list, and if that one is not available, it tries the next one. So the idea of the list is to have a safety net.
All machines may not have Georgia, but they are likely to have Times, but just in case, they ALL have Serif. Put them in order from what your really want, down to what you can live with
.
swirt said:
Bree said:
I have no idea how the font ordering system works. .
The list is designed so that the first font in the list is the first one the site will try to use, but if the font is not available, the site tries the next one in the list, and if that one is not available, it tries the next one. So the idea of the list is to have a safety net.
All machines may not have Georgia, but they are likely to have Times, but just in case, they ALL have Serif. Put them in order from what your really want, down to what you can live with
I knew that part (about having the list in case someone's computer doesn't have the particular font I want to show), just didn't know how to tell one font type from the other...ie serif from sans serif...just by the name. I realize you can tell by looking at them.
Is there a partucular number of fonts I should list? I figured just having the basic ones would cover it whether they are serif or sans serif. Should it matter which they are as long as they are fairly common? Is it a matter of all of my *beautiful* formatting going horribly awry with the wrong font being chosen by the computer?
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.).
A-ha! Another question then...this stylesheet I will set up for media: screen. Should I create separate stylesheets for different media? Do they all go in the header and I hope that the right one is used?
Thanks for all the other bits in the previous post...I'll change to em instead of px. And work on the pic tags. And look at Kompozer. (You realize it's scary to change editors at this date. Plus I don't know if my webhost will accept Kompozer.)
Because I have to touch every page to put the code in and fix anything that falls apart and take out all the old code I don't need, I am also going to work on the titles, descriptions and headlines. Which is why this is going to be such a long project.
.
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
.
swirt said:
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
Anything that I do that is 'odd' is probably because I don't know what I'm doing! I just added the 'Arial' to the list that El had because I wanted Arial. I have no idea how the font ordering system works. (And didn't know there was one!) I suppose there's a place I can look that up.
I'm not using the the styles, but thanks for pointing that out. I'm going to comment them out in case a need arises for them someday.
Right now my brain is full so I need to do something un-CSS tomorrow like the site map and the privacy statement. And right now the power is sketchy here so I'm shutting down altogether.
.
Bree said:
I have no idea how the font ordering system works. .
The list is designed so that the first font in the list is the first one the site will try to use, but if the font is not available, the site tries the next one in the list, and if that one is not available, it tries the next one. So the idea of the list is to have a safety net.
All machines may not have Georgia, but they are likely to have Times, but just in case, they ALL have Serif. Put them in order from what your really want, down to what you can live with
.
swirt said:
Bree said:
I have no idea how the font ordering system works. .
The list is designed so that the first font in the list is the first one the site will try to use, but if the font is not available, the site tries the next one in the list, and if that one is not available, it tries the next one. So the idea of the list is to have a safety net.
All machines may not have Georgia, but they are likely to have Times, but just in case, they ALL have Serif. Put them in order from what your really want, down to what you can live with
I knew that part (about having the list in case someone's computer doesn't have the particular font I want to show), just didn't know how to tell one font type from the other...ie serif from sans serif...just by the name. I realize you can tell by looking at them.
Is there a partucular number of fonts I should list? I figured just having the basic ones would cover it whether they are serif or sans serif. Should it matter which they are as long as they are fairly common? Is it a matter of all of my *beautiful* formatting going horribly awry with the wrong font being chosen by the computer?
.
Bree said:
Is there a partucular number of fonts I should list? I figured just having the basic ones would cover it whether they are serif or sans serif. Should it matter which they are as long as they are fairly common? Is it a matter of all of my *beautiful* formatting going horribly awry with the wrong font being chosen by the computer?
3 is probably the most typical going from specific, to family, to generic family
example: Georgia, Times, serif
example: Antique, Arial, sans-serif
There is nothing catastophic about mixing serif and sans-serif fonts in definition, it is just usually web designers are control freaks who specifically want the text heavy or text light look of either a serif or sans-serif font so they would want to make sure their desires are carried out regardless of which font is available to any particular computer.
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
CSS has very little if any impact on SEO. Especially for the kind of thing she is doing. Where it impacts SEO is if you have portions of the page not visible then parts become visible as you hover over items and things like that.
It will impact download speed, because the formatting only gets downloaded from the css file once for the entire site, so as people move from page to page, that should happen faster because each page is not full of bloated formatting. It makes it easier to create alternate looks for her site without ever touching a single page of content. Useful for site makeovers. Or useful for tuning a site for multiple devices. Example: the same site uses one set of css if viewed on a computer, and another set of css when printed,and another set when viewed on a mobile device.. Generally it helps assure the entire site has the same look rather than having to remember to go make changes to every page.
To maintain the good aspects she has, she should keep the same page filenames. Not alter her meta-descriptions and not change her titles and headings (unless she is making improvements to them of course.).
A-ha! Another question then...this stylesheet I will set up for media: screen. Should I create separate stylesheets for different media? Do they all go in the header and I hope that the right one is used?
Thanks for all the other bits in the previous post...I'll change to em instead of px. And work on the pic tags. And look at Kompozer. (You realize it's scary to change editors at this date. Plus I don't know if my webhost will accept Kompozer.)
Because I have to touch every page to put the code in and fix anything that falls apart and take out all the old code I don't need, I am also going to work on the titles, descriptions and headlines. Which is why this is going to be such a long project.
.
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
.
swirt said:
Kompozer will work with with any host that supports FTP ;) ... (they all support FTP ... microsoft was the only one to create extentions for that FP used that would have to be placed on the server)
I would stick with one stylesheet becasue within the stylesheet you can use the @ command to specify the media. Usually the differences for different media are small ... like hiding a large banner image for cell phones or printers.
A couple things I noticed while looking at your css... and I realise you are working on it now and may have already altered these things.:
  1. In your font definition you switch font styles within the definition, which is a bit odd.
    "font-family: Arial, Georgia, Times New Roman, Times, serif;" Arial is a sanserif font while the others are all serif variants. Usually for continuity you specify similar styles of fonts as you move from specific to generic. Also any font with more than one word should be encased in quotes like this "Times New Roman"
  2. At the bottom of your css, style1 will prevent style 2 from being read because style1 lacks a closing semicolon.
Anything that I do that is 'odd' is probably because I don't know what I'm doing! I just added the 'Arial' to the list that El had because I wanted Arial. I have no idea how the font ordering system works. (And didn't know there was one!) I suppose there's a place I can look that up.
I'm not using the the styles, but thanks for pointing that out. I'm going to comment them out in case a need arises for them someday.
Right now my brain is full so I need to do something un-CSS tomorrow like the site map and the privacy statement. And right now the power is sketchy here so I'm shutting down altogether.
.
Bree said:
I have no idea how the font ordering system works. .
The list is designed so that the first font in the list is the first one the site will try to use, but if the font is not available, the site tries the next one in the list, and if that one is not available, it tries the next one. So the idea of the list is to have a safety net.
All machines may not have Georgia, but they are likely to have Times, but just in case, they ALL have Serif. Put them in order from what your really want, down to what you can live with
.
swirt said:
Bree said:
I have no idea how the font ordering system works. .
The list is designed so that the first font in the list is the first one the site will try to use, but if the font is not available, the site tries the next one in the list, and if that one is not available, it tries the next one. So the idea of the list is to have a safety net.
All machines may not have Georgia, but they are likely to have Times, but just in case, they ALL have Serif. Put them in order from what your really want, down to what you can live with
I knew that part (about having the list in case someone's computer doesn't have the particular font I want to show), just didn't know how to tell one font type from the other...ie serif from sans serif...just by the name. I realize you can tell by looking at them.
Is there a partucular number of fonts I should list? I figured just having the basic ones would cover it whether they are serif or sans serif. Should it matter which they are as long as they are fairly common? Is it a matter of all of my *beautiful* formatting going horribly awry with the wrong font being chosen by the computer?
.
Bree said:
Is there a partucular number of fonts I should list? I figured just having the basic ones would cover it whether they are serif or sans serif. Should it matter which they are as long as they are fairly common? Is it a matter of all of my *beautiful* formatting going horribly awry with the wrong font being chosen by the computer?
3 is probably the most typical going from specific, to family, to generic family
example: Georgia, Times, serif
example: Antique, Arial, sans-serif
There is nothing catastophic about mixing serif and sans-serif fonts in definition, it is just usually web designers are control freaks who specifically want the text heavy or text light look of either a serif or sans-serif font so they would want to make sure their desires are carried out regardless of which font is available to any particular computer.
.
Uh oh...control freak...that's me. And I guess if I had known all of that, I would have been hunting down specifiics!
 

JunieBJones (JBJ)

Well-known member
Joined
May 22, 2008
Messages
3,893
Reaction score
0
RE color try a CTRL F and find all #000000 and then replace all and insert the correct color #804000 or whatever it is.
 

Morticia

Administrator
Staff member
Administrator
Moderator
Joined
May 22, 2008
Messages
17,281
Reaction score
144
OK, I'm back at it again. In 2 separate places I have put in that the color of the font in the main body of the site should be black, it's white.
First off, here:
body,td,th,table {
font-family: Arial, Times New Roman, "sans serif";
font-size: 14px;
color: #000000;
width: 780px;
margin:auto;
}
Then again, here:
}
/* This section is for the text body.*/
table.info {
background-color: #fef2af;
color: #000000;
}

I have added this to the html:
<div>
<table class="info">
<tr>
<td height="25" colspan="2">

What am I missing?
Second question- I have commented out several items I don't want by putting /* */ at the beginning and the end of the statement. Do I have to put that on every line instead? I was messing around with changing 'px' to 'em' and found that a command I 'thought' was commented out was not. But as nothing is working the way I expected, I have to ask!
This is SO much more work than I thought it was going to be. Oh dear.
OK, I realized that all of my text is in a paragraph so I added 'p' to the first line and got all the text to be black. BUT, now everything is 'centered' instead of left justified. And the new table is 6 miles wider than the rest of the tables.
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
OK, I'm back at it again. In 2 separate places I have put in that the color of the font in the main body of the site should be black, it's white.
First off, here:
body,td,th,table {
font-family: Arial, Times New Roman, "sans serif";
font-size: 14px;
color: #000000;
width: 780px;
margin:auto;
}
Then again, here:
}
/* This section is for the text body.*/
table.info {
background-color: #fef2af;
color: #000000;
}

I have added this to the html:
<div>
<table class="info">
<tr>
<td height="25" colspan="2">

What am I missing?
Second question- I have commented out several items I don't want by putting /* */ at the beginning and the end of the statement. Do I have to put that on every line instead? I was messing around with changing 'px' to 'em' and found that a command I 'thought' was commented out was not. But as nothing is working the way I expected, I have to ask!
This is SO much more work than I thought it was going to be. Oh dear.
OK, I realized that all of my text is in a paragraph so I added 'p' to the first line and got all the text to be black. BUT, now everything is 'centered' instead of left justified. And the new table is 6 miles wider than the rest of the tables..
Well first you don't really want to list all all elements like ,td,th,table,p in the same definition as the body because styles cascade. Everything is contained in the body. So something in a <p> </p> inside the <body> will take on the properties of the body unless overidden by another style declaration.
Times New Roman needs to be in quotes.
This will answer your question about css comments.
Hard to say on the font color. You are declaring it to be black so it ought to become black unless
  • you have an error higher up in your css that is preventing the declaration of black from getting read (this is very common)
  • Something on page is specifying white as the color (ether on page or somewhere else in the css).
I'd need to see the page in question and the full css to rule either of these in or out.
 
Top