Creating simple CSS stylesheet?

Discussion in 'Web Design and Development' started by JackT06, Dec 20, 2010.

  1. JackT06 macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #1
    Hello,

    I am wanting to create a VERY simple style sheet, see attachment.

    But, i can't find a tutorial online which is simliar to what i would like..? Can anyone point me in the right direction?

    Thanks,
    jack
     

    Attached Files:

  2. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #3
  3. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #4
    Thankyou:) They are both perfect!

    Just another quick question, how do you make the menus? Just on my website atm (see sig), my menu bar html links on each page, which i have to edit every single page, everytime i want to add/remove a page.. Is there another way of doing so..? Could i prefrebly put it into the CSS?
     
  4. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #5
    If you want to just have one file which contains the entire menu for any page on your site, you should look into .php and the include function.

    Allows you to have a single piece of html somewhere that can be "included" anywhere you call it.

    I do my header, menu and footer like this. Only one file to edit instead of doing "search and replace".
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    The best way will depend on the technologies available to you. I do my navigation with PHP so it's in one separate file that gets included in my template. Another potential is Server Side Includes (SSI), which can include a file's contents.
     
  6. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #7
    FANTASTIC! I have just managed to use the php include function and it works:D

    On my pages, to let users know they are on a current page i have go the menu button to change by using the following code;
    Code:
    <li class="current_page_item"><a href="DoingDoE.html">Doing DofE</a></li>
    instead of;
    Code:
    <li><a href="ContactUs.html">Contact Us</a></li>
    Is there a way to still keep the current page bit...? thanks:)
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    There's a couple methods for marking a current page. For me each page has a $pid (Page ID) variable set from the PHP section, then in my navigation code I check for the $pid and set the class appropriately. You could also do some checks that the file name given in the link matches what's in the current URL to identify the current page.
     
  8. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #9
    Could you supply a link to an example please..? I have been googling it but can't quite find what you are describing..?
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Here's a basic example. This write-up also uses a similar approach as below.
    PHP:
    <?php
    // index.php
    $pid 'home';
    ?>

    // navigation.php
    <ul>
      <li<?php if ($pid == 'home') { echo ' class="current"'; } ?>><a href="/">Home</a></li>
    This has the bad part in that you have to add a $pid to every page that exists in your navigation.

    Alternatively, you can get the current URL path by using $_SERVER['PHP_SELF'], and then check against that.

    PHP:
    <?php
    // navigation.php
    $currentPage $_SERVER['PHP_SELF'];
    ?>
    <ul>
      <li<?php if ($currentPage == '/' || $currentPage == '/index.php') { echo ' class="current"'; } ?>><a href="/">Home</a></li>
    This way tends to be less precise and if you change a file name you'll need to change it here as well.
     
  10. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #11
    You can also do it via contextual CSS...

    Code:
    <body class="about-us">
    
    <ul>
      <li  class="home"><a href="index.php">Home</a></li>
      <li  class="about-us"><a href="about-us.php">About Us</a></li>
    </ul>
    
    </body>
    
    CSS:

    Code:
    body.home .home,
    body.about-us .about-us {
      color: red;
    }
    
    HTH!

    ~ Jeremy
     
  11. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #12
    I'm not sure if i have fully understood what you ment.. I currently have the following code but keep on getting the error message "Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home/a8382313/public_html/Nav_Bar.php on line 5"

    Navbar code;
    PHP:
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <html>
    <div id="menu">
    <ul>
        <li><a href="index.html" <?php if ($currentPage=="Home") echo "class="current_page_item""?>>Home</a></li>
        <li><a href="Blog.html" <?php if ($currentPage=="Blog") echo "class="current_page_item""?>>Blog</a></li>
        <li><a href="Gallery.html" <?php if ($currentPage=="Gallery") echo "class="current_page_item""?>>Gallery</a></li>
        <li><a href="Documents.html" <?php if ($currentPage=="Documents") echo "class="current_page_item""?>>Documents</a></li>
        <li><a href="DoingDoE.html" <?php if ($currentPage=="DoingDoE") echo "class="current_page_item""?>>Doing DofE</a></li>
        <li><a href="ContactUs.html" <?php if ($currentPage=="ContactUs") echo "class="current_page_item""?>>Contact Us</a></li>
        <li><a href="Forum.html" <?php if ($currentPage=="Forum") echo "class="current_page_item""?>>Forum</a></li>
    </ul>
    </div>
    On each page i have;
    PHP:
    <?php $pid 'Home';?>
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    These would be your problems:
    PHP:
    echo "class="current_page_item"";
    You can't use double quotes inside double quotes. Use,
    PHP:
    echo 'class="current_page_item"';
    notice how the syntax color is different, which is often a good way to find coding problems.
     
  13. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #14
    Code changed:) I no longer get the error message, i get the website loading normally. It just don't do what it's ment to be doing...? Any ideas why?

    thanksyou:)
     

Share This Page