Tonight, I am going to start making my website more professional looking and start adding content. The first issue I would like to adress is one that has been bugging me for a long time. If you go to my website, you will see that the boxes are off centered (and floating to the left) while everything else is lining up in the center. ive gone over my html/css/php code, but I can't figure out the issue (Web based programming is not one of my strong suits, however I would rather learn and code it myself instead of paying someone to do it for me). Anyways, the generated html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dragon Tooth Software</title>
<link rel="icon" href="/images/favicon.ico" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/banner.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/box.css" />
<meta name="google-site-verification" content="1OG6sLqFnSg_Azq0tJjkpqPklx0KhO1cu7S5ii60FKc" />
</head>
<body>
<header>
<a href="/index.php"><img src="/images/banner.jpg" height="100px" width="925px" /></a>
<h1>Dragon Tooth Software</h1>
<h2>Rule the Web</h2>
</header>
<nav>
<ul>
<li class="current"><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="projects.php">Projects</a></li>
<li><a href="tutorials.php">Tutorials</a></li>
</ul>
</nav>
<div class="content-box">
<h1 class="header">Welcome to Dragon Tooth Software</h1><p class="content">Greetings! I am DTSCode!</p>
</div><br /><div class="content-box">
<h1 class="header">Thursday, July 17<sup>th</sup>, 2014</h1><p class="content">www.dragontoothsoftware.com is officially open!</p>
</div><br /> </body>
</html>
and the css file that makes up the box:
.content-box {
float: center;
padding: 20px;
border-radius: 10px;
border: 10px solid gray;
}
You need to remove the default margin and padding values from the UL tag in the NAV element.
nav ul {
margin: 0;
padding: 0;
}
You an try below code:
ul{padding:0; margin:0;}
Use the below css to normalize css and create a wrapper class.
CSS :
/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
margin: 0;
padding: 0;
border: 0;
}
.wrapper{ width:960px; margin:0 auto; }
Follow the below html structure
HTML
<nav>
<div class="wrapper">
<ul>....</ul>
</div>
</nav>
<div class="container">
<div class="wrapper">
<div class="content-box">...</div>
</div>
</div>
Also there is no property as float:center. Use float:left or float:right when needed.
the boxes are not off centered and floating to the left. the difference is due to the default padding in the UL tag. another thing is that you have not defined any width to the boxes, so a div will be, by default, 100% in width. you can define a specific width and then centrally align it.