By Dalto11 on

So, my friend and I are working on a drupal theme to go with our schools new website we've set up. So here is what I whipped up:

http://img70.imageshack.us/img70/8022/schooltheme.png

So far its only an image and PSD of course, but we'll be turning it into CSS here soon. My question is, since he mentioned it would be a problem, is there any way to get drupal to have the menu where the buttons will be to be under my image header?

Comments

sneyerst’s picture

sneyerst commented

Well.. actually it's not really something Drupal can do, but it's all about some CSS magic.
I'd suggest you convert your design to something like this:

...
<body>
  <div id="page">
    <div id="header">...</div>
    <div id="primary">
      <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
    </div>
    ...
  </div>
</body>
...

Please note that I have used the primary_links menu. I do think this is appropriate for your layout.
The CSS stylesheet that's needed to center the page and to show the menu items next to each other is as follows:

body {
  text-align: center;   /* IE compatibility */
}
	
div#page {
  width: 960px;  /* Change this to whatever width you'd like for your design */
  text-align: left;
  margin-left: auto;   /* Firefox way of centering things */
  margin-right: auto;
}

div#header {
  height: 100px;  /* Change this to your header's height */
}


/**
 * What follows is the style definition for primary links that I've created for one of my websites. Just play with different CSS commands and see what the result looks like.
 */
div#primary ul li {
  background-image: url('images/separator.gif');
  background-position: top right;
  float: left;
  height: 2.8em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-top: 1.3em;
}

div#primary ul li a {
  color: #729300;
  text-decoration: none;
  font-size: 1.3em;
  font-weight: bold;
}

It's just a basic implementation what I've listed here, but I use it as a barebone for many of my themes.
I hope this answers your question.