Need help on CSS

KevinCB · 11 Aug 2006 at 09:33

Hi,

I'm having problems with my CSS and require your expertise. The first image shows the top of the page, and the second image shows the bottom of the page.

Image 1
Image 2

Firstly the navigation menu at the top I would like aligned vertically in the middle of the bar. I have added the vertial-align property in the CSS, but nothing is happening.

Secondly at the bottom of the page the content seems to stop just before the footer of the page, and the background colour of the main page is shown, instead of the white colour going down to the green footer. I also want the copyright info to be align vertically in the footer bar.

CSS:

Code:

body {
	margin: 20px;
	background-color: #EFF2ED;
	color: #000000;
	text-align: center;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	}
.main a:link {
	color: #990033;
	text-decoration: none;
	} 
.main a:visited {
	color: #990033;
	text-decoration: none;
	}
.main a:hover {
	color: #999999;
	text-decoration: none;
	}
.main a:active {
	color: #990033;
	text-decoration: none;
	}
.navbar a:link {
	color: #FFFFFF;
	text-decoration: none;
	}
.navbar a:visited {
	color: #FFFFFF;
	text-decoration: none;
	}
.navbar a:hover {
	color: #000000;
	text-decoration: none;
	}
.navbar a:active {
	color: #FFFFFF;
	text-decoration: none;
	}

#wrapper {
	text-align: left;
	border: 2px solid #339966;
	width: 775px;
	margin: auto;
	}

#hdr {
	overflow: hidden;
	height: 119px;
	background-color: #FFFFFF;
	color: #000000;
	}

#navmenu {
	overflow: hidden;
	height: 25px;
	background-color: #339966;
	color: #FFFFFF;
	vertical-align: middle;
	}

#content {
	position: relative;
	background: #FFFFFF;
	color: #000000;
	margin: 0;
	padding-left: 10px;
	}

#coreList {
   margin: 20px 10px;
   padding: 10px;
   border: solid 2px #339966;
   background-color: #F4F4F4;
   }

#ftr {
	height: 25px;
	background-color: #339966;
	color: #FFFFFF;
	margin: 0;
	vertical-align: middle;
	}

HTML:

Code:

<body>
<div id="wrapper">
<div id="hdr" align="center">
<img src="../../../images/main-image.jpg" alt="Reaseheath College" width="687" height="119" /></div>
<div id="navmenu" class="navbar" align="center">
	<a href="../../../index.html">Home</a> | <a href="../../../thecollege/index.html">The College</a> | <a href="../../../news/index.html">News</a> | <a href="../../../courses/index.html">Courses</a> | <a href="../../../whatson/index.html">Whats On</a> | <a href="../../../studentzone/index.html">Student Zone</a> | <a href="../../../maps/index.html">Maps</a> | <a href="../../../contact/index.html">Contact</a> | <a href="../../../sitesearch/index.html">Search</a></div>
<div id="content">
<br />
  <p align="center"><strong>This free course provides an opportunity for mature students (those over 19 years of age) to study a range of subjects on an 'A' Level equivalent course in order to progress onto a Higher Education course at Reaseheath or elsewhere.</strong></p>
  <p align="center"><strong>No entry qualifications are required, just a keen motivation to learn.</strong></p>
  <p>On successful completion of the course, students may enter a broad range of HND, Foundation Degree and Degree programmes at Universities or Colleges of Higher Education or use this two 'A' Level equivalent course to enter land based industries.</p>
  <p>Each student studies a range of subjects relevant to land based industries and 'credits' are accumulated throughout the course as units are successfully completed. An OCN Access certificate is awarded on completion of sufficient 'credits'.</p>
<table width="272" border="0" id="coreList">
  <tr>
    <td width="266">Students study core subjects in: </td>
    </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&bull; Study Skills</td>
    </tr>
  <tr>
    <td>&bull; Word Processing and the Internet</td>
    </tr>
  <tr>
    <td>&bull; Application of Number</td>
    </tr>
</table>
<br />
<table width="600" border="0" id="coreList">
  <tr>
    <td colspan="2">The following technical units available are: </td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&bull; Animal Behaviour &amp; Welfare</td>
    <td>&bull; Introduction to Equine Husbandry</td>
  </tr>
  <tr>
    <td>&bull; Animal Health and Husbandry</td>
    <td>&bull; Equine Health</td>
  </tr>
  <tr>
    <td>&bull; Nutrition &amp; Diet</td>
    <td>&bull; Biology</td>
  </tr>
  <tr>
    <td>&bull; Plant Science</td>
    <td>&bull; Principles of Ecology</td>
  </tr>
  <tr>
    <td>&bull; Garden Design</td>
    <td>&bull; Business Management</td>
  </tr>
  <tr>
    <td>&bull; Countryside Conservation</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>The course is designed specifically to enable students to readjust to the learning environment, particularly for those who have been out of education for some time.
<br />
Most teaching is carried out through a series of 'student friendly' lessons, with assignment-based and pratical activities.
<br />
A dedicated support tutor is available to help students as required.</p>
<p>&nbsp;</p>
</div>
<div id="ftr" align="center">
&copy; 2006 Reaseheath College
</div>
</div>
</body>

Thanks

KevinCB · 11 Aug 2006 at 10:56

Thesnipergecko said:
First problems easy "line-height: 25px;"

Thanks, that's the first problem sorted. Just need to find out why the bottom of the page is displaying like it is.

Need help on CSS

KevinCB

KevinCB

KevinCB

KevinCB