1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Simple CSS/XHTML

Discussion in 'HTML, Graphics & Programming' started by joemorris86, 7 Feb 2006.

  1. joemorris86

    Banned

    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:

    [​IMG]

    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.

    [​IMG]

    Many thanks for any help :)
     
    Last edited: 7 Feb 2006
  2. Bloo_Fish

    Hitman

    Joined: 9 Nov 2002

    Posts: 748

    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.
     
  3. uchuff

    Wise Guy

    Joined: 30 Jul 2003

    Posts: 2,259

    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.
     
  4. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    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: 7 Feb 2006