Can someone check my coding?

Discussion in 'HTML & Website Design' started by wholesalechecklist, Mar 4, 2007.

  1. #1
    I am writing a website from scratch for the first time in my life.

    Its called "Mission Environment", and I have www.missionenvironment.com, but right now, I am building it on www.biggerhockey.com

    Below I will post my code. If someone can just read it over, make sure it is all ok I would really appreciate it. Also, I have a few questions:

    1) When having an h2 be a link, does the h2 go inside the <a> tag, or does the <a> tag go inside the h2?

    2) How to I get my left menu to go all the way down?

    PS - do not mind the color scheme right now, I am just getting the backbone up and going, then I will handle colors.

    Thanks everyone

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Mission Environment</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
    <div id="container">
    <div id="topmenu">links here</div>
    <div><img src="images/top.gif"></div>
    <div id="leftmenu">
    <div id="leftcategories">Main Menu</div>
    <div id="leftlinks"><a href="">Test Link</a><br />
    <a href="">Home</a><br />
    <a href="">Current News</a><br />
    <a href="">How to Take Action</a><br />
    <a href="">Why to Take Action</a><br />
    <a href="">Advertising</a><br />
    <a href="">Contact Us</a><br /></div>
    <div id="leftcategories">Sponsors</div>
    <div id="leftlinks">spoonsor<br />
    spoonsor<br />
    spoonsor<br />
    spoonsor<br /></div>
    </div>
    <div id="main">
    <div id="banner"><a href=""><img src="images/blankbanner.gif" border="0"></a></div>
    <div id="content">
    <h1>Welcome to Mission Environment!</h1>
    <p>Mission Environment is looking to make the future a better place.  Our goal is to show the general population how urgent the threat is from global warming and provide everyone quick and easy ways to take action.</p>
    <div id="highlight"><h2><a href="">How to Take Action Now</a></h2>
    <p>Worried about global warming but don't know what to do?  Check out our growing list of quick and easy things you can do to make a difference!</p></div>
    <h1>Current News</h1>
    <div id="rss">
    <?php
    $olderror_reporting =error_reporting(0);
    include ("http://www.rssfeedreader.com/rss3/rss.php?url=http%3A%2F%2Frss.msnbc.msn.com%2Fid%2F3032492%2Fdevice%2Frss%2Frss.xml&newpage=1&chead=1&atl=1&desc=1&owncss=1&eleminate=&auth=&dts=&width=300&max=5&tlen=0&rnd=&bt=3&bs=Double&nmb=&ntb=&naf=&nst=&nwd=0&nht=0&dlen=0&lstyle=-1&lc=Blue&bg=White&bc=Gray&spc=&ims=1&tc=&ts=11&tfont=Verdana,+Arial,+Sans-serif&rf=".$HTTP_SERVER_VARS['SERVER_NAME'].$HTTP_SERVER_VARS['PHP_SELF']."&phpout=1");
    error_reporting($olderror_reporting);
    ?>
    </div>
    </div>
    </div>
    <div id="footer">| © Mission Environment 2007 |</div>
    </div>
    </body>
    </html>
    
    Code (markup):
    
    /* CSS Document */
    
    body {
    	background-color: #FFFFFF;
    	font-family: verdana, arial, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #888888;
    	text-decoration: none;
    }
    #container {
    	margin: 35px auto;
    	width: 780px;
    	border-style: solid;
    	border-color: #000000;
    	border-width: 1px;
    }
    #topmenu {
    	width: auto;
    	text-align: center;
    	background: #E8E8E8;
    }
    #topmenu a:hover{
    	color: #BBCDD9;
    	font-weight: bold;
    	text-decoration : none;
    }
    #topmenu a:link, .topmenu a:visited {
    	color: #BBCDD9;
    	font-weight: bold;
    	text-decoration : none;
    }
    #leftmenu {
    	width: 199px;
    	height: 100%;
    	background: #E8E8E8;
    	float: left;
    	border-style: solid;
    	border-color: #000000;
    	border-right-width: 1px;
    	border-left-width: 0px;
    	border-top-width: 0px;
    	border-bottom-width: 1px;
    }
    #leftmenu a:hover{
    	color: #BBCDD9;
    	font-weight: bold;
    	text-decoration : none;
    }
    #leftmenu a:link, .topmenu a:visited {
    	color: #BBCDD9;
    	font-weight: bold;
    	text-decoration : none;
    }
    #leftlinks {
    	background: #E8E8E8;
    	padding: 2px 2px 2px 10px;
    }
    #leftcategories {
    	background: #FFFFFF;
    	padding: 3px 3px 3px 5px;
    	font-size: 12px;
    }
    #main {
    	width: 580px;
    	float: right;
    }
    #content {
    	margin: 0px 13px 0px 20px;
    	width: 90%;
    	padding: 5px 0px 0px 0px;	
    }
    #highlight {
    	border-color: #000000;
    	border-width: 2px;
    	border-style: solid;
    	background: #E8E8E8;
    	padding: 0px 3px 0px 3px;
    	margin: 0px 0px 0px 0px;	
    }
    #banner {
    	padding: 5px 5px 0px 5px;
    	text-align: center;
    }
    #footer {
    	float: bottom;
    	width: auto;
    	background: #E8E8E8;
    	text-align: center;
    	clear: both;
    	text-align: left;
    	padding: 2px 10px 2px 10px; 
    }
    h1 {
    	font-family: verdana, arial, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	color: #C3C3C3;
    	margin: 3px 0px 3px 0px;
    	padding: 0px 0px 0px 0px;
    	border-bottom: 1px dotted #CCCCCC;
    }
    h2 {
    	font-family: verdana, arial, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #000000;
    	margin: 0 0 5px 0;
    	padding: 10px 0px 0px 0px;
    	text-align: left;
    }
    h3 {
    	font-family: verdana, arial, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	color: #666666;
    	margin: 0px 0px 15px 0px;
    	padding: 10px 0px 5px 0px;
    	border-bottom: 1px solid #CCCCCC;
    }
    
    Code (markup):
     
    wholesalechecklist, Mar 4, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    A few obvious issues:
    • Use a complete DTD, including the url. Without it, browsers will be in quirks mode. You will play hell trying to get browsers to agree in quirks.
    • Any new document should be marked up against a strict DTD, not loose or transitional. There is no sane reason to use deprecated elements or attributes.
    • A menu is a list, by definition, and should be marked up as a list.
    • There is no such thing as {float: bottom;}, only left, right or none.
    • Do not post php code. Post the server output; that's what the browser sees and what we work with here.
    Side issues:
    • Do all primary testing in a modern, compliant browser. Firefox is the best choice at this time, with Opera a close second. IE is neither modern nor compliant, but it's mostly trivial to fix. If you develop against IE, you will create buggy code that is damned near impossible to fix for other browsers.
    • Validate your html and css early and often. Without valid markup, It's not possible to properly debug with any expectation of consistency. The web developer extension on your Firefox will make this trivial to do.

    cheers,

    gary
     
    kk5st, Mar 5, 2007 IP
  3. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #3
    What DTD should I use?
    What do you mean the menu is a list, and should be marked up as one?
     
    wholesalechecklist, Mar 5, 2007 IP
  4. bobby9101

    bobby9101 Peon

    Messages:
    3,292
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Use XHTML 1.0 strict, or transitional... strict preferred
     
    bobby9101, Mar 5, 2007 IP
  5. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I have no idea what that means or how to impliment it in my website. Can you just paste the code here? I couldnt find it on google.
     
    wholesalechecklist, Mar 5, 2007 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    ??? Did you try "DTD" as the search term?

    See ALA. Use a strict html4.01 or xhtml1.0 for any new document.

    The purpose of html markup is to label each part of the document for what it is. A bunch of text is called a paragraph and marked as <p></p>. Likewise, a menu is a list—look it up. It should be marked up as a list. Section and subsection headers are marked as <hx> in levels 1–6. Then there are quotes and blockquotes, and code snippets and keyboard bits. All of those tags describe the text they surround. Going on, the div is used to group other elements together forming a new context, while the span segregates a bit of inline material from its context.

    All these labels are put together to form the nodes of the document object model (DOM) which is what the css and javascript actually work with. The more accurate your markup, the simpler it becomes to apply css and javascript for non-trivial presentations and behaviors.

    cheers,

    gary
     
    kk5st, Mar 5, 2007 IP
  7. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks a lot Gary, that helped a lot. I will make those changes tomorow night.

    Just to switch the topic a little, I am still having trouble getting my menu to go all the way to the bottom. Could this be solved by fixing the DTD code? I looked through my css and couldnt find any other problems...
     
    wholesalechecklist, Mar 5, 2007 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    Google "faux columns", or follow my sig link and go to "2 columns&#8212;apparent equal height".

    cheers,

    gary
     
    kk5st, Mar 5, 2007 IP
  9. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I understand the logic behind faux columns, but I dont think that is my problem. I dont even think that would work right now because my left menu isnt even going down all the way...
     
    wholesalechecklist, Mar 5, 2007 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    The point is that the columns are not actually equal length, they just look as if they are.

    cheers,

    gary
     
    kk5st, Mar 5, 2007 IP
  11. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #11
    so websites never have columns that are really equal height?
     
    wholesalechecklist, Mar 6, 2007 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    You can if you use tables, but that's an unnecessary evil. If IE were a modern browser, it would be possible without the table markup, but that pig is holding damned near everything back with its poor support of css2. Because of IE, we're left with kluges and work-arounds.

    You may see a 2 column layout for modern browsers on my site also. You will see that Fx, Opera, Konqueror, et al render things just fine, while IE screws it up.

    cheers,

    gary
     
    kk5st, Mar 6, 2007 IP
  13. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Ok, so i decided to just go with the faux columns after all.

    I was reading your suggestions from before, and you said to use ul and li tags for my menu. Just wondering, should I use it for the entire menu including the menu titles, or just for the link?
     
    wholesalechecklist, Mar 7, 2007 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    You really need to make your page markup 100% valid. You have errors.

    As to the menus, where you have this
    
    <div class="leftcategories">Main Menu</div>
    
    <div class="leftlinks"><a href="http://www.biggerhockey.com/" class="leftlinks">Home</a><br />
    <a href="http://www.biggerhockey.com/" class="leftlinks">Current News</a><br />
    <a href="http://www.biggerhockey.com/" class="leftlinks">How to Take Action</a><br />
    <a href="http://www.biggerhockey.com/" class="leftlinks">Why to Take Action</a><br />
    <a href="http://www.biggerhockey.com/" class="leftlinks">Resources</a><br />
    <a href="http://www.biggerhockey.com/" class="leftlinks">Advertising</a><br />
    <a href="http://www.biggerhockey.com/" class="leftlinks">Contact Us</a><br /></div>
    <div class="leftcategories">Sponsors</div>
    <div class="leftlinks">sponsor<br />
    
    sponsor<br />
    sponsor<br />
    sponsor<br /></div>
    </div>
    Code (markup):
    I'd do this
    
    <div id="sidebar"> <!-- name things for what they are, not how they look -->
      <h3>Main Menu</h3> <!-- arbitrary level&#8212;use the appropriate level -->
    
      <ul class="sidebar_links">
        <li><a href="some.html">Home</a></li>
        <li><a href="some.html">Current News</a></li>
        <li><a href="some.html">How to Take Action</a></li>
        <li><a href="some.html">Why to Take Action</a></li>
        <li><a href="some.html">Resources</a></li>
        <li><a href="some.html">Advertising</a></li>
        <li><a href="some.html">Contact Us</a></li>
      </ul>
    
      <h3>Sponsors</h3>
    
      <ul>
        <li>sponsor</li>
        <li>sponsor</li>
        <li>sponsor</li>
        <li>sponsor</li>
      </ul>
    </div>
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 7, 2007 IP
  15. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #15
    My code is valid. All the unvalid comments there are from my rss feed. I am going to find a new one that is more friendly...

    Anyway, thanks for the new code. I customized it so it would work, and its great. Unfortunately, the menu still has space on the top and I cannot get rid of it.

    Also, I tried getting rid of the bullets on the menu without success.

    If someone can help with these two issues, it would be very much appreciated.

    Edit: I got the bullets gone after searching google extensively and then trial and error. Now the only thing left is the space I cannot get rid of above my menu.
     
    wholesalechecklist, Mar 7, 2007 IP
  16. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Got a little bit closer by adding some margin 0 to a few id's. There are still a few empty pixels though, and I cant figure out what it is from. Here is the new code:

    /* CSS Document */
    A { text-decoration: none; } 
    A:link { color: #69822f; text-decoration: underline} 
    A:visited { color: #69822f; text-decoration: underline} 
    A:hover { color: #964DAE; text-decoration: underline}
    
    html, body {
    	background-color: #FFFFFF;
    	font-family: verdana, arial, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	text-decoration: none;
    }
    #container {
    	background: #ccc url(../images/bg.gif) repeat-y 50% 0;
    	margin: 35px auto;
    	width: 780px;
    	border-style: solid;
    	border-color: #000000;
    	border-width: 1px;
    }
    #topmenu {
    	width: auto;
    	text-align: left;
    	background: #69822f;
    }
    #sidebar {
    	width: 200px;
    	float: left;
    	border: 0;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    }
    ul.sidebar_links a:link{
    	color: #000000;
    	font-weight: bold;
    	text-decoration : none;
    }
    ul.sidebar_links a:visited{
    	color: #000000;
    	font-weight: bold;
    	text-decoration : none;
    }
    ul.sidebar_links a:hover{
    	color: #BBCDD9;
    	font-weight: bold;
    	text-decoration : none;
    }
    .sidebar_links {
    	padding: 2px 2px 2px 10px;
    }
    #main {
    	width: 579px;
    	float: right;
    }
    #content {
    	margin: 0px 13px 0px 20px;
    	width: 520px;
    	padding: 5px 0px 0px 0px;	
    }
    #highlight {
    	border-color: #000000;
    	border-width: 2px;
    	border-style: solid;
    	background: #E8E8E8;
    	padding: 0px 3px 0px 3px;
    	margin: 5px 0px 5px 0px;	
    }
    #banner {
    	padding: 5px 5px 0px 5px;
    	text-align: center;
    }
    #ad {
    	border: 0px;
    }	
    #footer {
    	width: auto;
    	background: #E8E8E8;
    	text-align: center;
    	clear: both;
    	text-align: left;
    	padding: 2px 10px 2px 10px; 
    	border-style: solid;
    	border-top-width: 1px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-right-width: 0px;	
    }
    h1 {
    	font-family: verdana, arial, sans-serif;
    	font-size: 15px;
    	font-weight: bold;
    	color: #000000;
    	margin: 3px 0px 3px 0px;
    	padding: 0px 0px 0px 0px;
    	border-bottom: 1px dotted #000000;
    }
    h2 {
    	font-family: verdana, arial, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #000000;
    	margin: 0 0 5px 0;
    	padding: 10px 0px 0px 0px;
    	text-align: left;
    }
    h3 {
    	background: #69822f;
    	padding: 3px 3px 3px 5px;
    	font-size: 12px;
    	margin: 0px 0px 0px 0px;
    }
    #rss {
    	border-bottom: 1px dotted #000000;
    	border-left: 1px dotted #000000;
    	border-right: 1px dotted #000000;
    	border-top: 0;
    	padding-left: 5px;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	margin-bottom: 5px;
    }
    div.clear:after
    {
    	height:1%;
    	clear:both;
    	content:".";
    	height:0;
    	visibility:hidden;
    }
    .menutitle {
    	font-color : #9933ff;
    }
    .sidebar_links li {
    	list-style-type: none;
    }
    .sidebar_links ul {
    	list-style-type: none;
    }
    Code (markup):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Mission Environment</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="global warming, emissions, environment, alternative energy, clean energy, preserve energy, pollution, " />
    <meta name="description" content="Mission Environment is dedicated to spread the word on global warming by encouraging people to use clean energy to save the environment." />
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
    <div id="container">
    <div id="topmenu">Title Image Here</div>
    <div><img src="images/top.gif" alt="Save the environment by preserving energy" /></div>
    <div id="sidebar">
    <h3>Main Menu</h3>
    
    <ul class="sidebar_links">
    <li><a href="http://www.biggerhockey.com/" class="leftlinks">Home</a></li>
    <li><a href="http://www.biggerhockey.com/" class="leftlinks">Current News</a></li>
    <li><a href="http://www.biggerhockey.com/" class="leftlinks">How to Take Action</a></li>
    <li><a href="http://www.biggerhockey.com/" class="leftlinks">Why to Take Action</a></li>
    <li><a href="http://www.biggerhockey.com/" class="leftlinks">Resources</a></li>
    <li><a href="http://www.biggerhockey.com/" class="leftlinks">Advertising</a></li>
    <li><a href="http://www.biggerhockey.com/" class="leftlinks">Contact Us</a></li>
    </ul>
    <h3>Sponsors</h3>
    
    <ul class="sidebar_links">
    <li>sponsor</li>
    <li>sponsor</li>
    <li>sponsor</li>
    <li>sponsor</li>
    </ul>
    </div><div id="main">
    <div id="banner"><a href=""><img src="images/blankbanner.gif" id="ad" alt="custom banner alt tag here" /></a></div><div id="content">
    <h1>Welcome to Mission Environment!</h1>
    <p>Mission Environment is looking to make the future a better place.  Our goal is to show the general population how urgent the threat is from global warming and provide everyone quick and easy ways to take action.</p>
    <div id="highlight"><h2><a href="">How to Take Action Now</a></h2>
    
    <p>Worried about global warming but don't know what to do?  Check out our growing list of quick and easy things you can do to make a difference!</p></div>
    <h1>Current News</h1>
    <div id="rss">
    </div>
    </div>
    </div>
    <div class="clear"></div>
    <div id="footer">| © Mission Environment 2007 |</div></div>
    </body>
    </html>
    Code (markup):
     
    wholesalechecklist, Mar 7, 2007 IP
  17. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #17
    That gap is due to the natural positioning of an image within the inline box. Follow my sig link and look for a link to "mysterious gaps". It will explain the reasons. In the meantime, do
    
    img {
        vertical-align: bottom;
        } 
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 7, 2007 IP
  18. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Gary, I really appreciate the help you gave me over the past few days. I am going to give you a free featured link on my directory Search Purple. PM me the link you want to use and then submit it on my site.

    I have two more questions:

    I validated my resources page, and apparently <dd> and the target="_blank" codes are not valid. What can I do to replace them?
     
    wholesalechecklist, Mar 8, 2007 IP
  19. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #19
    The target attribute has been deprecated since html 4, 1999, in favor of javascript. This is a Good Thing, as behavior should be separated from semantics/structure.

    I like your thinking in trying to introduce the definition list's definition data element. The ul and ol lists may only contain li elements. :oops:

    The bolded group headers should be, er, um, headers at the proper level.

    Here is how I would mark things up:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <meta name="generator"
            content="HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
      <meta name="editor"
            content="Emacs 21" />
      <meta name="author"
            content="Gary Turner" />
      <meta http-equiv="content-type"
            content="text/html; charset=UTF8" />
    
      <title>DL demo</title>
    
      <script src="test.js" type="text/javascript"></script>
    
      <style type="text/css">
      /*<![CDATA[*/
    
      html, body {
        margin: 0;
        padding: 0;
        }
    
    body {
        font: 100%/1.25 verdana, vera, helvetica, sans-serif;
        background-collor: white;
        color: black;
        }
    
     p {
        font-size: 1em;
        margin: 1.25em 0 0 0;
        }
    
      dl {
        padding: 0;
        margin: 1.25em 0 0 40px;
        }
    
      dt {
        list-style-type: disc;
        margin-top: 1.25em;
        display: list-item;
        }
    
      dt a {
        font-weight: bold;
        }
    
      dd {
        font-size: .8125em;
        line-height: 1.5385;
        margin: 0 0 0 40px;
        }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <h3>Activist Groups</h3>
    
      <dl>
        <dt><a href="http://www.lcv.org"
           rel="external">The League of Conservation Voters</a></dt>
    
        <dd>LCV is a political site that is trying to get environmental
        policies a political topic among candidates. It also provides
        explanations of many laws and issues and how they effect the
        environment. They have individual, local,and state resources as
        well as easy access to take action.</dd>
    
        <dt><a href="http://www.coejl.org/index.php"
           rel="external">Coalition on the Environment and Jewish
           Life</a></dt>
    
        <dd>This site has a lot of updated news on environmental
        issues. It also has a few tips on how to save energy. It gives
        you many opportunities and ideas on how you can take action in
        your community to help the environment.</dd>
    
        <dt><a href="http://www.powerisinyourhands.org/"
           rel="external">The Power Is In Your Hands</a></dt>
    
        <dd>The Power is in your hands has a great, simple website that
        has tips to save energy at home, during transportation, at
        work, etc. They also have some quizzes and checklists to make
        sure you are energy efficient.</dd>
    
        <dt><a href="http://www.conservation.org"
           rel="external">Conservation International</a></dt>
    
        <dd>Conservation International is a great source to gather
        information on how to live in harmony with nature. It has great
        quizzes and checklists to make sure you are doing everything
        you can do be environmentally safe. They are also a great
        charity to make a donation to.</dd>
      </dl>
    </body>
    </html>
    Code (markup):
    And the javascript file would look like this:
    
    window.onload = function() {
       if (!document.getElementsByTagName) return false;
       var links = document.getElementsByTagName("a");
       for (var i=0; i<links.length; i++) {
          if (links[i].getAttribute("rel") == "external") {
             links[i].onclick = function() {
                return !window.open(this.href);
             }
          }
       }
    }
    Code (markup):
    Study what I've done, and if there are questions, ask away.

    cheers,

    gary
     
    kk5st, Mar 8, 2007 IP
  20. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #20
    How do you suggest I code my How and Why pages? I want to use the <dd> tag but I also want the list to be numbered...
     
    wholesalechecklist, Mar 12, 2007 IP