How can I clean my site?

[Mr_Threepwood]

Alright, I just finished a new version of my website and put it up at www.thescurvyshack.com

Here's some things that bug me about the site:

1. As I was writing it I felt like I had to put a lot of junk in to get the spacing right, like all of the <br /> that are everywhere.

2. For some reason the jolly roger picture won't line up with the rest of the link bar.

3. How do I get it to now say /index in the adressbar when you click on the home link, I want it to just be www.thescurvyshack.com

4. I tried to use the wc3 html validator and failed because it says I shouldnt use id's more than once per page, how else would I get around this then so I can pass the validation?

5. Any more suggestions on ways to improve it would be welcome, there's a couple swears in the articles in case anyone's going to be offended.

[KDLA]

1. Your content should be your first priority. Don't put extraneous stuff in there just to get the design right. Instead, put max-height/min-width/etc. in the CSS to achieve the design.
2. Try setting the margin/padding style to zero for the image.
3. To do that, you need to place an absolute address, rather than relative, in the link's coding. But, you'll get better search engine indexing with usage of the index link, since many search engines search out index.htm links.
4. Change the IDs you use repeatedly to classes in the CSS. A simple find and replace should help you change the references to them in the site/HTML.
BTW - don't change coding just to "get around" validating. The aim of validating coding to make it standard, not just to make it "appear" standard for the test.

KDLA

[ray326]

rm -rf should clean 'er up fine. ;)

[Mr_Threepwood]

What do you mean "rm -rf" what's that?

Also I tried setting the margin and the padding on the image for 0 but it wouldnt work, I set the margin to -5 and it sort of worked, any ideas?

[KDLA]

Really, the images in your nav shouldn't be part of the list. The list is intended for items relevant to the navigation, not decorative elements.

<img src="Images/RogerVersion2.gif" alt="Jolly Roger" width="160" height="100" style="margin-bottom: 0; padding-bottom: 0;/>
<ul style="margin: 0 auto; padding-top: 0; padding-bottom: 0;">
<li><a href="index.html">Home</a></li>
<li><a href="Articles.html">Articles</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
</ul>
<img src="Images/BottomOfLinks%20copy.gif" alt="Bottom Of Links" width="160" height="40" style="margin-top: 0; padding-top: 0;"/>

[Mr_Threepwood]

Alright KDLA I took your advice and I took the images out of the list. Now it displays right in Firefox but not in IE (I havnt uploaded it yet though), what the heck is going on?

Do browsers not like to have stuff so close to ul tags? Should I just ditch the whole list and instead make 4 div tags, one for the main sidebar, one for the header, one for the links and one for the footer?

Also just for the record, what do most people with really nice looking sites use to make them like that? I'm not talking about the people who just take stupid templates and use them, but some of the cleaner looking ones. Do they go above just html and css and use php and javascript or something like that?

[KDLA]

IE has issues -- if it looks right in Fx, you're on the right track!!
It's hard to say what the issue might be, without seeing the page.

You just need to tweak your styles to work with the <ul> - it's not that browsers don't like unordered lists, there's just more to work with there. You might need to add margin and padding settings OR just line-height to your <li> elements within the list, too.

<li style="line-height: 1em; margin-top: 0; margin-bottom: 0;"><a href="index.html">Home</a></li>
Just play with it. You've lots of things you can style: <ul>, <li>, and <a>. Don't give up just yet! ;)

KDLA

[ray326]

What do you mean "rm -rf" what's that?It's a *nix command for "delete everything from here on down."

[Mr_Threepwood]

This is crazy I can not figure it out, here's some stuff I put in my code just to do a test:


<div id="NavBar">
<img src="../Images/BottomOfLinks copy.gif" alt="Bottom Of Links" width="160" height="40" />
<img src="../Images/BottomOfLinks copy.gif" alt="Bottom Of Links" width="160" height="40" />
<img src="../Images/Roger2EditedBlackBack.jpg" alt="Jolly Roger" width="160" height="100" vspace="0"/>
<img src="../Images/RogerVersion2.gif" alt="Jolly Roger" width="160" height="100" vspace="0"/>
<img src="../Images/BottomOfLinks copy.gif" alt="Bottom Of Links" width="160" height="40" />
</div>


In firefox it displays right, however in stupid IE it's messed up and puts gaps between them, and I can't figure out why.

The attachment is what it looks like in IE.

[Austin8159]

i would just revert and use a table inide the div, make each of the images have their own tr and td, and make cellspacing and cellpadding both zero. it works on all of my html site designs if i cant get them to work any other way. hope it works out

[ray326]

#NavBar img { display:block }