SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    0 Post(s)
    0 Thread(s)

    CSS tab navigation help (The CSS Anthology 2nd Edition, Page 110)


    Would appreciate if some CSS gurus can help me out here..

    I was trying out the CSS tab navigation in the example of the above book (Pg. 110), everything went fine.

    But when I want to implement the 2nd (Contact Us) or 3rd (Articles) tab, I was really stuck!!!

    I really don't know where/how to put the content of 2nd tab in the HTML file...

    Say I just want to display the sentence "This is the contact page" in the 2nd tab (Contact Us), how to I put it in the html file?

    Below is the html source file.....What is the code to put in the 2nd tab sentence?

    Thanks a million in advance for you assistance...

    <title>Chapter 4 - Tabbed Navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="tabs.css" />
    <body id="recipes">
    <div id="header">
    <li class="recipes"><a href="#">Recipes</a></li>
    <li class="contact"><a href="#">Contact Us</a></li>
    <li class="articles"><a href="#">Articles</a></li>
    <li class="buy"><a href="#">Buy Online</a></li>
    <div id="content">
    <p>Recipes page. </p>

    <<<Put 2nd contact sentence here?? How to do it?>>>


  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    0 Post(s)
    0 Thread(s)
    You need to create a new html file with almost the same code, except that you replace this:
    <p>Recipes page. </p>
    with your own code. For the Contact Us page that would be something like this:
    <h1>Contact Us</h1>
    <p>Information here</p>
    Then you need to update your menu in both html files and link it to your new page.
    You have to do this for every page. An alternative is to use a server side programming language to create the page dynamically for you but this is a little more complicated.

    Hope this helps.


Posting Permissions

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