| Coding Forum Problems with your code? Let's hear about it. |
03-04-2007, 10:25 PM
|
#1 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
Can someone check my coding?
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
Code:
<!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:
/* 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;
}
Last edited by chicgeek : 03-07-2007 at 11:20 AM.
Reason: Appended title/initial post.
|
|
|
|
03-04-2007, 10:33 PM
|
#2 (permalink)
|
|
v7n Mentor
Join Date: 04-07-06
Location: Manchester, NH
Posts: 762
|
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?
this is right
<h2><a href="">How to Take Action Now</a></h2>
but this is better
<div id="highlight"><a href="">How to Take Action Now</a>...</div>
where "highlight" does whatever h2 would do. Menu items are not headlines.
2) How to I get my left menu to go all the way down?
add this to #container in css
height:100%;
[edit] oops #2 is wrong. CSS people? Help? |
|
|
|
|
03-05-2007, 03:34 AM
|
#3 (permalink)
|
|
Inactive
Join Date: 02-23-07
Location: USA
Posts: 886
|
Your left menu already goes all the way down for me in firefox. Not in IE, though.
I'll play with this later today after classes if you don't have it fixed by then.
Do you have firefox? If so, you might want to check your borders in it. If not, you should probably download it  |
|
|
|
|
03-05-2007, 04:52 PM
|
#4 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
I am using firefox, and it isnt going all the way down....
|
|
|
|
|
03-05-2007, 07:47 PM
|
#5 (permalink)
|
|
Contributing Member
Join Date: 02-09-07
Location: New Orleans, LA
Posts: 168
Latest Blog:
None
|
min-height: 100%; possibly
|
|
|
|
|
03-05-2007, 08:53 PM
|
#6 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
Nope, that didnt work. Any more ideas?
|
|
|
|
|
03-05-2007, 09:12 PM
|
#7 (permalink)
|
|
v7n Mentor
Join Date: 04-07-06
Location: Manchester, NH
Posts: 762
|
Go to a list apart to see how it's done.
|
|
|
|
|
03-06-2007, 03:59 PM
|
#8 (permalink)
|
|
Inactive
Join Date: 02-23-07
Location: USA
Posts: 886
|
I played with the code and can't get the menu to go all the way down.
|
|
|
|
|
03-06-2007, 05:03 PM
|
#9 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
hmm this is weird...
|
|
|
|
|
03-07-2007, 09:42 AM
|
#10 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
CSS Menu help
www.biggerhockey.com
I am trying to stretch my left menu to the bottom to the footer, yet I cannot get this to work.
Code:
/* 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: 520px;
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 {
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;
}
#rss {
border-bottom: 1px dotted #cccccc;
border-left: 1px dotted #cccccc;
border-right: 1px dotted #cccccc;
border-top: 0;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
}
Code:
<!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" />
<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 />
sponsor<br />
sponsor<br />
sponsor<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 include("news.php"); ?>
</div>
</div>
</div>
<div id="footer">| © Mission Environment 2007 |</div>
</div>
</body>
</html>
|
|
|
|
|
03-07-2007, 09:46 AM
|
#11 (permalink)
|
|
Empress™
Join Date: 08-19-04
Location: York, UK
Posts: 18,004
|
More threads do not guarantee more responses. Please do not repost an issue that is being discussed in one of your other current threads.
I will merge this with your other thread shortly. |
|
|
|
|
03-07-2007, 10:05 AM
|
#12 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
but my other thread, the topic skewed off. This has a more descriptive title. That was the only reason I reposted.
|
|
|
|
|
03-07-2007, 10:18 AM
|
#13 (permalink)
|
|
Empress™
Join Date: 08-19-04
Location: York, UK
Posts: 18,004
|
Merged. I altered your title and your initial post to match your current issue.
Good luck.
Last edited by chicgeek : 03-07-2007 at 10:23 AM.
|
|
|
|
|
03-07-2007, 04:13 PM
|
#14 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
I made some progress with the colors. Not exactly there yet, but moving in the right direction. I have a problem now:
I cannot get the left menu up to connect to the main pic. I cant find any reason for this to be happening (margin, padding, etc). Anyone know why?
Code:
/* CSS Document */
A { text-decoration: none; }
A:link { color: #000000; text-decoration: underline}
A:visited { color: #000000; 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;
color: #888888;
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: #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: auto !important; /* for modern browsers */
height: 100%; /* for IE */
float: left;
border: 0;
}
div.leftlinks a:link{
color: #000000;
font-weight: bold;
text-decoration : none;
}
div.leftlinks a:visited{
color: #000000;
font-weight: bold;
text-decoration : none;
}
div.leftlinks a:hover{
color: #BBCDD9;
font-weight: bold;
text-decoration : none;
}
.leftlinks {
padding: 2px 2px 2px 10px;
}
.leftcategories {
background: #69822f;
padding: 3px 3px 3px 5px;
font-size: 12px;
}
#main {
width: 580px;
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: 0px 0px 0px 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: 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;
}
#rss {
border-bottom: 1px dotted #cccccc;
border-left: 1px dotted #cccccc;
border-right: 1px dotted #cccccc;
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;
}
Code:
<!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="leftmenu">
<div class="leftcategories"><span style="font-weight:bold;color:#FFFFFF;">Main Menu</span></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"><span style="font-weight:bold;color:#FFFFFF;">Sponsors</span></div>
<div class="leftlinks">sponsor<br />
sponsor<br />
sponsor<br />
sponsor<br /></div>
</div>
<div id="main">
<div id="banner"><a href=""><img src="images/blankbanner.gif" id="ad" /></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 include("news.php"); ?>
</div>
</div>
</div>
<div class="clear"></div>
<div id="footer">| © Mission Environment 2007 |</div>
</div>
</body>
</html>
|
|
|
|
|
03-08-2007, 03:23 PM
|
#15 (permalink)
|
|
v7n Mentor
Join Date: 11-22-06
Location: Phoenix, AZ
Posts: 1,788
Latest Blog:
None
|
Hey devilsfan, did you get this taken care of? Looks good now. If you are still having problems, what browsers are you looking at it with and what versions of those browsers. I took a look with IE7 and FF1.5 and looks good.
__________________
Experimenting
|
|
|
|
|
03-08-2007, 04:47 PM
|
#16 (permalink)
|
|
v7n Mentor
Join Date: 03-09-06
Location: London UK
Posts: 2,802
|
why not post a link to the page rather than code? a lot easier for us (me anyway) to deal with
|
|
|
|
|
03-08-2007, 05:28 PM
|
#17 (permalink)
|
|
Contributing Member
Join Date: 06-09-04
Posts: 349
Latest Blog:
None
|
The URL is now www.missionenvironment.com for people who want to see the live code.
I believe I got all the kinks out, and personally, I think it looks good.
If you find any coding issues, post here, otherwise you can find a new thread in the Review section on the overall website.
Thanks for everyones help. |
|
|
|
|
03-10-2007, 03:26 PM
|
#18 (permalink)
|
|
Inactive
Join Date: 02-23-07
Location: USA
Posts: 886
|
Glad you got this working |
|
| |
