Aligning menu blocks horizontally

dooglex · #1 (**permalink**) Apr 9th, 2008, 20:58

I am trying to use the following code to create a menu across the top of a page but the display:block tag automatically adds them to a new line, is there a way to override this?
Thanks

Code: Select all

#home
{
  display: block;
  width: 107px;
  height: 23px;
  background: url("home.gif") no-repeat 0 0;
}

#home:hover
{ 
  background-position: -180 0 ;
}

#home span
{
  display: none;
}

#price
{
  display: block;
  width: 107px;
  height: 23px;
  background: url("price.gif") no-repeat 0 0;
}

#price:hover
{ 
  background-position: -180 0 ;
}

#price span
{
  display: none;
}

#enq
{
  display: block;
  width: 107px;
  height: 23px;
  background: url("enq.gif") no-repeat 0 0;
}

#enq:hover
{ 
  background-position: -180 0 ;
}

#enq span
{
  display: none;
}

HTML: Select all

<div id="container">
  <div id="heading">
   <h1>Ock Hire</h1>
  </div>
  <div id="navigation">
  <p>navigation</p>
  </div>
  <div id="content">

marSoul · #2 (**permalink**) Apr 9th, 2008, 21:05

I have a tutorial about this in my weblog, maybe it can help you :
http://blog.datisdesign.com/2008/01/...tion-with-css/

dab42pat · #3 (**permalink**) Apr 9th, 2008, 21:19

Slightly off topic.

Nice site Marsoul.

On topic.

If Marsoul's tutorial doesn't solve your problem, you may have to post your complete html code and css code to allow us to try and solve your problem.

Cheers

Pat

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Aligning Flash Menu Correctly.	lilandy	Web Page Design	4	Jun 15th, 2008 01:34
Blocks of writing	Evilaussie	Web Page Design	5	Jul 21st, 2007 13:50
Gradient background appearing in blocks ???	j4mes_bond25	Web Page Design	2	Jul 4th, 2006 15:01
Aligning blocks at the bottom of a containing block	nomis80	Web Page Design	2	Jul 25th, 2005 22:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Aligning menu blocks horizontally