Javascript PHP or CSS Issue in the Navagation Bar? HELP

harshgraphics · March 21, 2012

Hello!

I am a Designer trying to make changes to an existing website in Dreameaver that was coded in PHP. The Client would like to add 2 additional Pages, thus adding two tabs to the navigation bar. But the art keeps showing up jumbled on the screen.

Here is what I have done so far:

1) I added the code to the index page to include the 2 new pages see below:

2) I added the 2 new pages

3) I modified the navigation art to include the 2 additional pages and changed the css to accommodate for the new width.

<head>

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

<!--[if IE]>

<![endif]-->

<!--[if lte IE 6]>

<![endif]-->

$().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>

<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;

}

#home #content_wrapper #main_content #top_nav ul li .home span {

color: #FFF;

}

</style>

</head>

<div id="head_wrap">

<?php include ('header.php'); ?>

</div>

<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></a></li>

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

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

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

</ul>

</div>

Css:

#nav a.selected{

border: 2px dashed #00FF00;

}

#nav {

/* margin: 0 auto 50px auto;*/

width: 640px;

min-height: 110px;

text-align: center;

/*background-color: #999999;*/

list-style: none;

padding-left:5px;

position:relative;

}

#nav li {

margin-right: 5px;

width: 155px;

height: 110px;

position: relative;

float: left;z-index:23;

/* background-color: #cccccc;*/

}

#nav a {

margin: 0 auto;

width: 134px;

height:89px;

/* text-indent: -9999px;*/

text-decoration: none;

overflow: hidden;

/*background-image: url(../images/yo.png);

background-repeat:no-repeat; */

/* background-color: #00FF00;*/

display: block;

position: relative;

z-index: 9;

outline:none;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border: 1px solid #44045f;

}

Dynamicpage.js

$(function() {

var newHash = "",

$mainContent = $("#pkg-content"),

$pageWrap = $("#pkg-wrap"),

baseHeight = 0,

$el;

$pageWrap.height($pageWrap.height());

baseHeight = $pageWrap.height() - $mainContent.height();

$("#nav").delegate("a", "click", function() {

window.location.hash = $(this).attr("href");

return false;

});

$(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

if (newHash) {

$mainContent

.find("#pkginfo")

.fadeOut(200, function() {

$mainContent.hide().load(newHash + " #pkginfo", function() {

$mainContent.fadeIn(200, function() {

$pageWrap.animate({

/* height: baseHeight + $mainContent.height() + "px"*/

});

$("nav a").removeClass("current");

$("nav a[href=+newHash+]").addClass("current");

});

};

});

$(window).trigger('hashchange');

});

Mahngiel · March 21, 2012

There's no way anybody is going to look through that shitstorm of code you just pasted. Please wrap what is only needed in code tags, then tell us what the problem is, what you think should happen, what's not happening, and what you've tried.

Thanks

UrbanDweller · March 22, 2012

By the way im pretty sure search engines like google/yahoo dont use meta keyword anymore.

harshgraphics · March 22, 2012

Sorry about all of the code. When I posted screen shots on a PHP board before I got shit for not posting any code.

Again: I did not write the code for the site original and I am NOT asking anyone to write it for me (just asking for advice.

I can make my own navigation bars and import them from fireworks but the existing site is all in PHP I am trying to modify the code to add 2 additional tabs links, testimonials and staff.

Here is what I did :

<ul>

<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>

I then modified the art to include the two additional tabs and imported it into the folders and added the new pages. SEE ATTACHED

I modified the css to the larger width to accommodate the art.

The art is showing up stacked and funky and I don't know what I am doing wrong. I must be missing some other code to change somewhere else??

What I want is to add the 2 tabs and have them work like the 4 others do now.

The screen should have 5 navigational tabs

harshgraphics · March 22, 2012

Here is what it looks like and why I am asking for help (attached)... :shrug: :confused: PS thank you for all of the insults I am enjoying them. Shitstorm made me lol. :-*

Mahngiel · March 24, 2012

try saying: this is my html (post relavant code), this is my css (post relevant code) and this is the js (post relavant code), this is what's happening, and explain what you expect / want to happen. that usually helps readability and help.

Two things I noticed: Your html defines your navigation list as #top_nav, your css styles #nav. and (i don't do JS well) but this could be your culprite:

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];}
}

Sign In

Javascript PHP or CSS Issue in the Navagation Bar? HELP

Recommended Posts

harshgraphics

Link to comment

Share on other sites

Mahngiel

Link to comment

Share on other sites

UrbanDweller

Link to comment

Share on other sites

harshgraphics

Link to comment

Share on other sites

harshgraphics

Link to comment

Share on other sites

Mahngiel

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information