Front page side menu...

[WoodiE55]

I was looking around vbulletin-faq and reading different articles and such when I cam to the front page and noticed how it was coded. One thing that stuck out was the side bar with all the links which is coded used P, IMG, A HREF, and BR tags. In the readings I've done online and in books this is a messy way of coding and not nearly as SEO friendly either considerings none of the images use ALT tags and none of the links use TITLE tags. So I just took about 3mins to create an example sidebar using the same links but making it more SEO friendly and making it cleaner code.

PLACE IN YOUR CSS SHEET:

#secondarynav p {
padding: 12px 3px 2px 3px;
margin: 0;
}
#secondarynav ul {
margin: 0;
padding: 0;
list-style: none;
}
#secondarynav li {
background: url('images/navbits_finallink.gif') no-repeat left;
padding-left: 11px;
}


PLACE WHERE YOU WANT THE SIDEBAR:

<div id="secondarynav">

<p><strong>vBulletin FAQ Navigation</strong></p>
<ul>
<li><a href="http://www.vbulletin-faq.com/forum/" title="Our vBulletin Forum">Our vBulletin Forum</a></li>
<li><a href="http://www.vbulletin-faq.com/forum/search.php?do=getdaily" title="Today's Posts">Today's Posts</a></li>
<li><a href="http://www.vbulletin-faq.com/forum/news.php" title="vBulletin News">vBulletin News</a></li>
<li><a href="http://www.vbulletin-faq.com/reviews/" title="vBulletin Services Directory">vBulletin Services Directory </a></li>
</ul>

<p>Getting Started</p>
<ul>
<li><a href="http://www.vbulletin-faq.com/vbulletin-basics.htm" title="vBulletin Basics">vBulletin Basics</a></li>
<li><a href="http://www.vbulletin-faq.com/domain-name.htm" title="Domain Names">Domain Names</a></li>
</ul>

</div>


Granted this could still be improved by applying more CSS to the font size and type and so on, but at least this allows you to get the picture and see the end result.

Any ways just my two cents, thought someone here at vBulletin-FAQ might consider it.



-Michael

[Coder1]

In fact, the entire front page needs some work to address validation problems (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vbulletin-faq.com%2F).

[WoodiE55]

tgreer,

OMG how did I miss that. I'm such a validation nut here lately that, thats usually one of the first things I do when I visit a site. Anyways nice catch.


For as simple as the front page is maybe a xHTML/CSS page would do better then a table designed page?!



-Michael

[WoodiE55]

Ohh by the way - looks like a good part of those errors are due to the side menu as pointed above. The images have no ALT text.



-Michael

[Joeychgo]

I never claimed to be a good coder -- :)

How is that? I made the suggested changes




For as simple as the front page is maybe a xHTML/CSS page would do better then a table designed page?!



I use dreamweaver and a template system - So I can update all those pages easily.

[WoodiE55]

Joey,

Looking better, however in order to have your bullet graphic display you need to change the CSS I gave you..


#secondarynav li {
background: url('images/navbits_finallink.gif') no-repeat left;
padding-left: 11px;
}


The part in BOLD change to the path of that gif file and then it will display on the front page!



-Michael

[Coder1]

Ta-Da!

[Joeychgo]

Joey,

Looking better, however in order to have your bullet graphic display you need to change the CSS I gave you..


#secondarynav li {
background: url('images/navbits_finallink.gif') no-repeat left;
padding-left: 11px;
}


The part in BOLD change to the path of that gif file and then it will display on the front page!



-Michael


Ok - that doesnt look right

[WoodiE55]

Joey,

In that same section of CSS see where is says padding-left: 6px; - Increase the px amount until your text is moved over.


-Michael

[Joeychgo]

OK - how we doing now?

[WoodiE55]

PERFECT!

Now if it was me I'd keep going and work on getting the front page to be at least xhtml 1.0 transitional.


-Michael