I just got a new template from 4templates.com, but on the navigation bar thing, the text won't appear on the buttons. If you hold the pointer over a button, I can get the little box to pop up and say whatever, but no text can be displayed on the buttons. Also, if I take off the <b></b> tags, the text will appear below that button, but not on top of it. I didn't want people to steal the template, so I just edited out the part I was having trouble with (I kept the footer in to, I don't know why) and saved it as my index.html. So you can go to www.computer-help-online.com to see it, and if you need the layout.css and default.css files, just let me know. Whoever can get it to display the text to display on the buttons (it should look like www.fpsgaming.us - that's another one I bought from 4templates.com) I will PayPal you $5. EDIT: This is the link for the template so you can get an idea of what the text should look like - http://www.4templates.com/view/sear...XGpmbqA5mIQdWdmWZAEjwMlsu2aBw16LCU/0/AX0264BL
Replace your existing code with this and fix your document, so that the 'a' element closes itself properly (on the top line). http://validator.w3.org/check?verbose=1&uri=http://www.computer-help-online.com/ #main-menu a { display: block; float: left; width: 192px; text-decoration:none; } #main-menu b { padding-left:20px; } Code (markup):
Dude... awesome. I don't know why they are selling mis-coded templates though... So let me know your PayPal email, and is there any way to get the text more vertically-centered? It looks like it's top-aligned right now.
yeah, just add padding-top:7px; margin-top:-7px; Code (markup): To #main-menu a. It's really not the best way, but the template is coded a bit strangly! It should work across browsers.
Hmm... when I did that, it cut off half of the "Homepage" button, but the rest were fine. I guess I'll just leave it with the text towards the top, thanks though. I'm sending your money right now.
I can't link yet to because of my new account here so copy and paste the url for a live example of this navigation in action. http://cmod.sandstonedigital.com/tom/ I would probably up date the code to have a nice css rollover effect like in the link above, soucre code below. Of course to make it work, each section of code would have to go in the right spot in your template files, I just quickly threw it all together in 1 page so you can see the code better. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Computer Help Online</title> <STYLE type="text/css"> <!-- .nava:link {display: block; padding-left: 7px; padding-top: 7px; width: 192px; height: 26px; background-image: url(homepage09.gif); background-repeat: no-repeat; font: 12px Verdana; color: black; text-decoration: none; font-weight: bold; } .nava:visited {display: block; padding-left: 7px; padding-top: 7px; width: 192px; height: 26px; background-image: url(homepage09.gif); background-repeat: no-repeat; font: 12px Verdana; color: black; text-decoration: none; font-weight: bold;} .nava:hover {display: block; padding-left: 7px; padding-top: 7px;width: 192px; height: 26px; background-image: url(homepage10.gif); background-repeat: no-repeat; font: 12px Verdana; color: #6666CC; text-decoration: none; font-weight: bold;} .holder { position: relative; } --> </STYLE> </head> <body> <div id="holder"> <ul> <a href="#" class="nava" accesskey="1" title=""><b>Homepage</b></a> <a href="#" class="nava" accesskey="2" title=""><b>Hardware Reviews</b></a> <a href="#" class="nava" accesskey="3" title=""><b>Software Reviews</b></a> <a href="#" class="nava" accesskey="4" title=""><b>Tutorials</b></a> <a href="#" class="nava" accesskey="5" title=""><b>Downloads</b></a> <a href="#" class="nava" accesskey="6" title=""><b>Contact Us</b></a> </ul> </div> </body> </html>