css question

Home » Forums » Stylesheet Maker » css question


Registered User
39 posts

I'm just learning css, so this is probably a simple question. I'm following a book by Eric Meyer. Would someone please take a look at the following code and tell me why my content section won't pick up the css. I've tried to follow the code from the book exactly, but it doesn't work. The header and navlinks seem to be fine.

<!DOCTYPE html PUBLIC "-//W#C//DTD HTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Talent Gallery</title>
<style type="text/css">

/* ----- "generic" styles*/
html
body {
margin: 0; padding: 0;
background: #ffff99; color #333333;
font: small Arial, sans-serif;
}

a {
text decoration: none;
}

a img {
border: 0;
}

p {
margin: 0 0 1em;
}

/*----- header styles*/

#header {
margin-bottom: 1em; padding-top: 1px;
background: #000000;
}

#homelink {
display: block;
margin: 1em 2em 1em; padding: 2em 0 0.5em 1em;
}

#navlinks {
margin: 0; padding: 0.5em 3em;
background: #bd111f;
}

#navlinks li {
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #ffff99;
}

#navlinks li.last {
border-right: 0;
}

#navlinks a {
color: #ffff99;

/* ----- main column styles */

#content {
float: left;
padding: 0 20em 4em 3em;
}

#content h1 {
margin: 0 33% 1.25em -2em; padding: 0.5em 2em;
font-color: #800000;
font-size: 1.5em;
}

#content h2 {
margin: 0 33% 1.25em -2em; padding: 0.5em 2em;
color: #800000;
font-size: 1.25em;
}

/* ----- sidebar styles*/

#sidebar {
float: left;
width: 17em;
margin: 0 0 4em -18em;
}

/* ----- footer styles*/

#footer {/a>
clear: both;
padding: 1.5em 3em;
background: #000000;
}

#footer p {
margin: 0;
}

#footer a {
color: #333333;
text-decoration: underline;
}

</style>

</head>

<body>
<div id="header">
<a href="#" id="homelink"><img src="images/logo3.gif" alt="My Talent Gallery"/></a>

<ol id="navlinks">
<li class="first"><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li class="last"><a href="link">link</a></li>
</ol>
</div>

<div id="content">
<h2>Heading</h2>
<p>
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
</p>
<p>
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
</p>
</div>


Thanks


Senior Advisor
3,144 posts

Leone,

There is a missing "}" in your code.

#navlinks a {
color: #ffff99;

/* ----- main column styles */

Put the } on the blank line just below the color and you will see a marked change in the layout of your site.

Hope this helps.

Bill Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family


Registered User
39 posts

WOW! Thanks. It's amazing what one little missing bracket will do, huh! That did the trick.

Leone


Senior Advisor
3,144 posts

Glad to help.

One thing you can do to find things like that is to visit the W3 validation sites or use Firefox and an addon to FF that will point out errors in your CSS and HTML.

Bill Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.