Web Design Forums

blanchy · 31-01-2008, 16:07

Hi

Just started using HTML and CSS and with a bit of help from some tutorials I've managed to create a menu bar.

I now want to be able to center this menu bar so that even if the user resizes their window, the menu bar is still centered.
Here's my HTML

Code:

 <body>
   <div id="menu" align="center">
   <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 2</a></li>
     <li><a href="">Menu 3</a></li>
     <li><a href="">Menu 4</a></li>
   </ul>
   </div>
  </body>

Here's my CSS

Code:

#menu
{
	
	margin: auto;
}

#menu ul
{
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu li
{
  float: left;
  margin: 0 0.15em;
}

#menu li a
{
	
  background: white;
  height: 0.9cm;
  line-height: 0.9cm;
  float: left;
  width: 4cm;
  display: block;
  border: 0.1em solid rgb(220,220,220);
  color: rgb(100,149,237);
  text-decoration: none;
  text-align: center;
  
}


#menu a:hover 
{
  
  background: rgb(220,220,220);
}

My understanding is that it's due to the floats that the menu is always on the left.

Also, once I am able to centre this, i want to be able to place an image above the menu bar that is also centered with the buttons, so if the user resizes their window the image is still directly above the buttons.

Any ideas on how to achieve these two goals - thanks

cjgraphix · 31-01-2008, 17:32

first give your menu a width.

to get things centered.... align the banner in the center as you have done with the menu. margin: 0 auto;

blanchy · 31-01-2008, 18:05

tried this but it didn't make a difference ( I tried several differnt lengths)

Code:

#menu
{
	margin: 0 auto;
	width 20cm;
}

Shiro · 31-01-2008, 20:22

Its because you are floating your list elements to the left. That will prevent them from being ceterable. Dont float them.

White Shift · 01-02-2008, 01:16

Use the margin: 0 auto in your #menu ul.

Unless you're working it as a printable sheet, use px/em/% values as opposed to cm. Also try to avoid RGB, by using HEX.

blanchy · 01-02-2008, 02:57

Quote:

Originally Posted by haku

Its because you are floating your list elements to the left. That will prevent them from being ceterable. Dont float them.

how else can I make the items centered w/o using floats

White Shift · 01-02-2008, 07:56

It doesn't prevent them being centred.

pgo · 01-02-2008, 10:42

Code:

#menu {text-align:center;}

#menu ul {margin:0 auto;}

align="center" is deprecated.

Jayx · 01-02-2008, 11:33

Quote:

Originally Posted by blanchy

tried this but it didn't make a difference ( I tried several differnt lengths)

Code:

#menu
{
	margin: 0 auto;
	width 20cm;
}

As mentioned above, use a different unit of measure. Also pay attention to punctuation - any designer will tell you stories of frustration that came down to something as simple as missing a colon as is the case above ... it should read width: 20px; for instance.

31-01-2008, 16:07	#1 (permalink)
blanchy Registered User Join Date: Jan 2008 Posts: 3	Created menu bar now need to center it Hi Just started using HTML and CSS and with a bit of help from some tutorials I've managed to create a menu bar. I now want to be able to center this menu bar so that even if the user resizes their window, the menu bar is still centered. Here's my HTML Code: <body> <div id="menu" align="center"> <ul> <li><a href="">Menu 1</a></li> <li><a href="">Menu 2</a></li> <li><a href="">Menu 3</a></li> <li><a href="">Menu 4</a></li> </ul> </div> </body> Here's my CSS Code: #menu { margin: auto; } #menu ul { list-style: none; padding: 0; margin: 0; } #menu li { float: left; margin: 0 0.15em; } #menu li a { background: white; height: 0.9cm; line-height: 0.9cm; float: left; width: 4cm; display: block; border: 0.1em solid rgb(220,220,220); color: rgb(100,149,237); text-decoration: none; text-align: center; } #menu a:hover { background: rgb(220,220,220); } My understanding is that it's due to the floats that the menu is always on the left. Also, once I am able to centre this, i want to be able to place an image above the menu bar that is also centered with the buttons, so if the user resizes their window the image is still directly above the buttons. Any ideas on how to achieve these two goals - thanks

31-01-2008, 17:32	#2 (permalink)
cjgraphix Website Developer Join Date: Jun 2007 Location: Pacific Northwest Posts: 413	first give your menu a width. to get things centered.... align the banner in the center as you have done with the menu. margin: 0 auto; __________________ Bend Oregon Web Design and Website Development

31-01-2008, 18:05	#3 (permalink)
blanchy Registered User Join Date: Jan 2008 Posts: 3	tried this but it didn't make a difference ( I tried several differnt lengths) Code: #menu { margin: 0 auto; width 20cm; }

01-02-2008, 10:42	#8 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Code: #menu {text-align:center;} #menu ul {margin:0 auto;} align="center" is deprecated.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

31-01-2008, 20:22	#4 (permalink)
Shiro shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,605	Its because you are floating your list elements to the left. That will prevent them from being ceterable. Dont float them.

01-02-2008, 01:16	#5 (permalink)
White Shift http://pseudocrap.net/ Join Date: Nov 2006 Location: England Posts: 44	Use the margin: 0 auto in your #menu ul. Unless you're working it as a printable sheet, use px/em/% values as opposed to cm. Also try to avoid RGB, by using HEX.

01-02-2008, 07:56	#7 (permalink)
White Shift http://pseudocrap.net/ Join Date: Nov 2006 Location: England Posts: 44	It doesn't prevent them being centred.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)