CODEWITHSUNDEEP
phpjavascripthtmlcss
Drew Gillespie
Drew Gillespie

Reputation: 13

Create an HTML/CSS/PHP frame with tabs, with seperate tab images

I have a page set up with a large block in the middle, where I plan to display data relevant to the category selected from the tabs. I would like this data to auto-populate and paginate based on how many instances of relevant data there is.

I would also like to set it up so that when you have a tab selected, the background image blends into the large block, whereas the unselected tabs have graphics that clearly arent a piece of the same block.

I have the artwork all created, my html template ready to go, I just happen to be out of the loop programming wise by about 4-6 years. So I'm a bit lost on how to:

A) Create the relevant data stream, and format it.

B) Have the tabs reflect which category is selected.

I have this for the tab section in code:

<tr>
    <td background="images/LeftSideSpacer3.png" width="20" height="32"></td>
    <td background="images/LeftSideButtonSpacer.png" width="14" height="32"></td>
    <td background="images/LeftSideButtonSpacer2.png" width="2" height="32"></td>
    <td background="<?php tabStatus(); ?>" width="65" height="32">
        <a href="<?php $href=$CategoryTitle; ?>?<?php echo $href; ?>" name="<?php $SectionName='Hunter'; ?>Hunter" onClick="<?php $CategoryTitle='Hunter'; ?>">Hunter</a>
    </td>
    <td background="images/ButtonSpacer.png" width="3" height="32"></td>
    <td background="images/TabOff.png" width="65" height="32"></td>

Where tabStatus() calls a predefined function in my header:

function tabStatus() {
    if ($SectionName == $CategoryTitle) {
        return "images/TabOn.png";
    }
    else {
        return "images/TabOff.png";
    }
}

None of this works, which brings me back to being lost. And 4 hours googling and searching hasnt helped me much.

Upvotes: 1

Views: 1170

Answers (2)

chtenb
chtenb

Reputation: 16184

I assume you fetch your data from an sql database or anything similar. In that case you can just iterate over the object containing your data and print it in a HTML context, like:

foreach($data as $value)
{
    // This is supposed to be the resulting HTML string for every data value
    echo "<td>" . $value . "</td>"; 
}

This will result in a static HTML page containing your data. With every client request a new page will be constructed, depending on the request.

In case you want a more dynamic approach, loading data into your site afterwards, have a look here http://verido.dk/index.php/ressourcer/artikler/loading-and-saving-data-dynamically-using-php-jquery-and-mysql/

If you have any further problems, please be specific in your question. That will result in better answers. If you need general help with your programming stuff, you can better ask it on a forum (instead of StackExchange).

Upvotes: 1

Martin Bean
Martin Bean

Reputation: 39389

You’re building an user interface, and you need to break it down into more manageable chunks. As it is, this question is hard to answer as there is no one “true” question nor one true answer.

Looking at the code provided, I’d suggest reading up on HTML and CSS. HTML Dog is a good side to get started with creating semantic mark-up. From there, you can use your new-found skills to apply to your scenario. Dissecting other well-built web pages is also a good way to improve your HTML and CSS knowledge.

Upvotes: 0

Related Questions