Results 1 to 9 of 9

Thread: add navigation to CSS file

  1. #1
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default add navigation to CSS file

    I am using the suckerfish menu but was wondering if it's possible to set up all of the links INSIDE the style sheet itself....so if one change was made to the navigation (ie, new link added in) it would appear on all pages....? I have a customer who wants to update their own projects page, and I can't think of how else to do it so they only change the one page...

    thanks

    carrie

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    PHP includes

    http://php.net/manual/en/function.include.php

    CSS only contains css or at least should

  3. #3
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thanks blue walrus....but it needs to be something fairly easy to change....that's why i thought CSS

    carrie

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Intcon, what you want is not possible. Use php, as bluewalrus suggests. If that's not possible, use one of the ajax-includes provided by Dynamic Drive.
    You could also try this.
    ===
    Arie Molendijk.
    ===

  5. #5
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Arie..thanks! that bottom suggestion is a winner i think! much appreciated!

    carrie

  6. #6
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Arie...can you tell me how to make this post in me left column? sorry, I'm a newbie to CSS....=)
    test page

    carrie

  7. #7
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Something like this

    Code:
    <!--Division links-->
    <div id="links"><img src="logo_front.jpg" alt="" align="left" width="137" border="0" height="89">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" id="Movie6a" width="641" height="92">
            <param name="movie" value="Movie6a.swf">
            <param name="bgcolor" value="#FFFFFF">
            <param name="quality" value="high">
            <param name="allowscriptaccess" value="samedomain">
            <embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="Movie6a" src="Movie6a.swf" bgcolor="#FFFFFF" quality="high" swliveconnect="true" allowscriptaccess="samedomain" width="641" height="92">
              <noembed>
              </noembed>        
    </object></div>
    <!--Division heading-->
    <div id="heading">
    <!--Division heading Maroon COLUMN-->
    <div id="heading-maroon"></div>
    <!--Division main-->
    </div>
    <div id="main">
    <!--Division main LEFT COLUMN-->
    <div id="main-left">
    <div class="suckerdiv">
    <ul id="suckertree1">
    <li><a href="services.html">Services</a>
      <ul><li><a href="environmental_services.html">Environmental</a></li>
    	  <li><a href="#">Transportation</a></li>
    	  <li><a href="#">Surveys/Development</a></li>
    	  <li><a href="#">Drainage/Storm Water</a></li>
    	  <li><a href="#">Recreation</a></li>
    	  <li><a href="#">Local Government Services</a></li>
    	  <li><a href="#">Water/Wastewater Operations</a></li>
    	  <li><a href="#">Animal Facilities</a></li></ul>
    	  </li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Award Projects</a>
      <ul>
      <li><a href="#">Engineer Reports</a></li>
      <li><a href="#">Item</a></li>
      </ul>
    </li>
    <li><a href="#">Newsletter</a></li>
    
    <li><a href="#">About</a>
      <ul>
      <li><a href="#">item</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    </ul>
    </li>
    <ul><li><a href="#">Contact</a></li>
    </ul>
    <ul>
      <li><a href="#">Home</a></li>
      </ul>
    </ul></div>
    
    <script type="text/javascript">
    document.write('<iframe name="menu" src="menu.html" style="position:absolute;left:-500px;display:none;width:0px;height:0px" frameborder="0"></iframe>');
    function extractMenuFromIframe(){
    document.body.innerHTML+=frames['menu'].document.body.innerHTML}
    window.onload=extractMenuFromIframe;
    </script><iframe name="menu" src="menu.html" style="position: absolute; left: -500px; display: none; width: 0px; height: 0px;" frameborder="0"></iframe>
    
    <p></p></div>
    <!--Division main CENTER COLUMN-->
    <div id="main-middle"><p class="main">Kuehl and Payer, Ltd. established  in 1983 provide solutions to problems for Northwest Iowa  residents, businesses, agricultural businesses, industries, and governments in  various professional disciplines. With  offices in Storm Lake,  Algona, and Sac City  and a staff of 38 professionals and technicians, we provide surveying, engineering,  environmental, recreational, and management assistance to our diverse  clientele.</p>
      <p class="main">Animal waste facilities,  transportation (streets, highways, bridges, and airport facilities), water and  wastewater operations, agricultural and urban drainage, recreational facilities  (aquatic parks, ball fields, skateboard parks, trails, etc.), boundary and ALTA  surveys are all design services that are available to the clients of Kuehl and  Payer, Ltd. Management and various  governmental consulting services are additional services provided by our staff  members.</p>
      <p class="main">Our specialized services for  rural and urban clients are tempered with a sensitivity built from our  extensive rural experience and individual backgrounds. This experience, background, technological  proficiency, comprehensive insight, and community knowledge all enables Kuehl  and Payer, Ltd. to build trust and lasting relations with our communities and  clients.</p><br>
    <br>
    &lt;div id="footer"&gt;&lt;/div&gt;<br>
    &lt;/body&gt;
    <p></p>
    <h2>Scroll Bar</h2>
    <p>The scroll bar on this division only initiates if you exceed the amount of content that the fixed height allows.  To remove it increase the height of the division or reduce the amount of content.</p>
    <br><br>
    </div>
    <!--Division main RIGHT COLUMN-->
    <div id="main-right"><h2>Sidebar</h2>
    <p>Sidebars can be used for many purposes.</p> 
    </div>
    </div>
    <!--Division footer-->
    <div id="footer"><address>Copyright © 2009 - yourdomain.com - All Rights Reserved</address></div>
    <p></p>
    This is from generated source so if your using server side or javascript (i don't think you are) it won't be the same.

  8. The Following User Says Thank You to bluewalrus For This Useful Post:

    intcon (12-21-2009)

  9. #8
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Just a quick note to add:
    CSS stores styles-- how stuff should be displayed. It does not store content, only how content is used.
    PHP generates html, so it is a good tool for dynamically generating html that has certain things in it. PHP includes are very easy (once you understand the basics), and they are very, very useful.
    Ajax is a method of javascript that acts like includes, but in the browser. Because of this it will only work if javascript is on in the browser and a new enough version to support it. It may also be unexpectedly buggy in some cases, like if someone is using a weird browser of if their computer is slow (because Javascript requires extra memory, especially for more complex things).

    Javascript itself is something like CSS in how it is stored-- you can use external .js files that can be included in every page. If all you are doing is wanting to create a few elements on the page, then storing them in a Javascript file is probably the best way (if you can't do it with PHP, SSI, or other server-side methods). You can just use Javascript to store what you want, then to later output it as html on the page. It will be easy to include on every page and easy to update.

    So the simplest answer to your original question: no, CSS cannot do anything like that. But you can use Javascript in a similar way, if you'd like. (no Ajax required.)

    ---------
    EDIT (referring to John's post below):
    Yes, Javascript must be enabled, so a PHP or other solution is better in that sense; if the method used does require javascript, always have a backup plain-html link to an equivalent page, or some users (including search engine crawlers) will not be able to access your content.
    Last edited by djr33; 01-01-2010 at 09:36 PM.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    As long as we are adding on here, it cannot be stressed enough that those without javascript enabled/available will not be able to use your menu at all if it is imported via javascript of any kind.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    djr33 (01-01-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •