Can't put these buttons at the bottom - html

Question

I am having problems trying to put these buttons at the bottom rather rather than at the middle. I have searched through the internet, tried many things and still doesn't work.
Here's a snippit of my HTML Code:
<table class="table">
<tr>
<td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
<td>
<ul>
<li><a class = "bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</td>
</tr>
</table>
And here's my CSS Code for the buttons:
ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
Any suggestions?

Answer 1

Change your first two CSS rules to:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
padding-top:20px;
}
jsFiddle example
You had been putting a margin on your ul with no units so that was basically being ignored, but you didn't want to do it that way anyway. Instead put top padding on the li elements.

Answer 2

If absolutely nothing is working for you, give the body a height of 1000 or something:
body {
height:1000px;
}
make a div the height of the difference between your nav bar and the body height:
div {
height:850px
margin:auto;
}
and make sure your div is on auto margin. This should push your nav bar down to the bottom.
I hope this helps.

Answer 3

<style type="text/css">
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
li {
float: left;
padding-top:20px;
}
a:link, a:visited {
display: block;
height: 18px;
width: 122px;
color: #FFFFFF;
background-color: #ca3838;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
.table, .td, .th {
border-collapse: collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border: 0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
</style>

Answer 4

float: bottom doesn't exist in CSS.
The key to putting things on the bottom in HTML layout is to first ensure that the container reaches the bottom, then either position at the bottom with absolute positioning, or make sure that the flowing content above pushes your content down.
Here's the easiest way I know to do it, assuming you want the menu to always appear at the bottom, even before scrolling, and assuming your menu is 20px tall.
HTML:
<div class="page-container">
<div class="scrolling-content">
<!-- Your other stuff here -->
</div>
<ul class="bottom-menu">
<!-- The content of your menu -->
</ul>
</div>
CSS:
html, body {
height: 100%;
}
.page-container { /* This takes up the whole window */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scrolling-content {
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
overflow: auto;
}
.bottom-menu {
position: absolute;
height: 20px;;
bottom: 0;
left: 0;
right: 0;
}

Answer 5

Try this: http://jsfiddle.net/kuroisuna/TKY4p/1/
In your CSS:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom; /* This doesn't exist */
margin: 20px 0 4px 0;
}
li {
float:left;
margin: 0;
}
But, this will be much natural without a table: http://jsfiddle.net/kuroisuna/5heFE/2/
HTML
<ul>
<li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign Up</li>
<li>Extra</li>
</ul>
CSS
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
}
a:link, a:visited {
display:block;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:20px 4px 4px 4px;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
li.logo {
background-color:#ca3838;
padding:24px 4px 4px 4px;
}

Answer 6

Change on li:
remove float property
add display as inline-block
add position as relative
add bottom to -20px or so
Change on ul:
remove overflow property
You're done!
See it live in this jsFiddle.

Answer 7

DON'T ever use table for website layouts.use DIVES (divisions )
HTML
<div id="box">
<ul>
<li><a class="bt" href="#home">Home</a>
</li>
<li>About
</li>
<li>Menu
</li>
</ul>
</div>
CSS
#box{
background:#000;
height:200px;
position:relative;
}
ul {
position:absolute;
bottom:0;
}
li {
float:left;
margin-right:20px;
list-style-type:none;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
DEMO

Answer 8

Something like this will be much easier to achieve: http://jsfiddle.net/C2NEY/1/
CSS:
#header {
background-color:#ca3838;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
display:inline-block;
margin:0;
padding:0;
height: 25px;
width:122px;
padding:4px;
text-align:center;
}
#nav li:hover {
background-color: #FF8080;
}
#nav a {
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
HTML:
<div id="header">
<img class="logo" src="images/CoffeeLogo.jpg" />
<ul id="nav">
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</div>

Answer 9

Instead of "margin-left:auto" write "margin-left:" and the margin value like 12Px or whatever you want, and the same for margin-top:
this will position it to its right place.