Scratch

muppetds · 2012-07-30 13:16:39

I recently made navigation bar from css and html
but the problem is that the the html code needs to be updated EVERY time for every page i add
Im wondering if there is another way of making a navigation bar thats easy to update

funelephant · 2012-07-30 13:23:20

I don't think so...

But just use copy and paste tongue

veggieman001 · 2012-07-30 13:27:03

Make all of the files have the .php extension and then do this

Code:

<?php
require_once("header.php")
?>

or something of the sort.

muppetds · 2012-07-30 13:36:52

i dont know php sad

funelephant · 2012-07-30 13:38:22

muppetds wrote:
i dont know php

It's basically HTML just with more stuff.

GP1 · 2012-07-30 13:39:13

veggieman001 wrote:
Make all of the files have the .php extension and then do this
Code:
<?php
require_once("header.php")
?>
or something of the sort.

Yes, thats what I use. You need a web server with PHP, though. Most free servers support this. You can make another file, footer.php, that would include something like:

Code:

<div id="footer">
<!-- footer stuff here -->
</div>
</body>
</html>

And include it in the same way.

Its reusing code. It saves space on your server.

muppetds · 2012-07-30 13:43:53

hmm

can someone modify this code as a example please

What i have so far

HTML code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr"><head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Programming Language Tutorials</title>

  
<link rel="stylesheet" href="style.css" type="text/css">
  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-33739026-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script></head><body style="background-color: rgb(235, 235, 235);">&nbsp;

<ul id="menu1" class="topmenu">

  <li class="topmenu"><a href="index.html" style="height: 15px; line-height: 15px;">Home</a></li>
  <li class="topmenu"><a href="tutorial.html" style="height: 15px; line-height: 15px;"><span>Tutorials</span></a>
    <ul>
      <li class="sublast"><a href="scratch.html"><span>Scratch</span></a>
        <ul>
          <li class="sublast"><a href="scratch1.html">Basic Window
Layout</a><br>
            <br>
          <br>
            <br>
            <br>
            <br>
</li>
        </ul>
        <br>
        <br>
      <br>
        <br>
        <br>
        <br>
</li>
    </ul>
  </li>
    
  <li class="topmenu"><a href="/forums/index.php" style="height: 15px; line-height: 15px;">Forums</a></li>

</ul>


<br>
TEST

</body></html>

CSS code:

Code:

ul#menu1,ul#menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#000000;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;box-shadow:1.4px 1.4px 2px #B1B1B1;background-color:#202020;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;padding:0;}
ul#menu1 li:hover>*{
    display:block;}
ul#menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#menu1 li:hover{
    z-index:1;}
ul#menu1 ul ul{
    position:absolute;left:100%;top:0;}
ul#menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:6px 6px 6px 0;
    *display:inline;}
* html ul#menu1 li a{
    display:inline-block;}
ul#menu1>li{
    margin:0 0 0 6px;}
ul#menu1 ul>li{
    margin:6px 0 0;}
ul#menu1 a:active, ul#menu1 a:focus{
    outline-style:none;}
ul#menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#menu1 ul li{
    float:none;margin:0;}
ul#menu1 ul a{
    text-align:left;}
ul#menu1 li:hover>a,ul#menu1 li a.pressed{
    background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#menu1 ul span{
    background-image:none;padding-right:8px;}
ul#menu1 li.topmenu>a{
    background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#menu1 li.topmenu:hover>a,ul#menu1 li.topmenu a.pressed{
    background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
ul#menu1 li.sublast>a{
    border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}

veggieman001 · 2012-07-30 13:50:15

muppetds wrote:
i dont know php

I just gave you the only PHP code that you'd need.

muppetds · 2012-07-30 13:52:07

veggieman001 wrote:
muppetds wrote:
i dont know php
I just gave you the only PHP code that you'd need.

oh ok ill give it a go

BirdByte · 2012-07-30 14:01:00

To my knowledge you don't need to know PHP; you can just use

Code:

<?php
require_once("nav.html")
?>

and change header.html to the location of the file that contains your nav's code. Now just edit that and your whole website'll update. big_smile

muppetds · 2012-07-30 14:27:01

Yay it worked I think
Thanks everyone

veggieman001 · 2012-07-30 14:33:59

BirdByte wrote:
To my knowledge you don't need to know PHP; you can just use
Code:
<?php
require_once("nav.html")
?>
and change header.html to the location of the file that contains your nav's code. Now just edit that and your whole website'll update.

...I just said that.

chanmanpartyman · 2012-07-30 14:40:32

veggieman001 wrote:
BirdByte wrote:
To my knowledge you don't need to know PHP; you can just use
Code:
<?php
require_once("nav.html")
?>
and change header.html to the location of the file that contains your nav's code. Now just edit that and your whole website'll update.
...I just said that.

I think BirdByte was trying to simplify yours, because you were requiring a .php and he wanted to make it clear you could also require .html files.

LS97 · 2012-07-30 17:05:31

Nothing to do with the original purpose of the thread, but it's a completely related (and free) HTML tip.

I noticed you used <br> to insert an HTML line break. It's generally better to make the tag close, although it's not really needed for that particular element. So if you're not too lazy you should type <br /> instead smile

Anyway, I agree the PHP include is the best way to do this. No deep knowledge of PHP needed! Just remember to name all pages .php, and use this code instead of the navigation bar:

<?php include('file_to_header.html'); ?>

Last edited by LS97 (2012-07-30 17:07:55)

SJRCS_011 · 2012-07-30 18:21:54

LS97 wrote:
Nothing to do with the original purpose of the thread, but it's a completely related (and free) HTML tip.

I noticed you used <br> to insert an HTML line break. It's generally better to make the tag close, although it's not really needed for that particular element. So if you're not too lazy you should type <br /> instead

Anyway, I agree the PHP include is the best way to do this. No deep knowledge of PHP needed! Just remember to name all pages .php, and use this code instead of the navigation bar:

<?php include('file_to_header.html'); ?>

or you could use SSI (if you server supports it) tongue

Scratch

archived forums

#1 2012-07-30 13:16:39

Navigation bar help

#2 2012-07-30 13:23:20

Re: Navigation bar help

#3 2012-07-30 13:27:03

Re: Navigation bar help

Code:

#4 2012-07-30 13:36:52

Re: Navigation bar help

#5 2012-07-30 13:38:22

Re: Navigation bar help

muppetds wrote:

#6 2012-07-30 13:39:13

Re: Navigation bar help

veggieman001 wrote:

Code:

Code:

#7 2012-07-30 13:43:53

Re: Navigation bar help

Code:

Code:

#8 2012-07-30 13:50:15

Re: Navigation bar help

muppetds wrote:

#9 2012-07-30 13:52:07

Re: Navigation bar help

veggieman001 wrote:

muppetds wrote:

#10 2012-07-30 14:01:00

Re: Navigation bar help

Code:

#11 2012-07-30 14:27:01

Re: Navigation bar help

#12 2012-07-30 14:33:59

Re: Navigation bar help

BirdByte wrote:

Code:

#13 2012-07-30 14:40:32

Re: Navigation bar help

veggieman001 wrote:

BirdByte wrote:

Code:

#14 2012-07-30 17:05:31

Re: Navigation bar help

#15 2012-07-30 18:21:54

Re: Navigation bar help

LS97 wrote:

Board footer