Need css/html Homework Help

[lntrigued]

I'm in a 4700 Web Design class this summer, and I'm having a little trouble with some of the stuff. I'm going to post my code, and my screenshot vs. what it's supposed to look like. Any help would be appreciated. Thanks in advanced.

This is not the full code, just excerpts of the spots I'm having problems with.


First Problem:
The drop down menu here is supposed to be inside of the small colored box.
My code:
lee.css

#links {
		width:155px;
		float:left;
		background-color:gold;
		margin-right:10px;
		margin-bottom:10px;
		padding:10px;
		border:2px solid black;
		}

nav.html

<html>
<head>
	<title> Master Lee Navigation Page</title>
	<link href="lee.css" rel="stylesheet" type="text/css">
	<script language="javascript" type="text/javascript">
	<!-- Hide from older browsers
	function getPage (page) {
							window.open(page,"content");
							}
	//End hiding -->
	</script>
</head>
<body>
<p id="links">
	<form name="menuForm">
	<!-- A pull-down list -->
	<select name="Links">
		<option value="home.html" selected="">Home
		<option value="contact.html">Contact Us
	</select>
	<input value="Go!" type="Button" onClick="getPage(document.menuForm.Links.options
	[document.menuForm.Links.selectedIndex].value)">
	</form>
</p>
<center>
	<script language="JavaScript">
		<!--
		var date
		date=document.lastModified
		document.write("Last Modified on " + date)
		// -->
	</script>
	<img src ="tkd.jpg" alt="tkd">
</center>
</body>
</html>

What it's supposed to look like:

What it looks like currently:

Second problem: My small box here is supposed to have a border around it like the silver one that kind of fades out, in the correct image.

lee.css

h3.boxheader{
			text-align:center;
			font-size:12-pt;
			color:white;
			font-weight:700;
			margin-top:10px;
			}
p.boxtext {
			text-align:center;
			font-size:10pt;
			color:white;
			margin: 15px 15px 15px 15px;
			}
#boxL {
	width: 250px;
	float: left;
	background-color: black;
	margin: 15px 15px 15px 15px;
	border:outset color:#660099;
	font-family:arial, helvetiva, sans-serif;
	color:white;
	}
#boxL h3 {
	text-align: center;
	margin-top: 9px;
	color:white;
	}
#boxL ul {
	list-style-type:square;
	margin-left:20px;
	padding-left:0px;
	}

home.html

<div id="boxL">
<h3 class="boxheader">Translation of<br>Tae Kwon Do</h3>
<p class="boxtext">Literally, a method of defending yourself with your hands and feet.</p>
<ul>
	<li>Tae - Jumping or flying to kick or smash with the foot</li>
	<li>Kwon - to punch or destroy with the fist</li>
	<li>Do - the &quot;art&quot; or &quot;way&quot; of</li>
	<br>
</ul>
</div>

What it's supposed to look like:

What is currently looks like:

I have all of my professor's code for his website design, and I've compared mine to his, and can't find any differences to help me out here. Like say, any help would be much appreciated.

 

[sirlaughsalot]

The first problem is because it is in a

<p>

tag, not a

<div>

tag. p tags are for paragraphs of text, div-s are meant to show divisions in the document.

I'll edit/re-post with the solution to the second.

Edit:

Change the

#boxL {
	width: 250px;
	float: left;
	background-color: black;
	margin: 15px 15px 15px 15px;
	border:outset color:#660099;
	font-family:arial, helvetiva, sans-serif;
	color:white;
	}

block, to something like

#boxL {
  width: 250px;
  float: left;
  background-color: black;
  margin: 15px 15px 15px 15px;
  border-style: outset;
  border-color: #660099;
  border-width: 10px;
  font-family:arial, helvetiva, sans-serif;
  color:white;
  }

Hope that helps!

 

[lntrigued]

Holy crap, yeah. I was missing a ; in there too, haha. Thanks for the help man. I got it working now. Appreciate it!