Hi guys. I am creating website for my church and I am using PHP MySQL generated menu. I am having a CSS parsing issues (I guess).
You can see here http://www.maranatha.tv a regular menu list with a nice horizontal layout. This one is a manual list, and not PHP MySQL generated.
However, when I use PHP to generate the list, the menu buttons don’t see to float. In this example I use a menu generated from the database and apply the css class “.nav” to stylize. And just for testing purposes, I put another manual list (test 1, Test 2, Test 3) right next to the DB list and this one floats properly: http://www.maranatha.tv/index02.php
So I guess the issue lies in the way PHP is handling the CSS when importing from MySQL.
Here’s my code:
1) HTML
[code]
<ul class="nav">
<li><?php menu();?></li>
<li><a href="#">test 1</li>
<li><a href="#">test 2</li>
<li><a href="#">test 3</li>
</ul>
</div>[/code]
2) The PHP function used to generate the dynamic menu
[php]function menu(){
echo '<link href="css/jesus_02.css" rel="stylesheet" type="text/css" media="screen"/>';
$query = mysql_query(“SELECT id, linklabel FROM content WHERE showing =‘1’ ORDER BY id ASC”) or die(mysql_error());
// DETERMINE which page ID to USE in our query below ********************************************************************------------------------------
if (!isset($_GET['jesusid'])) {
$pageid = '1';
} else {
$pageid = preg_replace('#[^0-9]#i', '', $_GET['jesusid']); // filter everything but numbers for security(new)
}
$menuDisplay = '';
while ($row = mysql_fetch_assoc($query)) {
$jesusid = $row['id'];
$postLinkLabel = strtolower($row['linklabel']); //strtolower() lowercase buttons
//Prepare to Show and Highlight buttons
if($jesusid){
//SHOW NORMAL STATE BUTTON
$menuDisplay .= '<ul class="nav"><li class="nav"><a href="content.php?jesusid='.$jesusid. '">' . $postLinkLabel. '</a></li></ul><br />';}//EXTERNAL FILE
}
echo $menuDisplay;
}[/php]
3) The CSS
[code].nav ul{ display:inline-block;}
.nav li
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:20px;
padding:4px;
list-style:none;
list-style-type:none;
float:left;
display:block;
}
.nav li a
{
font-family:Arial, Helvetica, sans-serif;
height:30px;
padding:3px;
list-style:none;
list-style-type:none;
text-align:center;
text-decoration:none;
}
.nav li a:hover
{
font-family:Arial, Helvetica, sans-serif;
clear:right;
height:30px;
padding:3px;
list-style:none;
list-style-type:none;
text-align:center;
text-decoration:none;
overflow: hidden;
color:#35A266;
}[/code]
I have played a lot with the css and nothing.
Thanks in advance for your support.