11 replies [Last post]
TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 11 years 30 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

So I finally got my domain up... I am done the index and the bottom five links of the nav bar...

http://www.rememberthebmrr.info/

It looks nearly identical in IE7 and FireFox, so I am wondering about how it looks in any other browsers :shrug:

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 11 years 30 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

Silly me, I forgot the

Silly me, I forgot the CSS... You can also check out this temporary page: http://www.rememberthebmrr.info/windham.htm

body { 
	font-family: verdana, arial, sans-serif; 
	font-size: 14px; 
	color: #000000; 
	background-color: #D7C39B; 
} 
 
p { 
	width: 100%; 
	margin-top: 20px; 
	margin-bottom: 10px; 
} 
 
img { 
	border: none; 
} 
 
h1 { 
	font-family: georgia, "times new roman", times, serif; 
	font-size: 18px; 
	font-weight: bold; 
	text-align: center; 
	text-decoration: underline; 
	margin-top: 0px; 
	margin-bottom: 0px; 
} 
 
h2 { 
	font-family: georgia, "times new roman", times, serif; 
	font-size: 18px; 
	font-weight: bold; 
	text-align: center; 
	margin-top: 0px; 
	margin-bottom: 0px; 
} 
 
a:link { 
	color: #0000FF; 
	text-decoration: none; 
} 
 
a:visited { 
	color: #AF0000; 
	text-decoration: none; 
} 
 
a:hover { 
	color: #AF0000; 
	text-decoration: underline; 
} 
 
a:active { 
	color: #AF0000; 
} 
 
#list1 { 
	font-weight: bold; 
	color: #640000; 
	list-style-type: none; 
	line-height: 30px; 
	margin: 0px; 
	padding: 0px; 
} 
 
.list2 { 
	font-style: italic; 
	font-weight: normal; 
	color: #000000; 
	list-style-type: square; 
} 
 
.list2 a { 
	color: #000000; 
	text-decoration: none; 
} 
 
.list2 a:visited { 
	color: #AF0000; 
	text-decoration: none; 
} 
 
.list2 a:hover { 
	color: #AF0000; 
	text-decoration: underline; 
} 
 
.list2 a:active { 
	color: #AF0000; 
} 
 
#main { 
	width: 976px; 
	min-height: 940px; 
	height: auto !important; 
	height: 940px; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: auto; 
	margin-right: auto; 
	background-color: #D7C39B; 
} 
 
#header { 
	width: 976px; 
	height: 112px; 
} 
 
#center { 
	width: 976px; 
	min-height: 750px; 
	height: auto !important; 
	height: 750px; 
	margin-top: 0px; 
	margin-left: 0px; 
	background: #640000 url(BM_Minuteman.jpg); 
	background-position: bottom left; 
	background-repeat: no-repeat; 
	text-align: center; 
	overflow: hidden; 
} 
 
#footer { 
	width: 976px; 
	height: 50px; 
} 
 
#contact { 
	width: 976px; 
	height: 18px; 
	margin-top: 10px; 
	font-size: 10px; 
	text-align: center; 
} 
 
#navpad { 
	float: left; 
	width: 177px; 
	height: 520px; 
	margin-top: 10px; 
	margin-bottom: 10px; 
	margin-left: 10px; 
	margin-right: 8px; 
	background-color: #640000; 
} 
 
#navmenu { 
	margin: 0px; 
	padding: 0px; 
	list-style-type: none; 
} 
 
#navmenu a { 
	width: 177px; 
	font-family: georgia, "times new roman", times, serif; 
	font-size: 18px; 
	text-align: center; 
	background-color: #640000; 
	color: #FFCC00; 
	display: block; 
	padding: 5px 0px; 
} 
 
#navmenu a:hover { 
	background-color: #FFCC00; 
	color: #640000; 
	text-decoration: none; 
} 
 
#docpad { 
	float: right; 
	width: 777px; 
	min-height: 746px; 
	height: auto !important; 
	height: 746px; 
	margin-top: 2px; 
	margin-bottom: 2px; 
	margin-left: 2px; 
	margin-right: 2px; 
	background-color: #EEEEEE; 
} 
 
#doctext { 
	width: 757px; 
	min-height: 726px; 
	height: auto !important; 
	height: 726px; 
	margin-top: 10px; 
	margin-bottom: 10px; 
	margin-left: 10px; 
	margin-right: 10px; 
	background-color: #EEEEEE; 
	text-align: justify; 
} 
 
#station { 
	width: 402px; 
	margin-left: 177px; 
	font-size: 12px; 
	text-align: center; 
} 
 
#station img { 
	border-width: 1px; 
	border-color: #000000; 
	border-style: solid; 
} 
 
#townpad { 
	width: 561px; 
	height: 31px; 
	margin-left: 98px; 
	background-color: #EEEEEE; 
	text-align: center; 
} 
 
#townmenu { 
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
} 
 
#townmenu li { 
	float: left; 
	width: 187px; 
} 
 
#townmenu a { 
	width: 187px; 
	font-family: georgia, "times new roman", times, serif; 
	font-size: 18px; 
	color: #FFCC00; 
	text-align: center; 
	background-color: #640000; 
	display: block; 
	padding: 5px 0px; 
} 
 
#townmenu a:hover { 
	background-color: #FFCC00; 
	color: #640000; 
	text-decoration: none; 
} 
 
.boldred { 
	font-weight: bold; 
	color: #640000; 
} 
 
.italic { 
	font-style: italic; 
} 
 
.underline { 
	text-decoration: underline; 
} 
 
.spacer { 
	width: 976px; 
	height: 25px; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: auto; 
	margin-right: auto; 
	background-color: #D7C39B; 
} 
 
.spacerhoriz { 
	width: 187px; 
	font-family: georgia, "times new roman", times, serif; 
	font-size: 18px; 
	font-weight: bold; 
	color: #FFCC00; 
	letter-spacing: -2px; 
	text-align: center; 
	background-color: #640000; 
	display: block; 
	padding: 5px 0px; 
} 
 
.spacervert { 
	width: 177px; 
	font-family: georgia, "times new roman", times, serif; 
	font-size: 18px; 
	font-weight: bold; 
	color: #FFCC00; 
	letter-spacing: -2px; 
	text-align: left; 
	background-color: #640000; 
	display: block; 
	padding: 0px 0px 3px 0px; 
} 

eloquent.blue.knight
eloquent.blue.knight's picture
Offline
Regular
Earth
Last seen: 11 years 37 weeks ago
Earth
Joined: 2009-02-16
Posts: 14
Points: 0

It's alright. The HTML and

It's alright. The HTML and CSS validates so that's good. It looks the same in Firefox and Chrome, (to add to your list)

Suggestion. You don't have to do this, but I reckon the top banner is a little blurry and I think you should have the text in the banner as text not as part of the image

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 11 years 30 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

Thanks for that suggestion;

Thanks for that suggestion; I have been thinking the same thing too... I will probably mess around with it later today Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

The good, the bad, and the ugly

1. YEAHH!! Validation green is what we like to see!

2. Your META data needs some work. It's not SEO friendly.

3. You dont need <div class="spacer"></div> This can be achieved with margins.

4. You dont need <div id="center"> or <div id="navpad"> These tyles can be applied to the UL

5. <span class="spacervert">-----------------------------------</span> This can be a css border.

6. <div id="docpad"><div id="doctext"> You dont need these either.

7. You dont need <div id="footer">, you can just use the IMG tag.

8. You dont need <div id="contact">, this can be a

.

9. <div class="spacer"></div>, this can be margins, you dont need divs for everything. research divitis.

10. With your css, research shorthand css.

11.!important; this should not be used. research specificity.

12. There should be line-height; for the body text, not just the list

14. The layout is strong, good job.

15. Too much eye tracking

16. Your header logo should link back to home page.

17. Is this site done? I found many pages that arent complete, or need alot of help.

19. You already know about the header being blurry.

20. The text in the header image is valuable to search engines. research image replacemen and SEO.

Hope this will help you out some. Good work on the site !!

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 11 years 30 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

CupidsToejam wrote:2. Your

CupidsToejam wrote:

2. Your META data needs some work. It's not SEO friendly.

Yea, I will go research this a bit more...

3. You dont need <div class="spacer"></div> This can be achieved with margins.

I tried using margins on #main, but they ended up being different sizes on IE and FireFox... It was just a few pixles, but for someone with OCD that does not fly Wink

4. You dont need <div id="center">

That is where my background image is stored...

or <div id="navpad"> These tyles can be applied to the UL

Okay, I got rid of this one, but I did have to add "padding: 0px;" into #navmenu...

5. <span class="spacervert">-----------------------------------</span> This can be a css border.

I tried using a regular border but could not get it just right, but I will try it again...

6. <div id="docpad"><div id="doctext"> You dont need these either.

I am not seeing how I can get rid of these... I had to use the DIVs so that I would not have to use padding or boarders, so that way it looks the same on IE and FF...

7. You dont need <div id="footer">, you can just use the IMG tag.

Okay, I got rid of the footer DIV...

8. You dont need <div id="contact">, this can be a

.

Yep, I got rid of this one too...

9. divitis.

LOL :bigoops:

11.!important; this should not be used. research specificity.

I thought this was needed for the IE6 min-height work around?

12. There should be line-height; for the body text, not just the list

It just is not default? I will add it in if you say so...

17. Is this site done?

No.

20. The text in the header image is valuable to search engines. research image replacemen and SEO.

Very good point...

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

4. the image can be applied

4. the image can be applied to the UL

6. padding and borders are cleaner than having pointless divs. You want good clean semantic code.

12. The default line-height is too small. line-height is overlooked far too often. make two pages full of text. add line-height: 1.2; to the second page and tell me which page is easier to read.

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 11 years 30 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

1.2 did not do anything, but

1.2 did not do anything, but how do you think 1.4 looks?
http://www.rememberthebmrr.info/index5.htm

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

you tell me. is it better on

you tell me. is it better on the eyes? I think I use 1.5 usually.

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 11 years 30 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

It did not hurt my eyes on

It did not hurt my eyes on default, so that is why I asked... I tried 1.5 and I think that is just too spaced out...

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 11 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

yeah, the line-height works

yeah, the line-height works with font-size. i use this on my site.

	line-height: 1.6;
	font-size: .8em;

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 11 years 30 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

Well, I have everything

Well, I have everything finished now and I have changed a few things, so if anyone wants to check it again that would be great!

I added some META tags, and I just looked on Google and I am starting to show up there... Now, I happen to use an ampersand when writing the name of a railroad, but I know that some others just use an "and"... Now I always thought that Google did not differentiate between the two, but when I searched for "'Boston & Maine Railroad' 'Somersworth Branch'" I got the site to show up, whereas when I searched for "'Boston and Maine Railroad' 'Somersworth Branch'" it was no where to be found... So, what would be the best way to get around this?

I also took the text out of the image and added it in as an ...