Simple CSS/XHTML

joemorris86 · 7 Feb 2006 at 05:45

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:

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.

Many thanks for any help

Bloo_Fish · 7 Feb 2006 at 07:51

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.

uchuff · 7 Feb 2006 at 08:02

You could probably get what you want with the layoutomatic, also as Bloo_Fish says, you don't need the paragraph tags around your heading, just remove them.

iCraig · 7 Feb 2006 at 09:56

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.