...

View Full Version : trouble centering a banner.



KoolAide187
02-23-2011, 06:05 AM
I have tried centering this banner using <center> but it didn't work it just verbosely posted all my banners down the screen. I found out you have to actually edit the CSS code to get it to work. Well I did that and it's centered for my computer/browsers but not for others. Is there a global way for me to center it with every browser on every computer? Could somebody fix my code plz plz plz!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Duck Hunting" content="Duck Calls for Duck Hunting">
<meta name="Description" content="Huge Duck Calling Manufacturer who has been in business making and selling duck calls since 1975. World Championship Duck Calls">
<meta name="Keywords" content="Duck Hunting,Hunting,Duck Calls,Hunting Videos,Hunting DVDs,Hunting CDs,World Championship Duck Calls">
<meta name="Publisher" content="Rick Dunn">
<meta name="Author" content="Rick Dunn">
<meta name="Distribution" content="Global">
<meta name="Robots" content="All">
<title>Echo Calls</title>
<style type="text/css">
body {
margin:auto;
padding:0;
color: #FFFFFF;
font: normal 1.2em sans-serif, Arial;
background-color: #000000;
width: 100%;
}
h1 {
padding-left: 55px;
font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
text-transform:uppercase;
letter-spacing:.0.0em;
}
a {
outline: none;
}
</style>

<style type="text/css">
/* rotator in-page placement */
div#rotator {
position:relative;
height:145px;
margin-left:auto;
margin-right:auto;
}
/* rotator css */
div#rotator ul li {
float:left;
position:absolute;
list-style: none;
margin-left:auto;
margin-right:auto;
top: 1px;
background-color: #000000;
}
/* IMAGE BORDER IS PADDING */
div#rotator ul li img {
border:0px solid #000000;
padding: 0px;
background: #FFF;
}
div#rotator ul li.show {
z-index:500
}
</style>

<script type="text/javascript" src="http://www.echocalls.com/jquery.min.js"></script>

<script type="text/javascript">

function theRotator() {

$('div#rotator ul li').css({opacity: 0.0});

$('div#rotator ul li:first').css({opacity: 1.0});

setInterval('rotate()',6000);

}

function rotate() {

var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));

if ( current.length == 0 ) current = $('div#rotator ul li:first');
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));


next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

current.animate({opacity: 0.0}, 1000)
.removeClass('show');

};

$(document).ready(function() {
theRotator();
});

</script>
.

<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<style type="text/css">
body {
scrollbar-arrow-color: black;
scrollbar-base-color: black;
scrollbar-dark-shadow-color: black;
scrollbar-track-color: white;
scrollbar-face-color: #949494;
scrollbar-shadow-color: white;
scrollbar-highlight-color: silver;
scrollbar-3d-light-color: black;
}
</style>
<STYLE TYPE="text/css">
a:link { color: #999999; text-decoration: none }
a:active { color: #FFFFFF; text-decoration: none }
a:visited { color: #999999; text-decoration: none }
a:hover { color: #FF0000; text-decoration: none; background: #000000}
</STYLE>
<style type="text/css" style="display: none;">
.duck-button
{
border-top: 1px solid #383b3d;
background: #0e0f0f;
background: -webkit-gradient(linear, left top, left bottom, from(#47494a), to(#0e0f0f));
background: -moz-linear-gradient(top, #47494a, #0e0f0f);
padding: 7px 14px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 16px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

.duck-button:hover
{
border-top-color: #2b2b2b;
background: #2b2b2b;
color: #ccc;
}

.duck-button:active
{ border-top-color: #191a1a;
background: #191a1a;
}
</style>

<body>
<body text="#FFFFFF" bgcolor="#000000" link="#999999" vlink="#999999" alink="#FFFFFF">
<div id="page-background"><img src="http://www.echocalls.com/bgimage.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">


<div id="rotator">
<ul>
<li class="show"><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner1.jpg" width="700" height="125" alt="banner1" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner2.jpg" width="700" height="125" alt="banner2" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner3.jpg" width="700" height="125" alt="banner3" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner4.jpg" width="700" height="125" alt="banner4" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner5.jpg" width="700" height="125" alt="banner5" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner6.jpg" width="700" height="125" alt="banner6" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner7.jpg" width="700" height="125" alt="banner7" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner8.jpg" width="700" height="125" alt="banner8" /></a></li>
<li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner9.jpg" width="700" height="125" alt="banner9" /></a></li>
</ul>
</div>
<br>
<center>
<div>
<a href="http://www.echocalls.com/index.html" class="duck-button">Home</a>
<a href="http://www.echocalls.com/aboutus.html" class="duck-button">About Us</a>
<a href="http://www.echocalls.com/duckcalls.html" class="duck-button">Duck Calls</a>
<a href="http://www.echocalls.com/goosecalls.html" class="duck-button">Goose Calls</a>
<a href="http://www.echocalls.com/CallBuilder.html" class="duck-button">Call Builder</a>
<a href="http://www.echocalls.com/accessories.html" class="duck-button">Accessories</a>
<a href="http://www.echocalls.com/shop.html" class="duck-button">Shop</a>
<a href="http://www.echocalls.com/staffing.html" class="duck-button">Team Echo</a>
<a href="http://www.echocalls.com/contactus.html" class="duck-button">Contact Us</a>
</div>
<center>
<br />
<br />
<center><a href="http://www.echocalls.com/news.html"><font color="#FF0000"> <b><big>Echo News</big></b></font></a><br>
<script type="text/javascript">
var iframesrc="external.htm"
document.write('<iframe id="datamain" src="'+iframesrc+'" width="700px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>')
</script>
</center>
<br>

<td VALIGN=TOP WIDTH="586">
<center><img SRC="http://www.echocalls.com/themallardhunters.jpg" height=350 width=586><a href="http"></a>
<p><font face="Verdana"><a href="http://www.echocalls.com/news.html">Echo News</a>
<img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/soundfiles.html">Listen To Duck Calls</a>
<img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/video.html">Video Clips</a>
<img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/links.html">Links</a>
<img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/dealers.html">Dealers</a>
<img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/compcircuit.html">Comp Circuit</a>
</font></center>
</td>
</tr>
</table></center>

<font face="Verdand"><font size=-1><font color=#FFFFFF align="bottom"><center>

<p>Copyright 2001
<script language="JavaScript">
var d=new Date();
yr=d.getFullYear();
if (yr!=2010)
document.write("- "+yr);
</script>

Echo Championship Duck Calls. ALL content including images may not be reproduced without first obtaining written permission. </p>

</center>
</font>
<div id="eXTReMe"><a href="http://extremetracking.com/open?login=echoca11">
</a>
<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script>

<script type="text/javascript"><!--
var EXlogin='echoca11' // Login
var EXvsrv='s10' // VServer
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;EXsrc="src";
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
EXref?EXref=EXref:EXref=EXd.referrer;
EXd.write("<img "+EXsrc+"=http://e1.extreme-dm.com",
"/"+EXvsrv+".g?login="+EXlogin+"&amp;",
"jv="+EXjv+"&amp;j=y&amp;srw="+EXw+"&amp;srb="+EXb+"&amp;",
"l="+escape(EXref)+" height=1 width=1>");//-->
</script><noscript><div id="neXTReMe"><img height="1" width="1" alt=""
src="http://e1.extreme-dm.com/s10.g?login=echoca11&amp;j=n&amp;jv=n" />
</div></noscript></div>
<br>

<center><script language="JavaScript">
<!--
document.write("This site was last modified on " + document.lastModified);
// -->
</script></center>
<table width="800" border="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Excavator
02-23-2011, 10:04 AM
Hello KoolAide187,
To center an absolute positioned element see this example (http://bluerobot.com/web/css/center2.html).

To center an element without the positioning you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum