By 1cookie on

hi

Seems like a simple thing to do but i'm having difficulty with it! :) I'm trying to position a menu block fixed directly to the top of a browser. Simple?, hmm.... OK, I'm calling the menu block from my page.tpl.php page like so:

 </head>
  <body>
    
  <!-- Layout -->
    <div class="container"> <!-- add "showgrid" class to display grid -->
  
     
      <!-- menu -->
        <?php include('inc/menu.inc');

?>

the menu.inc file looks like:


<div id="menu-nav"><?php if (!empty($nav)) print $nav; ?&gt;</div>

<div id="menu-shadow" class="wrapper"></div>

In my style sheet, ive set all relevant margins to zero, i.e.:

#menu-nav {
  
  height:3em;
  margin: 0 0 3em; 
  position: relative;
}



/**
 * 2.LAYOUT
 */
.container {
  margin: 0 auto;
  padding: 0;
  width: 950px;
}





body {
  background: #fff;
  color: #222;
  font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  font-size: 75%;
  line-height:1.5;
  margin: 0;
  padding: 0;
}

so you would expect the #menu-nav block to position at the top of the view-port? Well, it don't! :) See:

http://webtechnologies.me.uk/img/menu.png

any ideas?

⋅ Categories: Drupal 6.x

Comments

marcusthijm’s picture

marcusthijm commented

You could position your nav absolutely, like so:

#menu-nav {
  height:3em;
  margin: 0 0 3em; 
  position: absolute;
  top: 0;
}

You should give .container some padding-top to make room for the menu.

Other tips: get rid of the blank lines in your html and don't put everything inside <?php ?>

1cookie’s picture

1cookie commented

hi

I'll have a look at it further tomorrow. The absolute positioning destroys it! :) http://webtechnologies.me.uk/img/oops.png