Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    71
    Thanks
    9
    Thanked 0 Times in 0 Posts

    TABS and HTML please help!

    I am having small problem. How do I add text to TAB A, B, C, etc. I would be populating list from a database. Thanks.

    Code:
    <html>
    
    <head>
    <title>New Page 2</title>
    <style type="text/css">
    
    #tablist{
    padding: 3px 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0.1em;
    font: bold 12px Verdana;
    border-bottom: 1px solid gray;
    }
    
    #tablist li {
    list-style: none;
    display: inline;
    margin: 0;
    }
    
    #tablist li a{
    text-decoration: none;
    padding: 3px 0.5em;
    margin-right: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #DDE;
    }
    
    #tablist li a:link, #tablist li a:visited{
    color: #448;
    }
    
    #tablist li a:hover{
    color: #000;
    background: #AAE;
    border-color: #227;
    }
    
    #tablist li a.current{
    background: white;
    border-bottom: 1px solid white;
    }
    </style>
    </head>
    
    <body>
    <ul id="tablist">
        <li><a class="current" href="#a">A</a></li>
        <li><a href="#b">B</a></li>
        <li><a href="#c">C</a></li>
        <li><a href="#d">D</a></li>
        <li><a href="#d">E</a></li>
    </ul>
    <div class="a">
        TAB A content.
    </div>
    
    <div class="b">
        TAB B content.
    </div>
    <div class="c">
        TAB C content.
    </div>
    
    <div class="d">
        TAB C content.
    </div>
    <div class="e">
        TAB D content.
    </div>
    
    </body>
    
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have to use some server-side script to access your DB and dynamically write in to your document.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Very basically:

    PHP Code:
            <ul>
    <?php
        
    require_once ('../mysql-connect.php'); //link to database connect
        
            
    $query "SELECT content_id, heading, posted_by FROM content ORDER BY date DESC";
            
    $result mysql_query ($query); //query the database
            
        
    if (mysql_num_rows ($result) == 0) { //if no results found
                
    echo '<p class="alert">No content found in the database</p>';
        } else { 
    //if results found run this for each one in the database
            
            
    while ($row mysql_fetch_array ($resultMYSQL_NUM)) {
                echo    
    '<li><a href="/content/'$row[0] .'/" title="'$row[1] .'">'$row[1] .'</a> by - '$row[2] .'</li>';
            }
        }
    ?>
            </ul>
    That's what mine looks like. For each entry in the database that matches the criteria in the query it prints the <li> line
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    71
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I will have to use server scripting. Thanks.

    I have a question. How do I know TAB B is clicked in order to retrieve data for TAB B from the server? OR is there a way to track id or something?

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You would use the $_GET variable, as the id of that particular tab will have been passed to the URL such as:

    Code:
    <a href="/content&tab=c" title="Page Title">TAB C</a>
    You will need to modify the above that I posted to something like:

    PHP Code:
            <ul>
    <?php
        
    require_once ('../mysql-connect.php'); //link to database connect
        
            
    $query "SELECT content_id, heading, posted_by FROM content ORDER BY date DESC";
            
    $result mysql_query ($query); //query the database
            
        
    if (mysql_num_rows ($result) == 0) { //if no results found
                
    echo '<p class="alert">No content found in the database</p>';
        } else { 
    //if results found run this for each one in the database
            
            
    while ($row mysql_fetch_array ($resultMYSQL_NUM)) {
                echo    
    '<li><a href="/content&tab='$row[0] .'" title="'$row[1] .'">'$row[1] .'</a></li>';
            }
        }
    ?>
            </ul>
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

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