Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 415
  • Last Modified:

HTML Table and CSS Issues

I have a table with two issues.
1. Simple: I want to center the table on the screen. I am using <center> now and it works. I tried <div style="text-align: center"> around my table an it did not center it.

2. I want it to be responsive. I am very close. When I grab my screen edge, I have the images shrinking and the table images shrinking in height, but it appears my cells are not shrinking. Here are the before shrink and after shrink:

b4
after

my code:
<center>
    <table style="width: 100%; border-spacing: 0px; border-collapse: separate; max-width: 818px;">
        <tr>
            <td style="vertical-align: middle; width: 25%;" rowspan="2">
                <a id="ClientLink" runat="server" class="AddHand">
                    <asp:Panel ID="panClient" runat="server">
                    </asp:Panel>
               </a>
            </td>
            <td style="vertical-align: bottom; width: 25%;" colspan="3">
                <a id="EmployeeLink" runat="server" class="AddHand">
                    <asp:Panel ID="panEmployee" runat="server">
                    </asp:Panel>
                </a>
            </td>
            <td style="vertical-align: bottom; width: 25%;" colspan="3">
                <a id="TrainingLink" runat="server" class="AddHand">
                    <asp:Panel ID="panTraining" runat="server">
                    </asp:Panel>
                </a>
            </td>
            <td style="vertical-align: middle; width: 12%;" rowspan="2">
                <a id="EventLogLink" runat="server" class="AddHand">
                    <asp:Panel ID="panEventLog" runat="server">
                    </asp:Panel>
                </a>

            </td>
            <td style="vertical-align: middle; width: 13%;" rowspan="2">
                <a id="PurgeTrainingLink" runat="server" class="AddHand">
                    <asp:Panel ID="panPurgeTraining" runat="server">
                    </asp:Panel>
                </a>

            </td>
        </tr>
        <tr>
            <td style="vertical-align: top; width: 17%;" colspan="2">
                <a id="ModuleLink" runat="server" class="AddHand">
                    <asp:Panel ID="panModule" runat="server">
                    </asp:Panel>
                </a></td>
            <td style="vertical-align: top; width: 17%;" colspan="2">
                <a id="WorkshopLink" runat="server" class="AddHand">
                    <asp:Panel ID="panWorkshop" runat="server">
                    </asp:Panel>
                </a>

            </td>
            <td style="vertical-align: top; width: 17%;" colspan="2">
                <a id="CourseLink" runat="server" class="AddHand">
                    <asp:Panel ID="panCourse" runat="server">
                    </asp:Panel>
                </a>

            </td>
        </tr>
    </table>
</center>

Open in new window


I setup the styles in code behind. But here is one of the styles for the cell panels:
.panModule,.panModule:hover {
max-width:136px;
max-height:90px;
min-width:50px;
min-height:50px;
width: auto;
height:90px;
background-size: 100% auto; 
}
.panModule  {
background-image: url('/Site/Images/LayoutImages/AdminPanel/MODULEFADE.PNG');
background-repeat: no-repeat;
}
.panModule:hover  {
background-image: url('/Site/Images/LayoutImages/AdminPanel/MODULE.PNG');
}

Open in new window


thanks!
0
Starr Duskk
Asked:
Starr Duskk
2 Solutions
 
micropc1Commented:
try setting the width of the div to 100%..
<div style="width:100%; text-align:center;">
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
micropc, sorry. no that did not fix it. it is still flush left. :(
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I found a link, what I needed was this:

margin-left:auto; 
    margin-right:auto;

Open in new window


http://www.granneman.com/webdev/coding/css/centertables/

Now, for the other question, anyone? thanks!
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
hankknightCommented:
If you want it to be responsive you should not use tables!

Consider using the jQuery plugin Isotope:
http://isotope.metafizzy.co/layout-modes.html
0
 
Mike EghtebasDatabase and Application DeveloperCommented:
One thing I noticed is you have:

<a id="ModuleLink" runat="server" class="AddHand">  

.panModule    for id you need #panModule
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
eghtebas, Sorry, I didn't clarify. In my codebehind I define the class for panModule a class panModule, so it is separate in the code. But yes, that would be great advice if I didn't have the class defined.

thanks.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I will consider using this, hank, if I can't find another solution using what I already have coded, because I don't really have time to learn and implement something new at this point. thanks!
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
didnt' really get a solution I could use from this post, but will close this out. I'm going to use ImageMaps. thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now