I am trying to center these <li> elements but I can't seem to figure out how. I now I could just add 400 margin to the other <li> element in CSS but I need to have a picture to the left of both of these and I know that won't work because the margin will make the pictures farther away then a I want. Here is my HTML code and my CSS code..
HTML Code:
<!DOCTYPE html>
<head>
<style>font.tahoma{font-family:Tahoma, Geneva, sans-serif;}</style>
<style>font.trebuchet{font-family:"Trebuchet MS", Helvetica, sans-serif;}</style>
<title>Ceracy Games | About Us</title>
<link rel="stylesheet" type="text/css" href="aboutstyle.css"/>
<link rel="stylesheet" type="text/css" href="navigationbar.css" />
</head>
<body>
<div id="navcontainer">
<center><div id="navigationbar" style="width:1000px; margin: 0px 0px" align="left">
<img src="http://i.imgur.com/5NtjVFc.png" style="width:996px; margin:0px 0px; position:absolute; border-left: solid black 2pt; border-right: solid black 2pt;"/>
<ul style="margin:-8px 0px 0px 0px; height:50px; padding:0; width:996px; background:linear-gradient(#e41010, #ea7575); padding-top:12px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: solid black 2pt;">
<a href="www.ceracygames.com" style="text-decoration:none; color: white"><li class="navbar">Home</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">News</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">About Us</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">Forums</li></a>
<a href="" style="text-decoration:none; color: white"><li class="navbar">Contact Us</li></a>
</ul>
</div></center>
</div>
<div id="seperate1" style="height:20px; width: 100%;"></div>
<div id="teampiccontainer" style="width:1000px; height:100px; background-color:#EB6262; margin: 0 auto; border-radius: 10px; border: solid black 2pt;">
<div id="text1" style="display:table-cell; vertical-align: middle; width:1000px; height:100px; margin: 0 auto;">
<center><font class="trebuchet">This area will contain the team picture, for now just ignore this text. It will be replaced by a picture once a picture is acquired.<br>The image size will be width:1000px height:unknown. So if you want to add a picture just E-Mail it to me.<br>E-Mail is benkuhman@gmail.com</font></center>
</div>
</div>
<div id="seperate2" style="height:10px; width: 100%;"></div>
<div id="aboutceracy" style="width:750px; height:200px; background-color:#646464; margin: 0 auto; border-radius: 10px; padding: 0 10px 0 10px; border: solid black 2pt;">
<center><h1 style="padding-top:5px;"><font class="tahoma">About Ceracy Games</font></h1></center>
<font class="trebuchet">We are a game creating team that tries to make the best games possible. We hope that you enjoy the games that we make! If you have any questions please use the "Contact Us" page!<br>
<br>
Thanks,<br>
Ceracy Games</font>
</div>
<div id="seperate3" style="height:48px; width: 100%;"></div>
<div id="row1aboutcontainer">
<div id="row1person1" style="text-align: center;">
<ul id="aboutlist">
<li class="abouttext">Testing.</li>
<li class="abouttext2">Testing.</li>
</ul>
</div>
</div>
</body>
</html>
CSS Code:
html{
background-image:url('http://i.imgur.com/GRqXyR1.png');
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
}
li.abouttext{
display:inline;
margin: 0px 400px;
text-align:center;
border-radius: 10px;
padding: 50px 5px 50px 5px;
background-color:#646464;
border: solid black 2pt;
}
li.aboutpic{
}
li.abouttext2{
display:inline;
margin: 0px 0px;
text-align:center;
border-radius: 10px;
padding: 50px 5px 50px 5px;
background-color:#646464;
border: solid black 2pt;
}
CSS Code I made specifically for my navigation bar:
li.navbar{
display:inline-block;
margin: 0px 25px;
border-width: 0px 2px 2px 2px;
border-color: black;
border-style: solid;
padding: 11px 27px 11px 27px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background:linear-gradient(#de4d4d, #de1818, #e91010);
font-family:Arial, Helvetica, sans-serif;
}
li.navbar:hover{
display:inline-block;
margin: 0px 25px;
border-width: 0px 2px 2px 2px;
border-color: black;
border-style: solid;
padding: 11px 27px 11px 27px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background:linear-gradient(#ff3333, #ff6666, #ff9999);
color: white;
font-family:Arial, Helvetica, sans-serif;
}
