Simple CSS/XHTML

Suspended
Joined
30 Jan 2005
Posts
467
Hey guys, Im just trying some xhtml/css for the first time. Heres my code:

<!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>
<title>Title goes here</title>

<style type="text/css">

h1
{
color: red;
font-style: underline;
font-size: 8pt;
text-decoration: underline;
}

h2
{
color: pink;
font-size: 20pt;
text-decoration: underline;
}

</style>

</head>


<body>
<p><h1>Body text goes here</h1></p>
<p><h2>Body text goes here</h2></p>

<img src="http://www.w3schools.com/banners/altova_stylevision.gif" id="picture1" name="picture1" alt="picture1" />

</body>

</html>

When I try to validate I get 2 errors:

11za.jpg


Also, I have a favour to ask of someone, If its not too time consuming, could someone make the following image into xhtml/css. (I work best from studying code) And In return i can offer web hosting or a domain name. I would offer money but I dont think im allowed and anyways, my crappy internet wont let me in my paypal, but thats a different story.

22nx.jpg


Many thanks for any help :)
 
Last edited:
Associate
Joined
9 Nov 2002
Posts
745
Location
Bucks [uk]
Don’t really have time to read your whole post and answer everything, but as an obvious thing, your not allow <h1>/<h2> tags in <p> tags which is why you are getting those errors.
 
Permabanned
Joined
21 Apr 2004
Posts
13,312
Location
Wolverhampton
Yes you cannot have <h1> in a <p>.

But here's why..

both <h> and <p> are text formatting tags. H bieng a heading and P representing a normal Paragraph.

Giving a <h1> represents the biggest and most prominent heading. There a six headings, <h1> <h2> <h3> etc.

So you're getting an error because you can't tell some text to be a heading and a normal paragraph at the same time.

Oh and:

Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>OCUK Example</title>
<style type="text/css">
body {
	background-color: #FFFFFF;
	color: #000000;
}

#Container {
	margin-left: auto;
	margin-right: auto;
	width: 325px;
	height: 333px;
	border: 1px #000000 solid;
	text-align: center;
	padding: 10px;
}
#FirstBox {
	text-align: left;
	width: 304px;
	height: 84px;
	background-color: #C0C0C0;
	border: 1px #000000 solid;
}
#SecondBox {
	text-align: left;
	width: 304px;
	height: 216px;
	border: 1px #000000 solid;
	background-color: #C0C0C0;
	margin-top: 7px;
}	
p {
	padding-left: 5px;
}
</style>
</head>

<body>
  <div id="Container">
    <div id="FirstBox">
      <p>text 1</p>
    </div>
    <div id="SecondBox">
      <p>text 2</p>
    </div>
  </div>
</body>

</html>

The code may be a bit messy due to the forums formatting but should still work, if it doesn't validate or whatever its because it was done in 56 seconds. :D
 
Last edited:
Back
Top Bottom