...

View Full Version : Adding a nav bar to my site. Need help with code placment.



Snot
11-23-2008, 06:12 AM
Hello

I'm trying to add a navigation bar to the top of my page but I'm having trouble getting it to show up. I don't know if my code is wrong or if i am working in the wrong file. I'm just trying to add 3 or 4 test links in my overall_header.tpl. I must be putting the codes in the wrong place would you mind taking a look at it and see if you can give me an example of what the links should look like?

This is out of my overall_header.tpl file. Its the default code.


<div id="wrapheader">

<div id="menubar"><div class="menubar">

<a href="./ucp.php?mode=logout&amp;sid=92bd7e16327165d6b8b66cd69d237911">Logout [ BossChase ]</a>
&nbsp;|&nbsp;
<a href="./ucp.php?i=pm&amp;folder=inbox"><strong>0</strong> new messages</a>
&nbsp;|&nbsp;
<a href="./faq.php">FAQ</a>

&nbsp;|&nbsp;
<a href="./search.php">Search</a>
&nbsp;|&nbsp;
<a href="./memberlist.php">Members</a>
&nbsp;|&nbsp;
<a href="./ucp.php">User Control Panel</a>


</div>
</div>

This is what that bit of code looks like on my forum.

http://www.gamerunion.com/question.jpg

I would like to add a few links just under the current link bar and just over the logo image. It would look something like this.

http://www.gamerunion.com/question1.jpg

I just don't know what div I need to add code into to get it to work. I have tried adding in this block of code in afew different places but nothing ever changes.


<ul>
<li><a href="/">Home</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/survey/">Survey</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>

Refreshing my screen and purging my cache and still nothing shows up.

Could anyone please give me an example of how the code should be set up to create the links?

Thanks so much for the help!!!

Excavator
11-23-2008, 06:50 AM
Could anyone please give me an example of how the code should be set up to create the links?

Thanks so much for the help!!!


Hello Snot,
Have a look at some examples I have:

one (http://nopeople.com/CSS/2state%20CSS%20navbar/index.html)
two (http://nopeople.com/CSS/menu_buttons_horizontal/index.html)
three (http://nopeople.com/CSS/menu_centered2/index.html)

Just View Source from your browser to get the code, use anything you like.

Snot
11-23-2008, 10:17 PM
Sweet!!!

Thanks for the help I had the code all wrong but now the roll over is even better.

I guess i'm not putting the code in the right place because none of it is showing up.

I have added the in red code to the header


<div id="menubar"><div class="menubar">
<!-- IF not S_IS_BOT -->
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
<!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS -->&nbsp;|&nbsp;
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN -->&nbsp;|&nbsp;
<span style="color: red;">{L_BOARD_DISABLED}</span>
<!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM -->&nbsp;|&nbsp;
<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a>
<!-- ENDIF -->
<!-- ELSEIF S_REGISTER_ENABLED --> &nbsp;|&nbsp;
<a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- ENDIF -->
<!-- ENDIF -->&nbsp;|&nbsp;
<a href="{U_FAQ}">{L_FAQ}</a>
<!-- IF S_DISPLAY_SEARCH -->&nbsp;|&nbsp;
<a href="{U_SEARCH}">{L_SEARCH}</a>
<!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST -->&nbsp;|&nbsp;
<a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>
<!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN -->&nbsp;|&nbsp;
<a href="{U_PROFILE}">{L_PROFILE}</a>
<!-- ENDIF -->
<!-- ENDIF -->
</div>
</div>
<div id="nav_container">
<div id="navbar">

<div id="rollover1"><a href="http://www.gamerunion.com"></a></div>
<div id="rollover2"><a href="http://www.gamerunion.com"></a></div>
<div id="rollover3"><a href="http://www.gamerunion.com"></a></div>
<div id="rollover4"><a href="http://www.gamerunion.com"></a></div>
<div id="rollover5"><a href="http://www.gamerunion.com"></a></div>
<!--end navbar--></div>
<!--end nav_container--></div>
<div id="logodesc">
<table width="100%" cellspacing="0">
<tr>
<td><div align="center"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></div></td>
</tr>
</table>
</div>

and this in red to the style sheet


body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
color: #535455;
width: 1000px;/*
min-width: 650px;*/
font-size: 62.5%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}


#nav_container {
height: 37px;
width: 800px;
margin: 100px auto 0 auto;
}
#navbar {
height: 37px;
width: 500px;
margin: 0 auto;
}
#rollover1 {
height: 37px;
width: 100px;
float: left;
}
#rollover1 a:hover {
background: url(http://www.gamerunion.com/test/home.png) bottom;
}
#rollover1 a {
display:block;
height: 37px;
width: 100px;
background: url(http://www.gamerunion.com/test/home.png) top;
}
#rollover2 {
height: 37px;
width: 100px;
float: left;
}
#rollover2 a:hover {
background: url(http://www.gamerunion.com/test/forum.png) bottom;
}
#rollover2 a {
display:block;
height: 37px;
width: 100px;
background: url(http://www.gamerunion.com/test/forum.png) top;
}
#rollover3 {
height: 37px;
width: 100px;
float: left;
}
#rollover3 a:hover {
background: url(http://www.gamerunion.com/test/contact.png) bottom;
}
#rollover3 a {
display:block;
height: 37px;
width: 100px;
background: url(http://www.gamerunion.com/test/contact.png) top;
}
#rollover4 {
height: 37px;
width: 100px;
float: left;
}
#rollover4 a:hover {
background: url(http://www.gamerunion.com/test/survey.png) bottom;
}
#rollover4 a {
display:block;
height: 37px;
width: 100px;
background: url(http://www.gamerunion.com/test/survey.png) top;
}
#rollover5 {
height: 37px;
width: 100px;
float: left;
}
#rollover5 a:hover {
background: url(http://www.gamerunion.com/test/mailing.png) bottom;
}
#rollover5 a {
display:block;
height: 37px;
width: 100px;
background: url(http://www.gamerunion.com/test/mailing.png) top;
}

#wrapheader {
min-height: 120px;
height: auto !important;
height: 120px;
/* background-image: url('./images/background.gif');
background-repeat: repeat-x;*/
/* padding: 0 25px 15px 25px;*/
padding: 0;
}


I have refreshed everything none of my changes are showing up.

Do you see something i'm missing or am I working in the wrong files? Sorry to post so much code but i'm kinda lost. I dont know much about php or css and thats not helping much.

a link to my site is www.gamerunion.com

thanks so much for looking at this with me

Major Payne
11-24-2008, 12:30 AM
Asked and answer at this forum (http://www.webdeveloper.com/forum/showthread.php?p=953420#post953420), too. :D

abduraooft
11-24-2008, 07:28 AM
a link to my site is www.gamerunion.com

thanks so much for looking at this with me
That link says

General Error
Template path could not be found: styles/IR/template

Snot
11-24-2008, 02:13 PM
Thanks for the help. Yea I noticed that some how my style IR and my style IR_bright are linked together. The style IR_bright uses the same template at the IR style.

I had removed the IR style and that caused the error.

I'm just trying to add the code <h1>TEST</h1> someone around the logo image but no matter where I place it nothing shows up on the site after I refresh the templates.

Any idea what I could be doing?

Thanks again for the help.

Snot
11-24-2008, 05:06 PM
problem solved! Turns out I have two styles that are working together.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum