...

View Full Version : problem styling navbar with css and php current page indicator



187OnYoAss
11-06-2011, 09:50 PM
Hey,

I can't wrap my head around this, not sure where to look to fix the problem
So if someone here can point me in the right direction it's greatly appreciated.

The "problem" is that in the menu bar, it indicates the current page but doing so, in every possible way I try to style the menu bar there is no space between the "current" tab and the tab next to it on the right.
also using a background image I can style every tab the same, except for the one that is marked as "current" by the php code. I must be overlooking something?


My html/php code:



<div id="navbar">
<ul>

<?php
if ($thisPage=='home')
{echo '<li class="here">Home';}
else
{echo '<li><a href="/">Home</a>';}?> </li>

<?php
if ($thisPage=='News')
{echo '<li class="here">News';}
else
{echo '<li><a href="/">News</a>';}?> </li>

<?php
if ($thisPage=='Archives')
{echo '<li class="here">Archives';}
else
{echo '<li><a href="/">Archives</a>';}?> </li>

<?php
if ($thisPage=='Files')
{echo '<li class="here">Files';}
else
{echo '<li><a href="/">Files</a>';}?> </li>

<?php
if ($thisPage=='Contact')
{echo '<li class="here">Contact';}
else
{echo '<li><a href="/">Contact</a>';}?> </li>

<?php
if ($thisPage=='Chat')
{echo '<li class="here">Chat';}
else
{echo '<li><a href="/">Chat</a>';}?> </li>

<?php
if ($thisPage=='Forums')
{echo '<li class="here">Forums';}
else
{echo '<li><a href="/">Forums</a>';}?> </li>
</ul>
</div>


The .css



#navbar {
clear: both;
font: Arial,Helvetica,sans-serif;
}
#navbar ul {
list-style: none outside none;
margin: 0;
padding: 0;
width: 1000px;
text-align: center;
}

#navbar li, #navbar ul li.here {
display: inline;
margin: 0;
padding: 0;
}

#navbar a, #navbar ul li.here {
color: #FFFFFF;
display: inline;
padding: 10px 45px;
width: 40px;
text-decoration: none;
text-align: center;
}
#navbar a:hover {
background-color: red;

}
#navbar ul li.here {
background-color: #859292;
color: black;

}



Hope I stated my problem clearly enough, Thanks in advance

MJ

hawaiiwebdesign
11-06-2011, 09:51 PM
.here{padding: 10px 45px;display:block}

hawaiiwebdesign
11-06-2011, 09:52 PM
FYI... it is bad practice to use nameID and elements... so ditch the ul li if you are just trying to style #navbar .here

187OnYoAss
11-06-2011, 10:01 PM
FYI... it is bad practice to use nameID and elements... so ditch the ul li if you are just trying to style #navbar .here

Thanks, will sort that out!

Excavator
11-06-2011, 11:39 PM
FYI... it is bad practice to use nameID and elements... so ditch the ul li if you are just trying to style #navbar .here


Thanks, will sort that out!

Good advice. Here's one explanation why - https://developer.mozilla.org/en/Writing_Efficient_CSS



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum