bw83 Posted December 2, 2008 Share Posted December 2, 2008 Im working on a site for personal access to my military files from the office since DOD doesnt allow thumb drives on government computers any more i dont have access to my info. Im also using this to try and learn more about web design (this is my first external css sheet). What I wanna work on since I know with the military being a fast changing thing I would like to be able to update my header (to put an image when im ready, I just wanna get the page up quickly now) and to update a navigation menu throughout my whole site with making minimum changes. I was wondering if there is a way to make a div load with the content of another page so say my header or leftcolumn div can be auto updated by updating say header.html or leftcolumn.html so it corrects the entire website. http://bw83.com/Military/fixed.htmlThe colors are all just temporary to make it easier for me to see they will be transparent. Here is my css sheet A:link { text-decoration: none; color:#ffffff; } /*effects and color of regular links*/A:visited { text-decoration: none; color:#ffffff; } /*effects and color of visted links*/A:hover { text-decoration: none; color:#ffffff; } /*effects and color of hovered links*/A:active { text-decoration: none; color:#ffffff; } /*effects and color for clicked links*/body{background-image: url(acu.jpg); /*background image*/background-repeat: repeat; /*repeat value of background images*/background-position: 0% 0%; /*valueI:top,center,bottom valueII:right,center, left*/background-attachment: fixed; /*scroll or fixed image*/font-family: "times new roman"; /*font family for the body*/color: #ffffff; /*font color for the body*/letter-spacing: 0pt; /*pt number between letters*/font-weight: normal; /*light, normal, bold or a number value*/font-size: 12pt; /*how many pt font for the body*/margin:0; /*margin for main body*/padding:0; /*padding for main body*/}#maincontainer {margin-top:10px;position:center;background:green;width:800px}#topsection{background: #EAEAEA; /*background color for header*/height: 50px; /*Height of top section*/padding:20px;font-size: 26pt; /*how many pt font for the header*/}#leftcolumn{float: left; /*positions div on left side*/width: 200px; /*Width of left column*/background: #C8FC98; /*background color of div*/padding-top:20px;padding-bottom:20px;}#contentcolumn{margin-left: 200px; /*Positions content after left column*/background:blue;padding:10px;}#footer{clear: left; /*positions content after left floated content*/width: 100%; /*makes width 100% of page*/background: black; /*background color of div*/color: #FFFfff; /*font color of div*/text-align: center; /*text alignment in div*/padding: 4px 0; /*padding in div*/}.innertube{margin: 30px; /*padding for inside divs*/margin-top: 0;} Here is the code for the page so far <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><LINK href="fixed.css" rel="stylesheet" type="text/css"><title>B-Dubs Military Info</title></head><body><center> <!-- opens center maincontainer1 --><div id="maincontainer"> <!-- opens the maincontainer div --> <!--Header Section --><div id="topsection"> <!-- opens top section div --><center> <!-- opens center topsection1 -->B-Dubs Military Info Page</center> <!-- closes center topsection1 --></div> <!-- closes topsection div --> <!-- End Header Section --> <!-- Nav section --><div id="leftcolumn"> <!-- opens leftcolumn div -->ACCP<br><br>Regulations<br><br>Personal Files<br><br>Links<br><br>Forms<br><br>Tools</div> <!-- closes leftcolumn div --> <!-- End Left Columnt Section --> <!-- Content Section --><div id="contentcolumn"> <!-- opens contentcolumn div -->This will be the the content information. This will be the the content information. This will be the the content information. This will be the the content information. This will be the the content information. This will be the the content information. This will be the the content information. This will be the the content information. This will be the the content information. </div> <!-- closes contentcolum div --> <!-- Footer Section --><div id="footer">Copyright 2 December 2008</div> <!-- End Footer Section --></div> <!-- Closes the maincontainer div --></center> <!-- closes center maincontainer1 --></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted December 2, 2008 Share Posted December 2, 2008 The idea is to create one universal menu that all your pages use? When you need to change it, you just change it once, you don't have to change ALL the pages?If PHP is enabled on your site, we can fix you up real fast. Second-best would be an inline object or iframe that holds your nav material. The PHP method is my preference, and is widely used. Link to comment Share on other sites More sharing options...
bw83 Posted December 2, 2008 Author Share Posted December 2, 2008 I havent used PHP before but im assuming it is enabled on my site because I have a php editor and a place to create new php pages. I just looked through all the details of my plan and it does have PHP and MYSQL (not sure if the sql effects php but it was in the same FAQ).But yes you were completely on point with what I was trying to do. Make a menu that I can change once and update the menu on the entire website. Link to comment Share on other sites More sharing options...
jeffman Posted December 2, 2008 Share Posted December 2, 2008 Well, first let's do this. Create a fresh document on your server (has to be on the server). Here is the entire document: <?php phpinfo();?> Give it a name like phpinfo.php. Now call it from your browser. If you get a blank screen, do a View Source. You'll probably see the PHP tags. If PHP is enabled, you'll get a big whopping printout with more details about your configuration than you'll ever need. In fact, we don't need any of that info. This is simply the easiest way to confirm that PHP is enabled.IF PHP IS ENABLED:1. put your navigation system in a separate document. Save it with a name like nav.php. All it should contain is the menu. No <html> tags, no <header> tags, none of that. Just the menu.2. In a document where you need the menu, exactly where you want it to appear, add this simple line of code:<?php include ("nav.php") ?>What that line does is basically a "copy and paste" of everything that's in nav.php. That's why it doesn't have to be a complete document. Just the parts you want to paste.ABOUT CSSSince nav.php is a doc frag, it cannot come with its own CSS rules. You could easily add them to all your internal style sheets (sounds like drudge work) or to one external style sheet. Or, even better, create a unique style sheet just for the menu. Call it nav.css. Now, in your other style sheet(s), just add this line:@import url(nav.css);This will give you the same convenience and modularity with your style as you have with the menu itself. Edit it once, and it applies everywhere you import it. Link to comment Share on other sites More sharing options...
bw83 Posted December 2, 2008 Author Share Posted December 2, 2008 Ok so i went step by step through what you put and I did get the long printout for the phpinfo file. I made the nav.php file and copied it from my page (they arent links yet not sure if thats is whats stopping it) ACCP<br><br>Regulations<br><br>Personal Files<br><br>Links<br><br>Forms<br><br>Tools Thats my entire nav.php fileI then inserted the line you gave me into the page where I wanted the menu to be <!-- Nav section --><div id="leftcolumn"> <!-- opens leftcolumn div --><?php include ("nav.php") ?></div> <!-- closes leftcolumn div --> <!-- End Left Columnt Section --> I havent done a css sheet for the nav.php specifically yet (also dont know if that is a show stopper for this process).If the css sheet is required I am using an external style sheet so doing the nav.css will probably be the easiest way how do i compose that css sheet. Is it done as body{ } or do i just do simply like font: and such effects that apply?http://bw83.com/Military/fixed.htmlThat is the page where I have the php menu set to open in with no luck. Link to comment Share on other sites More sharing options...
bw83 Posted December 2, 2008 Author Share Posted December 2, 2008 I figured it out. It just hit me all of a sudden that a html file wouldnt read the data most likely so i renamed it to fixed.php instead of fixed.html and it worked perfect. The only thing I still have a question on is about the css sheet for the nav.css file. When i got it to work it seems as though it is still pulling the formatting from the regular external style sheet I have and is using the info from the #leftcolumn div that its inside. Is that correct or just coincidence?http://bw83.com/Military/fixed.php Link to comment Share on other sites More sharing options...
jeffman Posted December 3, 2008 Share Posted December 3, 2008 Sorry about the .php thing. Glad you figured it out.I'm confused about nav.css . I don't see this file in your directory or any references to it anywhere else. So I'm not clear what the issue is. Link to comment Share on other sites More sharing options...
bw83 Posted December 3, 2008 Author Share Posted December 3, 2008 Im sorry about the long delay in the response Im stationed over in germany and it was getting late and I fell asleep. I guess my question was how much formatting can you use for something that is done in php. The one I was testing on was done athttp://bw83.com/php/fixed.phpand for testing purposes to see how much can be done I was trying to use the css menu fromhttp://www.dynamicdrive.com/style/csslibra...llet_list_menu/The files im using are http://bw83.com/php/nav.csshttp://bw83.com/php/nav.phphttp://bw83.com/php/fixed.cssI originally used the lien you gave me @import url(nav.css); inside of the fixed.css sheet with the code for dynamic drive inside the nav.css sheet and then i tried putting all the stuff from the nav.css sheet inside of the fixed.css sheet with no avail. For now I basically just want to know if stuff that complicated can be done referencing php files like that if so im more then happy to work on it by myself for a bit to see if I can do it before I have someone write it for me I just dont wanna spend all the time if its impossible. Thank you again for all the help with the php I can tell this will be a great thing for me to learn Link to comment Share on other sites More sharing options...
jeffman Posted December 3, 2008 Share Posted December 3, 2008 As complex as you want. The output of a php file is simply an HTML document, just the same as if it was an HTML doc you coded by hand. When it arrives at the browser, the browser can't tell the difference. So don't worry about complexity.We are still learning, however. Two more things you need to know. (I'm always forgetting the important junk.)1. The @import rule must come FIRST in the CSS document. Anywhere else throws an error.2. Since it comes first, any style declarations that come after the @import rule will take precedence over declarations for the same selectors inside the imported document. So let's say we're set up like this:main.css @import ("secondary.css");div.wrapper { color: #ff0000; /* RED */} secondary.css div.wrapper { color: #0000ff; /* BLUE */ } You might expect the text in <div class="wrapper"> to be blue, but it will be red. That's because a rule for that class exists in main.css AFTER secondary.css is imported.In a set-up like this, you'd probably want your navigation rules to have unique classnames so as to keep this from happening. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.