Home/ Questions/Q 6877473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:36:17+00:00

I’m trying to create a php navigation bar. I’ve come up with a nice

  • 0

I’m trying to create a php navigation bar. I’ve come up with a nice looking scheme using the following code:

css:

a.navbar:link    { color:#AAAAFF; text-shadow:none; 
             padding: 5px 12px; white-space:nowrap; font-size:15px;}
a.navbar:visited { color:#AAAAFF; text-shadow: #4444FF 0.0px 0.0px 2px}
a.navbar:hover   { color:#CCCCCC; background:#444488;  } 
a.navbar:active  { color:grey; }
a.navbar {padding:none; font-size:15px;}

span.leftbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; right:-9px;  bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; left:-9px;  bottom:-3.75px;}

php:

<?php
echo "<center>";
$links = array('Home'=>'index.htm', 'Site Map'=>'sitemap.htm');
$leftbrace = "<span class=leftbraces>[</span>";
$rightbrace = "<span class=rightbraces>]</span>";
foreach ($links as $key => $value) {
    echo "$leftbrace<a class=navbar href=\"$value\">$key</a>$rightbrace";
}
echo "</center>";
?>

and html:

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<?php include 'navbar.test.php';?>
</html>

How can I eliminate the space between the braces without giving up the nice tightly-fitting background padding? The <table> tag I’ve included is not necessary, it was just my latest attempt to get this to work.

screenshot showing spacing issue

[ Home ] I want to get rid of this space [ Site Map ]

screenshot showing highlighting

but I want to keep the tight fit of the highlighting

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a better way of doing it:

    The list of links in your navigation is just that— a list. Instead of using a table, use ul, or unordered list. In my example, I also used the nav element, which is HTML5. You could easily replace it with a div.

    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Site Map</a></li>
</ul>

    Notice, I did not include the brackets in the markup. This is on purpose. Those brackets do not add to the content or meaning of the site, and should be in the domain of CSS.

    This is easily done with pseudo elements:

    nav a:before {content:'['; display:inline;}
nav a:after {content:']'; display:inline;}

    You will lose some support with older versions of IE, but everyone, including IE users—and especially those using screen readers or with other accessibility issues—will benefit from the removal of superfluous spans. It will also degrade gracefully.

    Here is a demo.

    • 0