Hi, I'm really new to Dreamweaver and everything to do with coding. I'm struggling with one amoung many things, which is centering my css buttons.

Heres the CSS code for them:

{	margin:0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	list-style: none;
	float: left;
	font: bold 11px Gill Sans MT}

#sddm li a
{	display: block;
	margin: 0 3px 0 0;
	padding: 0x 0px;
	width: 120.4px;
	background: #e50278;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #f386be}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #e37fb3;
	border: 1px solid #FFF}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 0px 0px;
		width: 90;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #e37fb3;
		color: #fff;
		font: 11px Gill Sans MT}

	#sddm div a:hover
	{	background: #fff;
		color: #e37fb3}
The code for the rest of my site is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Drop-Down Menu</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="stylesheet" type="text/css" href="dropdownmenu/dropdownmenu/css/default.css">

<!-- dd menu -->
<script type="text/javascript">
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
	// cancel close timer

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

// close showed layer
function mclose()
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// go close timer
function mclosetime()
	closetimer = window.setTimeout(mclose, timeout);

// cancel close timer
function mcancelclosetime()
		closetimer = null;

// close layer when click-out
document.onclick = mclose; 
// -->
<script type="text/javascript">

  // CSS Linked Photo Shuffler v1.1 by
  //   Carl Camera
  //   http://iamacamera.org 
  // SetOpacity Function and inpiration from Photo Fade by
  //   Richard Rutter
  //   http://clagnut.com
  // License: Creative Commons Attribution 2.5  License
  //   http://creativecommons.org/licenses/by/2.5/

  // Customize your photo shuffle settings
  // * Surround the target <img /> with a <div>. specify id= in both
  // * The first and final photo displayed is in the html <img> tag
  // * The array contains paths to photos you want in the rotation. 
  //   If you want the first photo in the rotation, then it's best to
  //   put it as the final array image.  All photos must be same dimension
  // * The rotations variable specifies how many times to repeat array.
  //   images. zero is a valid rotation value.

  var gblPhotoShufflerDivId = "photodiv";
  var gblPhotoShufflerImgId = "photoimg";
  var gblPhotoShufflerAnchorId = "photoanchor";
  var gblImg = new Array(
    "images/Barcode Raw.jpg",
	"images/Electrical Raw.jpg",
	"images/Misc Raw.jpg",
  var gblHref = new Array(
    "javascript:alert('long way down');",
  var gblPauseSeconds = 7.25;
  var gblFadeSeconds = .85;
  var gblRotations = 1;

  // End Customization section
  var gblDeckSize = gblImg.length;
  var gblOpacity = 100;
  var gblOnDeck = 0;
  var gblStartImg;
  var gblStartHref;
  var gblImageRotations = gblDeckSize * (gblRotations+1);

  window.onload = photoShufflerLaunch;
  function photoShufflerLaunch()
  	var theimg = document.getElementById(gblPhotoShufflerImgId);
        gblStartImg = theimg.src; // save away to show as final image
  	var theanchor = document.getElementById(gblPhotoShufflerAnchorId);
        gblStartHref = theimg.href; // save away to show as final image

	document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

  function photoShufflerFade()
  	var theimg = document.getElementById(gblPhotoShufflerImgId);
  	// determine delta based on number of fade seconds
	// the slower the fade the more increments needed
        var fadeDelta = 100 / (30 * gblFadeSeconds);

	// fade top out to reveal bottom image
	if (gblOpacity < 2*fadeDelta ) 
	  gblOpacity = 100;
	  // stop the rotation if we're done
	  if (gblImageRotations < 1) return;
	  // pause before next fade
	  gblOpacity -= fadeDelta;
	  setTimeout("photoShufflerFade()",30);  // 1/30th of a second

  function photoShufflerShuffle()
	var thediv = document.getElementById(gblPhotoShufflerDivId);
	var theimg = document.getElementById(gblPhotoShufflerImgId);
	var theanchor = document.getElementById(gblPhotoShufflerAnchorId);
	// copy div background-image to img.src
	theimg.src = gblImg[gblOnDeck];
	theanchor.href = gblHref[gblOnDeck];
	window.status = gblHref[gblOnDeck]; // updates status bar (optional)
	// set img opacity to 100

        // shuffle the deck
	gblOnDeck = ++gblOnDeck % gblDeckSize;
	// decrement rotation counter
	if (--gblImageRotations < 1)
	  // insert start/final image if we're done
	  gblImg[gblOnDeck] = gblStartImg;
	  gblHref[gblOnDeck] = gblStartHref;

	// slide next image underneath
	thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;

<script type="text/javascript" src="js/xfade2.js"></script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/slideshow1.css">
<link rel="stylesheet" type="text/css" href="css/slideshow2.css">

<style type="text/css">

#Header {
	background-color: #FFFFFF;
#Menu {
	background-color: #66FF00;
	position: absolute;
	height: 28px;
	width: 989px;
	left: 1px;
	top: -32px;
#Content {
	background-color: #FF6600;
#Footer {
	background-color: #FF0000;
body {
	text-align: center;
#Master {
	width: 990px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	left: 0px;
	top: 0px;


<div id="Master">

<div id="Header"><a href="dropdownmenu/dropdownmenu/images/logo.jpg"></a><img src="images/logo smaller rgb.jpg" alt="" width="595" height="115" align="left" /></div>
<div id="Content">
  <div id="Menu">

<ul id="sddm">
	<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Contact Us</a>
		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Download Catalogue</a>
	<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">NHS Medical Labels</a>
		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Drug Addative Labels</a>
		<a href="#">Warning Labels</a>
		<a href="#">Syring & Drug Infusion</a>
		<a href="#">Theatre Labels</a>
        <a href="#">Eye Drop Labels</a>
        <a href="#">Misc & Admin Labels</a>
        <a href="#">EBME Labels</a>
        <a href="#">Free Wallchart</a>
	<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Packaging Labels</a>
		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">UN Diamonds</a>
		<a href="#">Fragile Glass</a>
        <a href="#">This Way Up</a>
        <a href="#">General Labels</a>
	<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Hazard Labels</a>
		<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Warning Diamonds</a>
		<a href="#">Warning Symbols</a>
	<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Electrical Labels</a>
		<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Periodic Inspection</a>
		<a href="#">RCD Testing</a>
		<a href="#">Danger Voltage</a>
        <a href="#">Electrostatic Labels</a>
        <a href="#">Pat Testing</a>
    <li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">Barcode Labels</a>
		<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Overview</a>
    <li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">Health & Safety Labels</a>
		<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Overview</a>
	</li><li><a href="#" onmouseover="mopen('m8')" onmouseout="mclosetime()">Misc Labels</a>
		<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Pricing Labels</a>
		<a href="#">Textile Labels</a>
		<a href="#">General Labels</a>
        <a href="#">Security Labels</a>
<div style="clear:both"></div>

<div style="clear:both"></div>

<div id="rotator">
	<a href="http://9rules.com/"><img src="images/9rules.jpg" alt="9rules Network" /></a>
	<a href="http://cssbeauty.com/"><img src="images/cssbeauty.jpg" alt="CSS Beauty" /></a>
	<a href="http://godbit.com/"><img src="images/godbit.jpg" alt="Godbit Project" /></a>
	<a href="http://stylegala.com/"><img src="images/stylegala.jpg" alt="Stylegala" /></a>
	<a href="http://yahoo.com/"><img src="images/yahoo.jpg" alt="Yahoo!" /></a></div>


<div id="Footer">


Hope you can help. Thanks.