...

View Full Version : Centering buttons



jiggamanjoe
05-31-2009, 04:12 PM
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:


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

#sddm li
{ margin: 0;
padding: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">
<html>
<head>
<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
mcancelclosetime();

// 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()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

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

//
// 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(
"http://google.com",
"javascript:alert('long way down');",
"http://iamacamera.org"
);
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] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}

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;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
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
setOpacity(theimg,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>
<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 {
position:absolute;
left:0;
top:7px;
width:990px;
height:116px;
z-index:1;
background-color: #FFFFFF;
}
#Menu {
background-color: #66FF00;
position: absolute;
height: 28px;
width: 989px;
left: 1px;
top: -32px;
margin:auto;
}
#Content {
position:absolute;
left:0px;
top:158px;
width:990px;
height:458px;
z-index:2;
background-color: #FF6600;
}
#Footer {
position:absolute;
left:0px;
top:560px;
width:990px;
height:50px;
z-index:3;
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;
}
-->
</style>
</head>

<body>

<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>
</div>
</li>
<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>
</div>
</li>
<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>
</div>
</li>
<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>
</div>
</li>
<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>
</div>
</li>
<li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">Barcode Labels</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Overview</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">Health & Safety Labels</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Overview</a>
</div>
</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>
</li>
</ul>
<div style="clear:both"></div>

<div style="clear:both"></div>
</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>


<div id="Footer">




</div>

</div>
</body>
</html>

Hope you can help. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum