6 Replies - 504 Views - Last Post: 23 June 2009 - 12:53 AM

#1 dreadfear  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 180
  • Joined: 08-December 08

css not centering problem

Post icon  Posted 20 June 2009 - 07:52 AM

  <div id="menuContainer">

			<div id="menuBar">

<?PHP 
php removed for security purposes
?>
				</div>
			</div>


menuContainer
#menuContainer

{

	width: 880px;

	margin: 0px auto;

	position:relative;

	background-image: url(../images/image.gif);

	background-repeat: repeat-y;

	overflow:hidden;

	height:50px;
	padding-bottom:30px;

}


menubar

#menuBar

{

width: 880px;
margin: 0px auto;

}


I cant use padding, or margines to center it. And the php is security measure to display images based on permissions. So i cant do anything in there either, not that i can think of any.

So how do i center the images in the middle of the container?

Thanks for any help

EDIT:

I have also used xhtml <center> tags

and also in the div tags added align="center"

With no success

This post has been edited by dreadfear: 20 June 2009 - 07:54 AM


Is This A Good Question/Topic? 0
  • +

Replies To: css not centering problem

#2 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,108
  • Joined: 07-September 06

Re: css not centering problem

Posted 20 June 2009 - 08:17 AM

Well, you are saying position: relative in your CSS, so the CSS is expecting you to tell it where to put the object. I believe that if you remove that it will work better (maybe not perfect depending on browser, but better).

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: css not centering problem

Posted 20 June 2009 - 08:19 AM

Have you tried :
#menuBar
{
  margin-left:auto;
  margin-right:auto;
}

OR

#menuBar
{
  margin-left:300px;
  margin-right:300px;
}


Setting the actual margins will help center it. I did 300px on each side since your width in the outer DIV is 880px. I don't know how big your images are so I gave some room.

Hope this helps!

~Camo
Was This Post Helpful? 0
  • +
  • -

#4 dreadfear  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 180
  • Joined: 08-December 08

Re: css not centering problem

Posted 20 June 2009 - 08:34 AM

Neither work.

I have two rows of images inside the container.

So i cant use margin-left or margin-right

and removing position relative didnt help

Thanks though

Posted Image

An image of what im getting, and what im trying to acheive
Was This Post Helpful? 0
  • +
  • -

#5 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1002
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: css not centering problem

Posted 22 June 2009 - 10:22 AM

Don't use <center> nor <div align="center"> they're bad!

Anyway, perhaps I'm missing the obvious, but it works perfectly fine with a normal text-align statement.
Was This Post Helpful? 0
  • +
  • -

#6 Ryanmiller  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 21-June 09

Re: css not centering problem

Posted 22 June 2009 - 04:14 PM

Try adding

text-align: center;

to #menuContainer
Was This Post Helpful? 0
  • +
  • -

#7 zippp  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 76
  • Joined: 22-June 09

Re: css not centering problem

Posted 23 June 2009 - 12:53 AM

why are you using two IDs with the same size? width: 880px;? i don't see nothing helpful!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1