I've been using CSS and HTML for a while and I'm trying to start to use better methods of coding. I've tried my best not to hack anything. Could anyone let me know how I'm doing at the moment in terms of using things which are better practice?
Please note - I've taken some image names and comments out to protect the privacy of this project, as it's still a work in progress. I hope this won't affect any reviews!
*,p
{
margin:0;
padding:0;
}
html
{
background:#517c24 url(images/backgroundHTML.jpg) no-repeat top center;
}
body
{
font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
background:url(images/backgroundBody.png) repeat-x top left;
}
.clear
{
clear:both;
}
#container
{
background:#fff url(images/header.jpg) no-repeat top left;
width:960px;
overflow:auto;
-webkit-box-shadow:0 0 5px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 0 5px 2px rgba(0, 0, 0, 0.3);
box-shadow:0 0 5px 2px rgba(0, 0, 0, 0.3);
margin:0 auto;
}
.login-search
{
float:right;
text-align:right;
width:210px;
height:70px;
font-size:13px;
color:#6e7074;
margin:30px 10px;
}
.login-search a
{
text-decoration:none;
color:#6e7074;
}
.login-search p
{
margin:5px 0;
}
input
{
border:1px solid #ccc;
outline:none;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#777;
margin-bottom:10px;
padding:6px 4px;
}
.float
{
float:right;
width:356px;
height:335px;
clear:both;
margin:30px 20px 0;
}
.inner-wrap
{
margin-top:300px;
}
.navigation
{
width:230px;
height:300px;
background-color:#e5e5e5;
float:left;
margin:0 30px;
padding:5px;
}
.design-your-own
{
height:110px;
width:250px;
max-width:250px;
background-color:#596f86;
float:left;
}
.se
{
height:70px;
width:250px;
max-width:250px;
border-top:1px solid #000;
border-bottom:1px solid #000;
float:left;
margin:10px 0;
}
.brand-contain
{
width:600px;
max-width:600px;
float:left;
margin-top:10px;
position:relative;
}
.many-brands
{
background-color:#ab1322;
height:110px;
width:250px;
max-width:250px;
float:left;
}
.brand-contain img
{
margin-top:-80px;
}
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<!--- start body --->
<body>
<!--- start container --->
<div id="container">
<!--- login and search box --->
<div class="login-search">
<p><a href="login.cfm">Login</a> / <a href="register.cfm"> Register </a></p>
<p><input type="text" name="search" id="search" style="width: 100px;" /></p>
</div>
<!------>
<!--- image --->
<div class="float">
<img src="images/img.png" width="356" height="335" />
</div>
<!------>
<div class="inner-wrap">
<!--- left column, so navigation and contact link --->
<div class="left-column">
<!--- navigation bar --->
<div class="navigation">
<ul>
<li>Home</li>
<li>Standard</li>
<li>Special</li>
<li>Design your own</li>
<li>About us</li>
<li>Contact us</li>
<li>Order help</li>
<li>Shipping service</li>
<li>Terms & Conditions</li>
<li>Shipping Information</li>
<li>Testimonials</li>
</ul>
</div>
<!------>
</div>
<!------>
<!--- 3 main buttons on homepage --->
<div class="middle-content">
<!--- design --->
<a href="design-your-own.cfm">
<div class="design-your-own">
Design your own >
</div>
</a>
<!------>
<!--- comment --->
<a href="">
<div class="se">
Text Text! >
</div>
</a>
<!------>
<!--- many brands! --->
<a href="design-your-own.cfm" >
<div class="brand-contain">
<div class="many-brands">
Many brands >
</div>
<img src="images/selectManyBrands.png" border="0" />
</div>
</a>
<!------>
</div>
<!------>
<div class="clear"></div>
<p>More text ></p>
</div>
<!------>
</body>
<!------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.shadow-animation/1.11.0/jquery.animate-shadow-min.js"></script>
<script>
$('#search')
.focusin(function() {$('#search').animate({
width: '200',
boxShadow: '0 0 3px rgba(0,0,0,.4)'
}, 300)
.focusout(function() {$('#search').animate({
width: '100',
boxShadow: '0 0 0 rgba(0,0,0,0)'
}, 300)
});
});
</script>
</html>