Jump to content

Check my code please

curt22

By curt22
in HTML Help

 Share

Recommended Posts

curt22 Member

curt22

Posted
Posted

hello everyone I'm new to xhtml/css and I'm just about finished my first full xhtml/css page :D. I was wondering if you guys could look at it and let me know if you can see any problems or if you know a better way to do something I did, because I want to learn how to make good pages. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Your Page</title>



<style type="text/css">

body,
html {
	margin:0;
	padding:0;
	background:#000000;
	color : #00cc00;

}
body {
	min-width:810px;
}
#wrap {
	background:#000000;
	margin: 0 auto;
	width:810px;

}
#wrap img {
float:left;
}
#header {
background-color:#000000;
height:75px;
margin-top:3px;
}



#header h1 {
    	margin:0;
	padding:0;
	line-height:75px;
	font-family:"Comic Sans MS";
	margin-left:80px;
	color:#00CC00;
    }

#main {
	background:#000000;
	float:right;
	width:560px;
	color:#00FF00;
}
#main h2, #main h3, #main p {
	padding:0 10px 0 0;
    }
#sidebar {
	background:#000000;
	float:left;
	width:240px;


}
#sidebar ul {
	margin-bottom:0;
	margin:0 0 0 0; padding: 0 0 0 0; list-style-type: none; text-align:left; 
    }


    #sidebar h3{
	padding:0 0 0 0;
	margin-top:5px;
	margin-left:3px;
	margin-bottom:3px;
	text-align:center;
	color:#00FF00;

    }
#sidebar a
{
line-height:20px;
text-decoration:none;
margin-left:3px;
color:#00FF00;
text-align:left;
}
#sidebar a:hover
{

text-decoration:underline;
}
#sidebar img 
{
margin-left:3px;
border:0;
float:left;
}
#footer {
clear:both;
color:#00ff00;
background-color: #000000;
font-size:12px;
margin:0;
}


</style>
</head>
<body>

<div id="wrap">
<div id="header"><img src="green-planet.gif" width="75" height="75" alt="Green Planet" /><h1>Your Website</h1></div>

<div id="main">
	<h2>Column 1</h2>


	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
	<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Quisque congue egestas elit. Quisque viverra.</p>



</div>
<div id="sidebar">
	<h3>Column 2</h3>

	<ul>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 1</a></li>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 2</a></li>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 3</a></li>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 4</a></li>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 5</a></li>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 6</a></li>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 7</a></li>
		<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" alt="Glowing Green Button" /></a><a href="#">Link 8</a></li>
	</ul>
</div>
<div id="footer">
	<p>Portions of this website were created using the free web resources available at www.elated.com and are copyright Elated Communications Ltd 1996-2002 Designed by Curtis LeBlanc</p>
</div>
</div>
</body>
</html>

 

Link to comment
https://forums.phpfreaks.com/topic/74082-check-my-code-please/
Share on other sites
curt22 Member

curt22

Posted
  • Author
Posted

I just changed the images to css background images. here is the new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Your Page</title>
  <style type="text/css">


        body,
        html {
                margin:0;
                padding:0;
                background:#000000;
                color : #00cc00;

        }
        body {
                min-width:810px;
        }
        #wrap {
                background:#000000;
                margin: 0 auto;
                width:810px;

        }
        #wrap img {
        float:left;
        }
        #header {
        background-color:#000000;
        height:75px;
        margin-top:3px;
        }



        #header h1 {

                padding:0;
                line-height:75px;
                font-family:"Comic Sans MS";
                margin-left:80px;
                color:#00CC00;
    }

        #main {
                background:#000000;
                float:right;
                width:560px;
                color:#00FF00;
        }
        #main h2, #main h3, #main p {
                padding:0 10px 0 0;
    }
        #sidebar {
                background:#000000;
                float:left;
                width:240px;


        }
        #sidebar ul {

                margin:0 0 0 0; padding: 0 0 0 0; list-style-type: none; 
    }


    #sidebar h3{
                padding:0 0 0 0;
                margin-top:5px;
                margin-left:3px;
                margin-bottom:3px;
                text-align:center;
                color:#00FF00;


    }
        #sidebar a
        {
        line-height:20px;
        text-decoration:none;
        margin-left:3px;
        color:#00FF00;
        text-align:left;
        }
        #sidebar a:hover
        {

        text-decoration:underline;
        }
        #sidebar img
        {
        margin-left:3px;
        border:0;
        float:left;
	}
	.image {
	background-image:url(glowing-green-button.gif);
height : 20px;
width : 20px;
float:left;
}
        #footer {
        clear:both;
        color:#00ff00;
        background-color: #000000;
        font-size:12px;
        margin:0;
        }
	#footer p{
	padding-top:0;
	}



  </style>
</head>

<body>
  <div id="wrap">
    <div id="header">
      <img src="green-planet.gif" width="75" height="75" alt=
      "Green Planet" />

      <h1>Your Website</h1>
    </div>

    <div id="main">
      <h2>Column 1</h2>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Mauris vel magna. Mauris risus nunc, tristique varius,
      gravida in, lacinia vel, elit. Nam ornare, felis non faucibus
      molestie, nulla augue adipiscing mauris, a nonummy diam
      ligula ut risus. Praesent varius. Cum sociis natoque
      penatibus et magnis dis parturient montes, nascetur ridiculus
      mus.</p>

      <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Fusce pulvinar lobortis purus.
      Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Donec semper ipsum et urna. Ut
      consequat neque vitae felis. Suspendisse dapibus, magna quis
      pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat
      vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec
      ante in quam sollicitudin congue. Quisque congue egestas
      elit. Quisque viverra. Donec feugiat elementum est. Etiam vel
      lorem.</p>

      <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis
      a, semper quis, purus. Cras at tortor in purus tincidunt
      tristique. In hac habitasse platea dictumst. Ut eu lectus eu
      metus molestie iaculis. In ornare. Donec at enim vel erat
      tempor congue. Nullam varius. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Nulla feugiat hendrerit risus.
      Integer enim velit, gravida id, sollicitudin at, consequat
      sit amet, leo. Aliquam nec ante in quam sollicitudin congue.
      Quisque congue egestas elit. Quisque viverra. Quisque congue
      egestas elit. Quisque viverra.</p>
    </div>

    <div id="sidebar">
      <h3>Column 2</h3>

      <ul>
        <li><div><div class="image"></div><a href="#">Link 1</a></div></li>
	<li><div><div class="image"></div><a href="#">Link 2</a></div></li>
	<li><div><div class="image"></div><a href="#">Link 3</a></div></li>
	<li><div><div class="image"></div><a href="#">Link 4</a></div></li>
	<li><div><div class="image"></div><a href="#">Link 5</a></div></li>
	<li><div><div class="image"></div><a href="#">Link 6</a></div></li>
	<li><div><div class="image"></div><a href="#">Link 7</a></div></li>
	<li><div><div class="image"></div><a href="#">Link 8</a></div></li>

        
      </ul>
    </div>

    <div id="footer">
      <p>Portions of this website were created using the free web
      resources available at www.elated.com and are copyright
      Elated Communications Ltd 1996-2002
  <br />
  Designed by Curtis LeBlanc</p>
    </div>
  </div>
</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/74082-check-my-code-please/#findComment-374357
Share on other sites
curt22 Member

curt22

Posted
  • Author
Posted

Didn't you already post about this website? I seem to remember posting this response - http://www.phpfreaks.com/forums/index.php/topic,163487.msg718926.html#msg718926

yes I have posted about this page before. And i tried some of your suggestions, like validating it and moving the css to a separate file (i just posted it as one file). I also changed it to use background images.

Link to comment
https://forums.phpfreaks.com/topic/74082-check-my-code-please/#findComment-375680
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.