Click here to Skip to main content
15,920,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have container class. In container class, i had 5 different images[font-awesome icon].
Suppose container class had a height of 250px. and, i have another html page[table.html] which consists of only and tags. Now, what i want is, if i clicked on 5 different image. The table.html page should display in below the 5 different images, means, the container class height is 250px, within the height of container class.

What I have tried:

i tried with a code:
HTML
<div class="container" style="height: 180px">
            <div class="row">
                <div id="rect" style="width: 100%">
                    <center><font color="white"><b>Organization Details</b></font></center>
                </div>
            </div>
            <div class="row" style="width: 100%">
                
                <div class="col-md-1">
                    &lt;!--Make this Empty--&gt;
                </div>
               <div class="col-md-2">
                   <i class="fas fa-users" style="font-size: 5rem"></i><br> 
                   Team Member
               </div>
                <div class="col-md-2">
                    <i class="fas fa-wallet" style="font-size: 5rem"></i><br>
                    Portfolio
               </div>
                <div class="col-md-2">
                    <i class="fas fa-award" style="font-size: 5rem"></i><br>
                    Awards
               </div>
                <div class="col-md-2">
                    <i class="fas fa-image" style="font-size: 5rem"></i><br>
                    Gallery
               </div>
                <div class="col-md-2">
                    <i class="fas fa-file" style="font-size: 5rem"></i><br>
                    Document
               </div>
                <div class="col-md-1">
                    &lt;!--Make this Empty--&gt;
                </div>
                
            </div>



but i dont know how to link
Posted
Updated 10-Sep-18 4:13am
v2
Comments
OriginalGriff 10-Sep-18 6:03am    
When you copy'n'paste HTML it's important that you use a code block (which produces pre tags and engages the syntax highlighter) or your code becomes invisible!
I've fixed it for you, but please try to do it yourself next time (if you use the "Improve question" widget you can see what I did to it).
ZurdoDev 10-Sep-18 8:06am    
I do not understand your question.

1 solution

If you need hyperlink then create the a tag after i tag that means
HTML
<a href="table.html">Here your text</a>.


Here if you need to go different table data for each title means you need create each title a tag need a single table that means
HTML
<div class="container" style="height: 180px">
    <div class="row">
        <div id="rect" style="width: 100%">
            <center>
                <font color="white">Organization Details</font>
            </center>
        </div>
    </div>
    <div class="row" style="width: 100%">
        <div class="col-md-1">
            <!--Make this Empty-->
        </div>
        <div class="col-md-2">
            <a href="#table-2"> T Portfolio</a>
        </div>
        <div class="col-md-2">
            ^__i class="fas fa-award" style="font-size: 5rem">
            <a href="#table-3"> T Awards</a>
        </div>
        <div class="col-md-2">
            ^__i class="fas fa-image" style="font-size: 5rem">
            <a href="#table-4"> T Gallery</a>
        </div>
        <div class="col-md-2">
            ^__i class="fas fa-file" style="font-size: 5rem">
            <a href="#table-5"> T Document</a>
        </div>
        <div class="col-md-1">
            <!--Make this Empty-->
        </div>

        <div id="table-1">
           <table>table1 data</table>
        </div>
        <div id="table-2">
           <table>table2 data</table>
        </div>
        <div id="table-3">
           <table>table3 data</table>
        </div>
        <div id="table-4">
           <table>table4 data</table>
        </div>
        <div id="table-5">
           <table>table5 data</table>
        </div>

    </div>

Here i using id for each section i will go to respective section when you click the respective a tag.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900