Jump to content
Please Use CODE Tags

HTML Table Calendar Trouble

tomasesp
By tomasesp
in Programming
 Share
Posted

Hello I'm working a website for one of my classes. In it I have to create a calendar for events. I'm having trouble making it center under my Navigation div, it just stays on the bottom to its right. Anytime I change the css file or the table itself to be center it just stay in the same location.

This how i have my code, and my css file. 

<body>
    <div id="SocialMedia" align="right">
            Fallow Us at:
            <a href="#"><img src="Pictures/SocialMediaIcons/Facebook.png" alt="Facebook" /></a>
            <a href="#"><img src="Pictures/SocialMediaIcons/Linkedin.png" alt="Linkedin" /></a>
            <a href="#"><img src="Pictures/SocialMediaIcons/Twitter.png" alt="Twitter" /></a>
        </div>
    <div id="top">
        <div id="Banner"></div>
        <div id="Nav">
            <ul>
                <li><a href="MainPage.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li><a href="EventPage.html">Events</a></li>
                <li><a href="../Calendar.html">Calendar</a></li>
            </ul>
        </div>
    </div>
    <div id="SecondBody">
        <table id="Table" height="900px"  cellpadding="0" cellspacing="0">
            <tr id="Monthname">
                <td colspan="7" align="center" height="100px"><h5>March 2016</h5></td>
            </tr>
            <tr id="Days" align="center">
                <td>Sunday</td>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wensday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
            </tr>
            <tr>
                <td class="blankdata"></td>
                <td class="blankdata"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
            </tr>
            <tr>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
            </tr>
            <tr>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td class="blankdata"></td>
                <td class="blankdata"></td>
            </tr>
        </table>
    </div>
    <div id="BottomNav"></div>


</body>
body {

}
#SocialMedia{
    font-size:20px;
    background-color:aquamarine;
}
#Nav{
    align-content:center;
    background-color:aquamarine
}
#Nav ul{
    height: 20px;
    width:1000px;
    margin:0 auto;
}
#Nav ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px solid black;
}
li a{
    text-decoration:none;
    color:black;
    line-height:20px;
    display:block;
}
#SecondBody{
   align-items:center:
}
#Table{
    border:1px solid black;
}
#Table td{
    width:100px;
    border:1px solid black;
  
}
.blankdata{
    background-color:gray;
}
#Days{
    background-color:lightblue;
    width:auto;
}
#Days td{
    border:1px solid black;
    height:30px;
}
#Monthname{
    font-size:40px;
}

 

Capture.PNG

Link to comment
https://linustechtips.com/topic/566611-html-table-calendar-trouble/
Share on other sites
Link to post
Share on other sites
Posted
13 minutes ago, tomasesp said:

Hello I'm working a website for one of my classes. In it I have to create a calendar for events. I'm having trouble making it center under my Navigation div, it just stays on the bottom to its right. Anytime I change the css file or the table itself to be center it just stay in the same location.

This how i have my code.

 

-snip-

If you could post the css too it I'll be easier to debug. I'm not saying I'll be able to solve it for you, I currently have stupid centering issues myself with some html/css stuff I'm writing that I'm about to go bananas over. But if you post the css, someone else might be able to help you. (I'll still try and mess around with it and see if I can find a solution that can help you, but it's not like I'm a pro at this either ;) )

Spoiler

System:

i5 3570k @ 4.4 GHz, MSI Z77A-G43, Dominator Platinum 1600MHz 16GB (2x8GB), EVGA GTX 980ti 6GB, CM HAF XM, Samsung 850 Pro 256GB + Some WD Red HDD, Corsair RM850 80+ Gold, Asus Xonar Essence STX, Windows 10 Pro 64bit

PCPP:

http://pcpartpicker.com/p/znZqcf

 

Link to post
Share on other sites
Posted
  • Author
2 minutes ago, lubblig said:

If you could post the css too it I'll be easier to debug. I'm not saying I'll be able to solve it for you, I currently have stupid centering issues myself with some html/css stuff I'm writing that I'm about to go bananas over. But if you post the css, someone else might be able to help you. (I'll still try and mess around with it and see if I can find a solution that can help you, but it's not like I'm a pro at this either ;) )

Just did :).

Link to post
Share on other sites
Posted
  • Author
3 minutes ago, zushiba said:

Add in your table style

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

  


#Table{
    border:1px solid black;
	margin-left: auto;
	margin-right: auto;
}

 

I tried it it works when i make the browser smaller, but when its full screen it goes to the right.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×