homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Seperate My Header Links

 8:26 pm on Mar 15, 2012 (gmt 0)

In my header_template, All my links are so close together they look like one big link. Can someone tell me what I need to do to separate the links?

<table width="921" align="center" cellpadding="0" cellspacing="0" >
<td width="127" height="55" valign="top"><div align="right"></div></td>
<td width="617">
<div align="center" class="centerlinks">
<p><a href="http://website.com/....
<a href="http://website.com/....
<a href="http://www.websit/...
<a href="http://website.com/...
<a href="http://website.com/...
<a href="http://website.com/...
<a href="http://website.com/...

Thanks in advance,



 12:55 am on Mar 16, 2012 (gmt 0)

You can use CSS to add padding to .centerlinks a - something like this:

.centerlinks a {padding 0 3px;}


 3:17 am on Mar 16, 2012 (gmt 0)

From this snippet of code, I can only see that you have assigned a height of 55 pixels to the cell where you have all those links plus <p>'s within a <div>. If the first cell in a row is "55" the next cell tries to stay within that limit also. It probably can't, but nothing will add space around your links except removing that height="55" part.

To do what you are trying to do would require using nested tables. That is, building a table within each of the table cells that it looks like you are using for a sidebar and page body.

Best suggestion I can offer would be to spend 15 minutes or more every day at w3schools dot com learning how it all works. It is free and makes learning easy.


 1:32 pm on Mar 16, 2012 (gmt 0)

Thanks all...

I enetered &nbsp;&nbsp; at the end of each link and that works for me.



 4:09 pm on Mar 16, 2012 (gmt 0)

Scotty13 **please** don't settle for that solution. :-) Why?

The idea is to separate content from presentation markup. By using the non breaking space, you're putting markup in your content. Same is true by using <br> for line spaces, spacer images in table cells, and a whole list of other workarounds - which is exactly what they are. It bloats your code, makes it hard to maintain, and there are far better tools for the job.

Another reason is that &nbsp; is in effect a text spacing element, and text elements will vary from browser to browser and user to user. It may work for you, but will it work for everyone else? Maybe. Maybe not.

The best suggestion is tedster's offering - use CSS to do it. Another way would be

<table id="nav-table" cellpadding="0" cellspacing="0">


#nav-table { width:921px; margin: auto; }
#nav-table td p a { padding: 0 6px; } /* padding left/right, not top/bottom */

This also removes the deprecated align and width elements for <table>, and you can remove the unnecessary div inside the table cell, further economizing your code.

Best of all is to not use tables for layout (tables are for tabular data, ulse list items or html5 header and nav elements instead), but first things first, baby steps to semantic html . . .

w3schools dot com

But do so with a grain of salt - see post #4388167 [webmasterworld.com]


 8:20 pm on Mar 16, 2012 (gmt 0)

OMG that is the last time I will suggest that place. I did not learn there, but have looked up things there, now know why things were sometimes not doing what they "should" have done. Scary because they have an easy to use interface that lets people learn at their own pace so I have been suggesting them for years. Not any more, thank you rocknbil and WebmasterWorld!


 9:08 am on Mar 17, 2012 (gmt 0)

I tried what you said and it didnít do anything. The script layout youíre seeing is a script I got from some tutorials online.


 3:36 pm on Mar 17, 2012 (gmt 0)

Note even tedster's solution? Something else is wrong, or your browser is caching. Try holding down CTRL and press F5 to force a reload. Another possibility is a CSS selector later in your style sheet is overriding the change.

Anchors are inline elements, and while inline elements don't respond to margin, they will always respond to padding. Use the FireFox extension Firebug to start debugging.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved