Div Positions

KBOOM · #1 (**permalink**) May 15th, 2008, 00:56

Hi!

I've started developing a Portal using Drupal, but I've got some questions in relation to the template.

I'm trying to do the upper menus with the following conditions:

- The Primary Menu has to be alligned to the right, together with the Secondary Menu (Must have the same distance from the logo (50px) ).
- The distance must be 7 px between them.
- Logo always centered vertically.
- The Secondary Menu fills all the space between the logo and the right of the page.
- 0px distance (absolute, left:0 bottom:0 ?) between the Secondary Menu and the Gradient

http://img213.imageshack.us/img213/6880/menuvw8.png

The code is this one:

CSS:

Code: Select all

 #header
  {
  margin:0 0 0 15px;
  position:relative;
  min-height:75px;
  }
 
  #gradient {
  border-top:5px solid #e2e2e2;
  background: #FFFFFF url(img/gradient-blue.png) repeat-x 0 0;
  height:161px;
  width:100%;
  position:relative;
  }

  #navbar
  {
  float:right;
  width: 100%;
  margin-left: -200px;
  }

  #navbar-inner
  {
  margin-left: 200px;
  }

  #primary /* Primary links */
  {
  position:relative;
  margin-left: 0px;
  }
 
  #navbar #primary * {
  margin:0;
  padding:0;
  }
 
  #navbar #primary li {
  border-right: 1px dashed #dbdbdb;
  }
 
  #navbar #primary li a:hover {
  background:url(img/menu-primary-bg.png) repeat-x 0 0;
  color:#e77a22;
  }
 
  #navbar #primary li a {
  font-weight:bold;
  text-decoration:none;
  padding:20px 20px 0 20px;
  color:#646464;
  display: block;
  }
 
  #navbar #primary li.first {
  border-left: 1px dashed #dbdbdb;
  }

  #navbar #secondary /* Secondary links */
  {
  clear:both;
  position:relative;
  padding:6px 6px 6px 6px;
  background-color:#f3f3f3;
  height:20px;
  border-top:1px solid #eaeaea;
  bottom:0;
  }
 
  #navbar #secondary li a {
  color:#898989;
  text-decoration:none;
  font-weight:bold;
  font-size:85%;
  }
 
  #logo
  {
  width:200px;
  position:relative;
  float: left;
  margin: 0;
  padding: 0;
  }

  #secondary
  {
  margin-left: 0px;
  }

  #navbar ul
  {
  margin: 0;
  padding: 0;
  text-align: left;
  }

  #navbar li
  {
  float: left;
  padding: 0 10px 0 0;
  }

  #header,
  #navbar,
  {
    overflow: visible;
    word-wrap: break-word;
  }
 
  ul.links /* Taxonomy links, node links, comment links */
  {
  margin: 0;
  padding: 0;
  }

  ul.links.inline
  {
  display: inline;
  }

  ul.links li
  {
  display: inline;
  list-style-type: none;
  padding: 0 0.5em;
  }

HTML: Select all

<body class="front logged-in page-node one-sidebar sidebar-left">

<div id="page"><div id="page-inner">
<div id="header"><div id="header-inner" class="clear-block">
<div id="logo"><a href="/" title="Home" rel="home"><img src="/sites/default/files/zen_logo.png" alt="Forex Pivots Brasil" id="logo-image" height="75px" width="130px" /></a></div>
<div id="navbar">
<div id="navbar-inner">

<div id="primary">
<ul class="links"><li class="menu-163 first"><a href="/forum" title="">Fórum</a></li>
<li class="menu-224"><a href="/artigos" title="">Artigos</a></li>
<li class="menu-228 last"><a href="/noticias" title="">Notícias</a></li>
</ul>
</div> <!-- /#primary -->

<div id="secondary">
<ul class="links"><li class="menu-317 first active"><a href="/" title="" class="active">Registrar</a></li>
<li class="menu-318 last active"><a href="/" title="" class="active">Login</a></li>
</ul>
</div> <!-- /#secondary -->

</div></div> <!-- /#navbar-inner, /#navbar -->
</div></div> <!-- /#header-inner, /#header -->

<div id="gradient"></div>

</body>

Thanks!!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Flash / ActionScript Freelancer Positions	jasfe79	Job Opportunities	0	Aug 18th, 2006 09:39
Header text moving positions in IE & FF	Pickle	Web Page Design	9	Jan 19th, 2006 23:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Div Positions