PHP NAVIGATION HELP

[harshgraphics]

I need help making changes to php navigation script. I need to add two new pages to the site and the old nav bar is a .jpeg  the spacing is off and not showing up correctly.  I am used to programming in html. HELP! 

 

I can't figure out if it is a css issue or a php issue.

 

Can you help me ?

[gizmola]

At the risk of stating the obvious, php is a servserside language.  It generates HTML.  So the answer is probably that it is both a php and an html problem, but if we are to assume that code works fine until you attempt to add to the menu, it's probably more of a design issue, in that the code is either not designed to allow for additional menus, or there is style sheet positioning issues that cause things to go pear shaped when you attempt to add elements that force things beyond the constraints of the positioning.

 

With that said, you have provide no code for anyone to look at, so it's impossible to do anything but guess.

[harshgraphics]

Attached is the original source code index.php page for the site.

Here is what I did:

 

1) I added additional code to the links where I wanted to add pages.

<div id="top_nav">

                <ul>

                    <li><a class="home" href="index.php"><span>HOME</span></a></li>

                    <li><a class="about" href="about.php"><span>ABOUT</span></a></li>

                    <li><a class="packages" href="packages.php"><span>PACKAGES<span></span></span></a></li>

                    <li><a class="testimonials" href="testimonials.php"><span>TESTIMONIALS<span></span></span></a></li>

                    <li><a class="staff" href="staff.php"><span>STAFF<span></span></span></a></li>

                    <li><a class="contact" href="contact.php"><span>CONTACT</span></a></li>

                </ul>

2) I modified the top_nav.jpeg art to include the additional links, testimonials and staff

3) I changed the css

 

Also I am working in dreamweaver.

 

I hope this helps you so you can help me.

Thank you in advance.

17835_.php

[QuickOldCar]

In your styles.css file you have #top_nav width set to 498px, which is most likely the size of your old image.

 

I see that your new image is 648px width.

 

Edit that and see if the nav image will fit, If not you will have to split your navigation into 2 with 2 images.

 

 

[harshgraphics]

I have confirmed that the width is correct. There are several java script files also attached also. I think this is the code that applies to the navigation bar:

 

Here is what Firebug shows as all of the code could it be any of the javascript?:

 

<title>Welcome to Life's First Impressions ~ Elegant Wedding, Corporate, & Professional Event Consulting and Design ~</title>

<!--start.stylesheets-->

<!--[if !IE 6]><!-->

<link rel="stylesheet" type="text/css" media="screen, projection" href="css/styles.css" />

<link rel="stylesheet" type="text/css" media="screen, projection" href="css/coda-slider-2.0.css" />

<!--<![endif]-->

<!--[if IE]>

<script type="text/javascript" src="js/html5.js"></script>

<link rel="stylesheet" type="text/css" href="css/ie_styles.css">

<![endif]-->

<!--[if lte IE 6]>

<script type="text/javascript" src="js/unitpngfix.js"></script>

<link rel="stylesheet" type="text/css" media="screen, projection" href="css/ie6_styles.css" />

<![endif]-->

<!--end.stylesheets-->

<!--start.JavaScript-->

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript" src="js/jquery.innerfade.js"></script>

<script type="text/javascript">

$().ready(function() {

$('#coda-slider-1').codaSlider({

autoSlide: true,

autoSlideInterval: 10000,

autoSlideStopWhenClicked: true

});

$('ul#top_fade').innerfade({

speed: 2000,

timeout: 7000,

type: 'sequence',

containerheight: '253px'

});

});

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

<!--end.JavaScript-->

<style type="text/css">

td img {display: block;}td img {display: block;}

div {

font-family: Verdana, Geneva, sans-serif;

nav-right: auto;

color: #FFF;

font-size: 10px;

}

</style>

</head>

<body class="coda-slider-no-js" id="home" onload="MM_preloadImages('images/topnav_r2_c2_s2.png','images/topnav_r2_c3_s2.png','images/topnav_r2_c4_s2.png','images/topnav_r2_c5_s2.png','images/topnav_r2_c6_s2.png','images/topnav_r2_c7_s2.png')">

<!--start.HEADER-->

<div id="head_wrap">

<div id="head_container">

<div id="header">

<div id="lfi_head">

<a href="index.php"><span>Life's First Impressions</span></a>

</div>

<noscript>

<div>

<h1>JavaScript Disabled!</h1>

<p>For the best functionality of our site, please make sure you have JavaScript capabilities enabled in your browser. This may be the result of two possible scenarios:</p>

<ol>

<li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of <a href="http://www.getfirefox.com">Firefox</a>.</li>

<li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site.<a href="http://www.google.com/support/bin/answer.py?answer=23852">Learn how to enable JavaScript</a>.</li>

</ol>

</div>

</noscript>

<div id="flowers_1">

</div>

<ul id="top_fade">

<li><img src="images/header/cards.jpg" alt="" /></li>

<li><img src="images/header/balcony.jpg" alt="" /></li>

<li><img src="images/header/starcake.jpg" alt="" /></li>

<li><img src="images/header/party.jpg" alt="" /></li>

<li><img src="images/header/couple.jpg" alt="" /></li>

<li><img src="images/header/aisle.jpg" alt="" /></li>

</ul>

</div><!--end.header-->

</div><!--end.head_container--> </div><!--end.head_wrap-->

<!--end.HEADER-->

<!--start.CONTENT-->

<div id="content_wrapper">

<div id="main_content">

<div id="top_nav">

<ul>

<li><a class="home" href="index.php"><span>HOME</span></a></li>

<li><a class="about" href="about.php"><span>ABOUT</span></a></li>

<li><a class="packages" href="packages.php"><span>PACKAGES<span></span></span></a></li>

<li><a class="testimonials" href="testimonials.php"><span>TESTIMONIALS<span></span></span></a></li>

<li><a class="staff" href="staff.php"><span>STAFF<span></span></span></a></li>

<li><a class="contact" href="contact.php"><span>CONTACT</span></a></li>

</ul>

</div><!--end.top_nav-->

 

I've attached what the navigation bar looks like tonight.