I'm working on building a website, and I'm running into a bug. I have my navigation bar, and all that, and now I am trying to make the table go on a new line.
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="css/topbar.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="navbar">
<div class="navbar">
<ul class ="menu" rel="sam1">
<li class="active"><a href="Home.htm">Home</a></li>
<li><a href="Compare.htm">Compare Products</a></li>
<li><a href="Contact.htm">Contact</a></li>
<li><a href="Download.htm">Download</a></li>
</ul>
</div>
</div>
<table>
<td>Hi</td>
</table>
</body>
<footer>
</footer>
</html>
CSS:
.header
{
width:100%;
height:80px;
background:#939393;
background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position:relative;
margin-bottom:30px;
}
body
{
margin:0;
}
ul
{
margin:0;
padding:0;
}
ul.menu
{
height:80px;
width:100%;
float:left;
}
ul.menu li
{
overflow:hidden;
width:25%;
list-style: none;
float:left;
height:79px;
text-align:center;
background:-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background:-moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a
{
display:block;
padding:0 20px;
border-left:1px solid rgba(255,255,255,0.1);
border-right:1px solid rgba(0,0,0,0.1);
text-align:center;
line-height:79px;
background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 1500ms;
-moz-transition-property:background;
-moz-transition-duration:1500ms;
}
ul li a:hover
{
background:transparent none;
}
ul li.active a
{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
When I run my code, it adds a scrollbar to the bottom of my webpage, and it makes the table show up like this:
Is there any way I can fix it? And make it go to a new line?
I now I can do it really sloppy by adding 4 <br>
tags, but I don't think that is very professional.
You either have to remove:
float:left;
from:
ul.menu
{
height:80px;
width:100%;
float:left;
}
Or you could add:
.navbar
{
clear:right;
}
and that will remove everything to the right.