I recently made major content changes to my home page. If any of you could visit and examine it make sure I didn’t make any mistakes. Take a look at the header. I put “Serving North…” there and I’m hoping it didn’t mess things up. It was fine in IE8 and FireFox. Also, do I have h2s and h3s done properly? I can’t get image on the h2 to be on the line like you see on h3. Any suggestions for improvement would be helpful. This is just for main page.
Yeah, the header is a bit broken. First thing to do is remove the right padding on the UL, as it does nothing but is causing the contact div to drop down:
#header ul {
float: left;
list-style: none outside none;
margin: 8px 0 0;
padding: 5px [COLOR="#FF0000"]0[/COLOR] 0 64px;
}
The <p> is pushing itself down because of default margins, so remove them with this:
#contact p {margin:0;}
OK, you may want to add a bit of margin in again, so play with those settings until you’re happy. E.g.
#contact p {margin:10px 0 0 0;}
The header could also use some bottom padding:
#header {padding-bottom: 15px;}
Thanks a lot, ralph. I don’t know what this forum would do without you. I just made your changes. Please check it out for me. I dont’ have IE9 as I’m still on XP. Looked fine in IE8 and Firefox.
Glad that helped! Looks fine in IE9. Here’s a screen shot:
If anything, I’d maybe put a couple more pixels margin on top of the <p>, but that’s a minor thing.
Without Ralph, this forum would degenerate into a Project Runway celebrity slobber and flame pit. 
You might want to reconsider having those mailto links for your email address; you’re putting the “Welcome” sign out for spammers to flood your inbox.
You’re really making progress. It’s fascinating to watch the development process take place on your site. Nice work!
Yes, good point, although it may be too late. One thing you can do is obfuscate the email address, so that it looks normal to viewers, but bots won’t see it. You can take your code, such as
E-mail: <a href="mailto:me@mysite.com" class="email">me@mysite.com</a>
and replace it with the spaghetti code that you get back from this service. Only downside is that people with JS off won’t see the email address, but meh, there are other contact details.
Thanks for the screen shot, ralph. That was very helpful. Do you mean to increase it in the #header ul?
Also, could you guys please take a look at the new sidebar paragraph I put in tonight? I know this is not right. The top question should have an “h3” right? I tried that, but couldn’t get it right. I also tried putting an ordered list, and that created a space. If you could please take a look at that I would appreciate it. I put 50 pixels space between image and new paragraph. Wonder if that is too much.
Hope to hear from you guys soon!
Thanks for the kind words, Black Max. It’s really the both of you saving the day. I get the most help from both of you. You’ve both been there when I needed the help. So glad you are still around more than a year and a half later.
The email thing… I will have to look into that. So far, I haven’t had a problem with it. What I have had trouble is is with the contact form. People spam that, but not very often. It’s happened only a few times. When it happens, it’s quite a let down! Because I think it’s a new potential client contacting me.
No, I mean change this
#contact p {
margin: 10px 0 0;
}
to something like this
#contact p {
margin: [COLOR="#FF0000"]12px[/COLOR] 0 0;
}
please take a look at the new sidebar paragraph I put in tonight? I know this is not right. The top question should have an “h3” right?
This is a job for CSS! Firstly, get your HTML right:
<div class="walks">
<h3>Why are Daily Dog Walks important?</h3>
<ol>
<li>An exercised dog is a fit and well behaved dog.</li>
<li>Dog walks introduce mental stimulation too. It's just as important for your dog as physical exercise.</li>
</ol>
<p><a class="textlink" href="http://www.nkdogwalking.com/contact.html">Contact me about my dog-walking services</a>.</p></div>
Then do something like this with your CSS:
.walks {
background-color: #FAEBC7;
border-color: #FC6512;
border-style: solid dotted dotted;
border-width: 20px 1px 1px;
margin-top: 70px;
padding: 10px 20px;
}
.walks h3 {
background: none repeat scroll 0% 0% transparent;
border: medium none;
color: black;
font-family: verdana;
font-size: 15px;
font-weight: bold;
padding: 0pt;
margin: 0;
}
.walks ol {
list-style: decimal inside none;
margin: 20px 0pt;
padding: 0pt;
}
.walks li {
margin-bottom: 20px;
}
What I have had trouble is is with the contact form. People spam that, but not very often. It’s happened only a few times. When it happens, it’s quite a let down! Because I think it’s a new potential client contacting me.
Get used to it. 95% of all my contact messages are spam. 
Hi ralph. Thanks so much for your fixes. I just implemented the changes. Almost done with this part. Something messed up with the footer when I made these changes. See how it expanded? Is that an overflow: hidden fix? Also, why isn’t that link prettied up even though I have the correct code in there? It’s blue. And the mailto hyperlink now turned blue. It should be like the one in the header.
EDIT: I can see why the link isn’t prettied up now. Sidebar falls outside of the content which is where I have the links prettied up for. I need to put a comma after each Content a. So it would be Content, #sidebar a {
I think an extra closing div tag has gotten in there. Go into the HTML and delete the tag in red and see if that fixes it. An extra closing div tag has caused the footer to jump outside of the wrapper.
<p><a href="http://www.nkdogwalking.com/contact.html">Contact me about my dog-walking services</a>.</p>[COLOR="#FF0000"]</div>[/COLOR]
Very good eye, ralph. I remembered doing that… I like to put them as “end of sidebar div”. I think that came from the Llloyd book. That fixed it, althought it wasn’t showing “red” in Notepad++.
I tried adding the sidebar to content. That made all the text go green. I don’t really have to copy all the a: link code and double it for the sidebar do I? Just to make that one link pretty.
I’m not sure what you mean by that. What are you trying to do?
You see how that link under “Dog Walking Benefits” is blue? For whatever reason it’s not prettied up like the other links. In my code, I have all the CSS for the links under “Content”. I thought that I could simply add “#sidebar” to “Content, #sidebar” but it didn’t work. So there must be something else I need to do… unless I made an error somewhere.
I’m not sure how you added that. Did you try changing
#content a
to
#content a, #sidebar a
That should work. You’ll need to do the same for a:visited, a:hover, etc. e.g.
#content a:visited, #sidebar a:visited
Or, if you intend this style to be applied to everything in #main, use that selector alone. i.e. #main a etc.
Yes, but the #sidebar is not inside the Content div, so the rule can’t apply to anything inside the #sidebar div. As Victorinox said, just change
#[COLOR="#ff0000"]content[/COLOR] a {
border-bottom: 2px solid #FF6600;
color: #6B8E23;
font-weight: bold;
text-decoration: none;
}
to
#[COLOR="#FF0000"]main[/COLOR] a {
border-bottom: 2px solid #FF6600;
color: #6B8E23;
font-weight: bold;
text-decoration: none;
}
Thanks you guys! Wow. That did the trick. That was such a fundamental basic change. I shouldn’t have had to wrack my brain over this. I’m really out of the loop now.