trying to centre my banner - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

eastybeasty · #1 01 Nov 2009, 04:24 PM

hi everyone

after a lot of struggling ive finally managed to embed my flash banner into my html code....however it doesnt seem to want to move from the left hand side of the page where i want it to be placed in the centre. im pretty convinced its soemthing to do with my css but i dont know what, been trying for a while to get it sorted and i just cant figure it out

heres my HTML:

HTML Code:

link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/menubar.css" />
<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0");
		</script>

<div id="header">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="middle" width="780" height="120" id="myFlashContent">
				<param name="movie" value="title.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="title.swf" width="780" height="120">
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>

</head>

<body>


   <!-- Begin Wrapper -->
   <div id="wrapper">
   
       
		 
		 <!-- Begin Naviagtion -->
  <div id="menubar"> <a name="top"></a>
  <div id="menu1" class="menu"><a href="index.html">Home</a>
        
  
  </div>
  
  <div id="menu2" class="menu">About Glen Moss
        <ul>
    	<li><a href="about.html">About the area </a></li>
    	<li><a href="gettinghere.html">Getting there</a></li>
    	<li><a href="peatbog.html">What is a peatbog?</a></li>
    	
		</ul>
  </div>
  <div id="menu3" class="menu">Seasons
  
        <ul>
    	<li><a href="spring.html" target="_blank">Spring</a></li>
    	<li><a href="summer.html" target="_blank">Summer</a></li>
    	<li><a href="autumn.html" target="_blank">Autunm </a></li>
    	<li><a href="winter.html" target="_blank">Winter</a></li>
    	    	
        </ul>
  </div>
  
  
  <div id="menu4" class="menu"><a href="links.html">Useful Links</a>
        
  
  </div>
  
  
  <div id="menu5"class="menu"><a href="gallery.html">Gallery</a>
        
  
  </div>
  

  <div id="menu6" class="menu"><a href="contact.html">Contact Us </a>
        
  
  </div>
  
</div>


		 <!-- End Naviagtion -->

and my CSS:

Code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 780px;
 color: black;
 padding: 10px;
 height: 120px;
 margin: 5px 0px 5px 0px;
 background: #C0D9D9;

}


 

#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
}
#footer { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #C0D9D9;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

can anyone please tell me how I can centre my flash banner so it is in line with my menu bar and the sides of the page there the content is? im trying to build up a portfolio of sites, im not experienced at all yet but one this little problem is corrected i can do on to start working on other sites

thanks

calskin · #2 01 Nov 2009, 10:09 PM

Do you want the whole website to be centered also, or just the header?

I'm not a master at HTML or CSS, but I manage to get by, and I've done what you're trying many times.

One thing I'm noticing is your header should be wrapped in your <body> tags, and another thing is you should wrap the video in a <p> or <span> tag and align the paragraph or span to the center either in css or in html.

I don't have your video here, so it's kinda hard to test the coding, but I think you'll get the idea. If not post back.

Caleb

raramente · #3 02 Nov 2009, 02:33 AM

To center any block (for example a div) I do this:

<div id="centered">things to be displayed</div>

CSS:
div#centered{
margin-left:auto;
margin-right:auto;
}

I have some problems with IE/firefox if I dont put the DOCTYPE (I dont remenber if this is one of the cases), so if this doesn't work try to put the DOCTYPE.