I am new to HTML and CSS and trying to use the latest HTML5 and CSS3 where I can.
I have written my HTML Markup and CSS and before I move on to create the remainder of the site want to fix these issues first.
- After validating the markup I have the following errors that I’m unsure how to correct. Most seem to stem from the <div id=“center”> I added. If I remove <div id=“left”>, <div id=“center”> and <div id=“right”> the middle rectangle disappears and the text is found below the left hand side rectangle. I know I need to do something to the HTML here but not quite sure what it is. The other elementI tried to incorporate in the html, my aim to follow good HTML5 markup practices, was the <aside> element, but removed it due to this problem I was having.
Line 55, Column 12: No space between attributes. <div id=“center”>
Line 55, Column 18: Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier. <div id=“center”>
Line 55, Column 19: Attribute center" is not serializable as XML 1.0. <div id=“center”>
Line 55, Column 19: Attribute center" not allowed on element img at this point. <div id=“center”>
Line 65, Column 8: End tag div seen, but there were open elements.</div>
Line 50, Column 13: Unclosed element figure.<figure>
Line 108, Column 8: End tag for body seen, but there were unclosed elements.</body>
Line 49, Column 17: Unclosed element div.<div id=“left”><div id=“secondary”>
-
My other area of concern is the navigation bar and if I have left enough space for larger font sizing. I guess it is a matter of compromise, however if I have coded this totally incorrectly let me know.I will be very grateful for any advice.
-
My next issues are found when testing the code in other browsers. I have used Safari Version 5.1.1 as my base and it all looks great. However the next browser I began testing is Firefox Version 9.0.1. and it is not behaving. I haven’t started looking at other browsers yet, taking it one step at a time!
The areas that aren’t aligning correctly in Firefox 9.0.1. are the Nav ul list and the Footer ul list as well as the rounded corners on the ‘Receive e-marketing news and tips’ button. The Footer area which is a block color is not visible either.
I have included all my html, css and svg files as well as image files to give you access to the full site.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Green Sherbet Creative</title>
<meta name="description" content="Design and marketing for small business">
<meta name="author" content="Rebecca Lee">
<link rel="stylesheet" href="styles.css">
<link href="http://fonts.googleapis.com/css?family=Sonsie+One" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Fugaz+One" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet" >
<!-- [if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
</head>
<body>
<header>
<img src="greensherbet_logo_850px.png" width="700" alt="Green Sherbet Creative Logo" />
</header>
<nav>
<ul id="horz_menu">
<li><a href="index.html">Home</a></li>
<li><a href="who.html">GS Designers</a></li>
<li><a href="what.html">What We Do</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="seo.html">Website SEO</a></li>
<li><a href="socialmedia.html">Social Media</a></li>
<li><a href="emailmarketing.html">Email Marketing</a></li>
</ul>
</nav>
<div id="main">
<div id="primary">
<h1>Marketing designed to bring you more customers</h1>
<h2>Design to make your competitors green with envy</h2>
<p>Navigate through the Green Sherbet website to find valuable information that will help your small business succeed. You won’t find any fancy marketing lingo here! All will be explained, from Website SEO (search engine optimization), social media and email marketing to the basics like what the heck is a Facebook landing page anyway. Spend some time browsing our pages and learn more about boosting your sales.</p>
<p>Pressed for time and resources? Ready for Green Sherbet Creative to make a positive mark on your business? Contact us, we're waiting to share our design and marketing talent.</p>
<h3>Looking for marketing or design services in Salt Lake City?</h3>
<p><span class="contact"><a href="contact.html">Contact us to discuss your needs.</a></span></p>
<h4>We don't design or market without the end goal in mind. Our goal is your goal, increase sales and brand awareness.</h4>
<figure>
<img src="growthchart_puzzlepieces.png" alt="Representational Growth Chart" />
</figure>
</div>
</div> <!-- end of main divider -->
<div id="left">
<div id="secondary">
<figure>
<img src="constantcontact_300x250px.png" width="300" height="250" alt ="Constant Contact Offers 60 day free trial. />
</figure>
<p>no credit card required</p>
</div>
</div>
<div id="center">
<div id="tertiary">
<h4>What others are saying about</h4>
<h4><span class="green">Green </span><span class="sherbet">Sherbet </span><span class="creative">Creative</span></h4>
<blockquote><p>“Rebecca is creative, flexible and a pleasure to work with. She continues to explore new avenues for improving our community connections and regularly comes to us with fresh ideas! We couldn’t be happier with our collaboration with Green Sherbet Creative!”</p>
<p>Ian Rothfels & Laurie Staton<br/>
General Managers<br/>
Salt Lake Swimming & Tennis Club<br/>
Salt Lake City, UT</p></blockquote>
</div>
</div>
<div id="right">
<div id="quaternary">
<h4>Connect with Us</h4>
<p>- don't be shy -</p>
<figure>
<img src="facebook_logo.png" width="35" alt="Facebook Logo"/>
<img src="twitter_newbird_boxed_whiteonblue.png" width="35" alt="Twitter Logo" />
<img src="linkedIn_Icon_35px.png" width="35" alt="LinkedIn Logo" />
</figure>
<a href="http://visitor.r20.constantcontact.com/manage/optin/ea?v=0011e6K2hiA9G9Go5I9qGJLdohmNkHRPCbFFoCorgKE3qB55Q3xgI6ow39LGF3ylGjYLet5mkBijaK51Lbwnfr59A%3D%3D">Receive e-marketing<br/>news and tips</a>
</div>
</div>
<footer>
<section id="footer_links">
<h5>Additional Resources</h5>
<ul id=footerlist_1>
<li><a href="Traditional_Marketing.html">Traditional Marketing</a></li>
<li><a href="Email_Newsletters_How_To.html">Email Newsletters: How To</a></li>
<li><a href="Free_Email_Program.html">Free Email Program</a></li>
<li><a href="How_to_Market_Products.html">How to Market Products</a></li>
</ul>
<ul id=footerlist_2>
<li><a href="Google_Rank.html">Google Rank</a></li>
<li><a href="What_is_SEO?.html">What is SEO?</a></li>
<li><a href="How_to_Use_Keywords.html">How to Use Keywords</a></li>
<li><a href="What_is_linking?.html">What is Linking?</a></li>
</ul>
<ul id=footerlist_3>
<li><a href="How_to_Use_Social_Media.html">How to Use Social Media</a></li>
<li><a href="What_is_Twitter?.html">What is Twitter</a></li>
<li><a href="Twitter_Backgrounds.html">Twitter Backgrounds</a></li>
<li><a href="Facebook_Pages.html">Facebook Page</a></li>
</ul>
<ul id=footerlist_4>
<li><a href="FAQs.html">FAQs</a></li>
</ul>
</section>
<section id="copyright">
<p>Copyright © Green Sherbet Creative LLC | Design | Marketing</p>
</section>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
/*
CSS for Green Sherbet Creative Website
*/
article, aside, figure, footer, header, group, nav, section {
display:block;
}
header, nav, #main, #primary, #secondary, #tertiary, #quaternary, footer {
position: relative;
padding: .2em .5em .2em .5em;
margin: 2em auto 2em auto;
width: 880px;
}
body {
position: relative;
margin: 0;
padding: 0;
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
text-align: left;
background: #fff;
background: -moz-linear-gradient(#fff, #f4f0e9);
background: -webkit-linear-gradient(#fff, #f4f0e9);
background:-0-linear-gradient(#fff, #f4f0e9);
background: linear-gradient(#fff, #f4f0e9);
}
nav {
background-color: #E0D9CE; rgba(224,217.206.1);
position: relative;
top: 0px;
right: -18px;
width: 905px;
height: 50px;
z-index: 1;
}
#main {
position: relative;
top: -60px;
text-align: left;
margin-right: auto;
margin-left; auto;
background-color: #F4F0E9; rgba(244,240,233.1);
width: 940px;
height: 480px;
border: 0;
-moz-border-radius:20px;
border-radius: 20px;
}
#primary > h1 {
text-align: left;
margin-top: 20px;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
font-family: 'Fugaz One', cursive;
font-size: 1.5em;
font-weight: normal;
color: #645e57; rgba(100,94,87.1);
}
#primary > h2 {
position: relative;
left: 50px;
text-align: left;
margin-top: 10px;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
font-family: 'Fugaz One', cursive;
font-size: 1.5em;
font-weight: normal;
color: #9AC739; rgba(154,199,57.1);
}
#primary > p {
text-align: left
margin-top: 20px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
font-size: .9em;
color: #645e57; rgba(100,94,87.1);
}
#primary > h3 {
text-align: left;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
font-family: 'Raleway', cursive;
font-size: 1.3em;
color: #645e57; rgba(100,94,87.1);
}
.contact {
position: relative;
top: -10px;
text-align: left;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
font-size: 1em;
color: #645e57; rgba(100,94,87.1);
}
#primary > h4 {
position: relative;
left: -80px;
text-align: left;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
font-size: 1.1em;
font-weight: normal;
color: #ED1E79; rgba(237,30,121.1);
width: 520px;
}
#primary > figure img {
width: 300px;
position: absolute;
top: 230px;
left: 600px;
}
#secondary {
position: relative;
top: -70px;
left: -332px;
margin-right: auto;
margin-left: auto;
background-color: #F4F0E9; rgba(244,240,233.1);
width: 280px;
height: 245px;
border:0px;
-moz-border-radius:20px;
border-radius: 20px;
}
#secondary > figure img {
position: relative;
width: 270px;
top: -10px;
left: -35px;
margin-right: auto;
margin-left: auto;
}
#secondary + p {
position: relative;
top: 0px;
left: 0px;
margin-right: auto;
margin-left: auto;
z-index: 1;
}
#tertiary {
position: relative;
top: -300px;
left: 284px;
margin-right: auto;
margin-left: auto;
background-color: #F4F0E9; rgba(244,240,233.1);
width: 280px;
height: 245px;
border:0px;
-moz-border-radius:20px;
border-radius:20px;
}
#tertiary > h4 {
position: relative;
top: 0px;
text-align: center;
margin-right: auto;
margin-left: auto;
font-family: 'Fugaz One', cursive;
font-size: 1.0em;
font-weight: normal;
color: #645E57; rgba(100,94,87.1);
}
.green {
position: relative;
top: -10px;
font-family: 'Sonsie One', cursive;
font-size: 1.0em;
font-weight: normal;
color: #645E57; rgba(100,94,87.1);
}
.sherbet {
position: relative;
top: -10px;
font-family: 'Sonsie One', cursive;
font-size: 1.0em;
font-weight: normal;
color: #9AC739; rgba(195,215,45.1);
}
.creative {
position: relative;
margin-right: auto;
margin-left: auto;
top: -10px;
font-family: 'Sonsie One', cursive;
font-size: 1.0em;
font-weight: normal;
color: #198ABC; rgba(0,153,204.1);
}
#tertiary blockquote p {
position: relative;
top: -20px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
font-size: 10px;
color: #645e57; rgba(100,94,87.1);
text-align: justify;
margin-left: -35px;
width: 270px;
}
#quaternary {
position: relative;
top: -350px;
left: 330px;
margin-right: auto;
margin-left: auto;
background-color: #F4F0E9; rgba(244,240,233.1);
width: 280px;
height: 242px;
border:0px;
-moz-border-radius:20px;
border-radius: 20px;
}
#quaternary > h4 {
position: relative;
top: -10px;
text-align: center;
font-family: 'Fugaz One', cursive;
font-size: 1.5em;
font-weight: normal;
color: #198ABC; rgba(0,153,204.1);
}
#quaternary > p {
font-family: 'Raleway', cursive;
font-size: 1.2em;
color: #645E57; rgba(100,94,87.1);
position: relative;
top: -35px;
text-align: center;
}
#quaternary > figure img {
position: relative;
top: -35px;
left: 45px;
}
#quaternary figure + a {
display: block;
font-size: 1.1em;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 1.2;
margin: 5px 25px 5px 25px;
padding: 10px 0;
position: relative;
top: -30px;
background-color: #9ac739;
/* SVG for IE9 and Opera */
background-image: url(button-gradient.svg);
/* Old WebKit */
background-image: -webkit-gradient(radial, 30% 120%, 0, 30% 120%, 100, color-stop (0,rgba(226,234,120,1)), color-stop (1,rgba(154,199,57,1)));
*/ W3C for Mozilla */
background-image: -moz-radial-gradient (30% 120%, circle, rgba(226,234,120,1) 0%, rgba(154,199,57,1) 50%;
*/ W3C for new Webkit*/
background-image: -webkit-radial-gradient(30% 120%, circle, rgba(226,234,120,1) 0%, rgba(154,199,57,1) 50%);
*/W3c unprefixed */
background-image: radial-gradient(30% 120%, circle, rgba(226,23,120,1) 0%, rgba(154,199,57,1) 50%);
border-width: 2px;
border-style: groove;
border-top-color: #e2ea78; rgba(226,234,120.1);
border-right-color: #c3d72d; rgba(195,215,45.1);
border-bottom-color: #c3d72d; rgba(195,215,45.1);
border-left-color: #e2ea78; rgba(226,234,120.1);
-moz-border-radius: 10px;
border-radius: 10px;
}
a {
font-weight: normal;
}
a:link {
color: #645E57; rgba(100,94,87.1)
}
a:visited {
color: gray;
}
a:hover {
color: black;
}
a:focus {
color: black;
}
a:active {
color: #9AC739; rgba(154,199,57.1);
}
#horz_menu {
list-style: none;
position: relative;
top: -4px;
left: -10px;
}
#horz_menu li {
float: left;
font-size: .9em;
}
#horz_menu li a {
float: left;
text-decoration: none;
padding: .3em .9em .2em .9em;
}
#horz_menu li a:link {
color: #645E57; rgba(100,94,87.1)
}
#horz_menu li a:visited {
color: black;
}
#horz_menu li a:active {
color: #ED1E79; rgba(237,30,121.)
}
#horz_menu li a:hover, a:focus {
color: gray;
text-decoration: underline;
}
footer {
position: relative;
top: -360px;
left: -0px;
margin-right: auto;
margin-left: auto;
background-color: #645E57; rgba(100,94,87.1);
width: 940px;
height: 200px;
}
footer h5 {
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
color: #F7F4F0; rgba(247,244,240.1);
font-size: .9em;
padding: .5em;
margin: .2em .2em 1em .1em;
}
#footerlist_1 {
list-style: none;
position: relative;
top: -15px;
left: -5px;
float: left;
margin-left: auto;
margin-right: auto;
font-size: .8em;
padding: 0;
}
#footerlist_2 {
list-style: none;
position: relative;
top: -15px;
left: 50px;
float: left;
margin-left: auto;
margin-right: auto;
font-size: .8em;
padding: 0;
}
#footerlist_3 {
list-style: none;
position: relative;
top: -15px;
left: 100px;
float: left;
margin-left: auto;
margin-right: auto;
font-size: .8em;
padding: 0;
}
#footerlist_4 {
list-style: none;
position: relative;
top: -15px;
left: 150px;
float: left;
margin-left: auto;
margin-right: auto;
font-size: .8em;
padding: 0;
}
#footerlist_1 li a, #footerlist_2 li a, #footerlist_3 li a, #footerlist_4 li a {
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
color: #F7F4F0; rgba(247,244,240.1);
float: left;
text-decoration: none;
padding: .5em 1.0em .5em 1.0em;
}
#footerlist_1 li a:hover, a:focus, #footerlist_2 li a:hover, a:focus, #footerlist_3 li a:hover, a:focus, #footerlist_4 li a:hover, a:focus {
text-decoration: underline;
}
#footerlist_1 li a:visited, #footerlist_2 li a:visited, #footerlist_3 li a:visited, #footerlist_4 li a:visited {
color: #E0D9CE; rgba(224,217,206.1);
}
#copyright {
position: relative;
top: 70px;
margin-left: auto;
margin-right: auto;
float: right;
font-family: Verdana, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", "Verdana Ref", sans-serif;
color: #E0D9CE; rgba(224,217,206.1);
font-size: .7em
}
SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20050904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<title>Button Gradient</title>
<defs>
<radialGradient id="grad" cx="30%" cy="120%" fx="30%" fy="120%" r="50%" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e2ea78" />
<stop offset="1" stop-color="#9ac739" />
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#grad)" />
</svg>
Thanks for your help, I appreciate any feedback.
Rebecca
