Forum Moderators: not2easy
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="javajam.css" type="text/css"/>
<div id="container">
<title>Example</title>
</ div>
</head>
<body>
<div id="nav">
<h1>Example</h1>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="music.html">Music</a>
<a href="jobs.html">Jobs</a>
</div>
<p>
<ul type="square">
<li>specifics</li>
<li>specifics</li>
<li>specifics</li>
<li>specifics</li>
</ul>
</p>
<p>Address<br />
Address <br />
Address
</p>
<div id="footer">
specfics <br />
<a href="#">specifics</a>
</div>
</body>
</html>
STYLESHEET---
Body { background-color: #ffffcc;
color: #330000;
font-family: Verdana, Arial, Sans-serif;
}
h1 { background-color: #ccaa66;
color: #000000;
line-height: 200%;
text-align:center;
}
#nav { text-align: center; }
#footer {background-color: #ccaa66;
color: #000000;
font-size: .60em;
font-style: italic;
text-align: center;
}
#container { margin-left: auto;
margin-right: auto;
width: 80%
}
[edited by: swa66 at 8:57 pm (utc) on Sep. 27, 2009]
[edit reason] Removed specifics [/edit]
Issue #1 is to be sure that you want to use an XHTML DTD. Perhaps you do, but if not used exactly correctly, the xml prologue may cause the page to not render at all, and if not using xml, then really no need for XHTML DTD at all. Opinion varies on this subject, but you need to be very aware of the choice of DTD. Most people, most of the time, are probably better off with HTML 4.01 Strict. The right and wrong of a DTD choice can be complex and controversial. Very unlikely that you need XHTML at this time.
[webmasterworld.com...]
[webmasterworld.com...]
[webmasterworld.com...]
.....................................
2)
<div id="container">
The <div> selector cannot be used in the head.
3) For Accessibility considerations, it is recommended that links be separated by at least one character. I have replaced your with a tilde. You could set the visibility to hidden with a <span> or hide by matching the color to the background-color:
4) You cannot put a block level element, such as <ul> inside of a <p>. Use a <div>.
5)
<ul type="square">
This doesn't do anything. I have put a class on the <ul>, and noted that the <li> in <ul> with this clas should have a list-style-type: of 'square'.
6)
All it says to do is to put a <div> in the <body> tag. But I already have a <div> on another element. So I'm really confused. I put it in the <header> tag and it works,
That is defining 'works' pretty loosely. NO HTML in the <head>! You can have as many <div> in a page as you need. To style specific <div>s, give them a class or id.
7) I have shorthanded the color declarations. This is optional.
8)
Body { background-color: #ffffcc;
Lowercase is best practice.
9)
#container { margin-left: auto;
margin-right: auto;
width: 80%
}
This is okay, though margin: 10% auto; would be more common. The end result should be the same unless needing to hack for an IE fix.
10) The quick hack below validates. Note that I have not added your #container wrapper to the XHTML. Everything is rendering as it should- if not as you want. If you want a different look, then you need to make changes.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="javajam.css" type="text/css"/>
<title>Example</title>
<style type="text/css" media="all">
body { background-color: #ffc;
color: #300;
font-family: Verdana, Arial, Sans-serif;
}h1 {
background-color: #ca6;
color: #000;
line-height: 200%;
text-align: center;
}#nav {
text-align: center;
}#footer {
background-color: #ca6;
color: #000;
font-size: .6em;
font-style: italic;
text-align: center;
}#container {
margin-left: auto;
margin-right: auto;
width: 80%
}ul.square li {
list-stlye-type: square;
}
</style>
</head>
<body>
<div id="nav">
<h1>Example</h1>
<a href="index.html">Home</a> ~
<a href="menu.html">Menu</a> ~
<a href="music.html">Music</a> ~
<a href="jobs.html">Jobs</a>
</div>
<div>
<ul class="square">
<li>specifics</li>
<li>specifics</li>
<li>specifics</li>
<li>specifics</li>
</ul>
</div>
<p>
address
<br />
address
<br />
address
</p>
<div id="footer">
specifics
<br />
<a href="#">specifics</a>
</div>
</body>
<!--##########
Hello, I am trying to find some help for an assignment for my class. I am using an external style sheet and my assignment is complete, except for centering the entire webpage. My book doesn't give me a clear way of setting up the html tags. All it says to do is to put a <div> in the <body> tag. But I already have a <div> on another element. So I'm really confused. I put it in the <header> tag and it works, but when I use the validator.w3.org, it says I have nine errors. I have to make sure there are ZERO errors.. and I just can't figure it out. lol Any help at all would be greatly appreciated. Here is the code with the errors and the style sheet at the bottom.
-->
</html>
11) The CSS looks like you dropped in #container during the process and just put it at the bottom of the stylesheet. Best practice is to keep your .css in good order; Ship-shape and Bristol fashion. If that is your main 'wrapper' it should be placed just after the body declaration.
CSS should always be organized, prioritized and commented, so that a year from now you can go in and easily understand what you did today and why. You will not remember!
12) Here are three text books. Learn here and you will truly understand 'what', 'why', and 'how'.
[w3.org...]
[w3.org...]
Don't get sidetracked into CSS3 just yet. You are learning. Leave it alone for now.
[w3.org...]
13) That should get you started.
[edited by: swa66 at 8:59 pm (utc) on Sep. 27, 2009]
[edit reason] specifics removed from quoted example as well [/edit]
