Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    trouble centering a banner.

    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!

    Code:
    <!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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello KoolAide187,
    To center an absolute positioned element see this example.

    To center an element without the positioning you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •