Sliding doors navigation

Forum Moderators: not2easy

Message Too Old, No Replies

Sliding doors navigation

ChrisBolton

11:01 am on Aug 20, 2008 (gmt 0)

When it comes to CSS, I thought I knew it all but this seems not to be the case. I'm using the sliding doors technique for a horizontal navigation bar. The links are contained in a list. The CSS for the list item holds has the right side background image, and the CSS for the link holds the left side background image. Due to the fact that I need padding around the links to display the background images correctly, I have made the list items and links block level and floated them left.

Now the problem is, I need the whole navigation container to align centrally, irrelevant of width, and I can't specify a width due to the fact that the user can change the text size, making the box bigger or smaller.

I tried 'text-align:center' for the containing <ul>, which works fine until I float the list items and links. Without the float, it's impossible to get block level elements to display inline.

Any suggestions?

Kind regards. Chris.

swa66

1:02 pm on Aug 20, 2008 (gmt 0)

A solution would be in getting them to be inline (or inline blocks). And then you could give the parent text-align:center.
I've never tried it before and there are some IE caveats with display:inline-block (what's new)
See also suzyuk's post here: [webmasterworld.com...]

csuguy

1:16 pm on Aug 20, 2008 (gmt 0)

I was able to do it with a little nested div action:


<html>
<head>
  <title>title</title>  <style>
  <!--
  body
  {
   margin:0px;
   padding:0px;
  }
  #container
  {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   margin:0px;
   padding:0px;
   background-color:red;
  }
 
  #subcontainer
  {
   display:inline;
   margin:auto;
  }
  #links
  {
   position:relative;   
  }
  -->
  </style>
</head>
<body>
  <div id="container"><center>
   <div id="subcontainer">
     <ul id="links">
      <li>Home</li>
      <li>About Us</li>
      <li>Services</li>
      <li>Contact Us</li>
     </ul>
   </div>
  </center></div></body>
</html>

It displays slightly differently in Firefox from IE (a top padding) - however this should get you started. Opera displays like IE - no padding - so it maybe a Firefox issue. I'm sure there's a hack out there to target FF - but I don't it myself :/. But this should get you started.

Oh - and you'll notice if you try to add a background-color or image that you'll get different results about where its applied to - so apply any of that stuff to the div immediately surrounding it.

Ryan