Criterion

[ARG01]

I guess you're right. Since there is no header background image that would help but, in jafonseca's image the header seems fine. It looks like it's the "user" area that seems to be having the issues.

[Antechinus]

Yeah but that's wrapped in the header, so if the header has a fixed height........

A floated element inside a non-floated element will overflow like that if the non-floated element is not tall enough.

Other thing that might sort it is clearing the float on the user area. Easiest way to do that would be to use a pseudo clearfix.

Code Select Expand

#userarea:after {content: ""; display: block; clear: both;}

Or you could just put the pseudo on the header itself. Either should work.

ETA: Meh. Might as well give you the full story. I didn't even look at the way you've coded it, so TBH I didn't think much, so that means I didn't suggest clearing floats earlier.

My guess (still haven't looked at the code ) is that due to the way it's breaking your user area is floated. IF it is, you just need to clear the float. Pseudo clearfix is awesome for this, as long as you can get away wth the clear: both; (doesn't always work with other stuff, but should be fine here).

Other old school but still useful way of clearing floats is to use auto overflow on the parent element (header, in this case) but that has drawbacks if one of the child elements (like teh menu hey) has drop menus in it.

If the droppy content is tall enough, it'll get hidden by the parent's auto overflow and the parent will get a vertical scrollbar. This tends to make people grumpy.

Auto overflow is still really useful though, as long as you don't have to worry about it hiding things like drop menus. It will do a bulletproff job of clearing floats, and as long as the element can expand to hold its content it wont show a scrollbar.

There ya go. Sneaky css trix FTW.

[ARG01]

Wouldn't a basic "height: auto;" like I used in the footer area work? Maybe accompany it with a "min-height:"?

[Antechinus]

You don't need auto height. Auto is default behaviour anyway. It's a bit like specifying border-radius: 0;

If your userarea is floated, it will need to have a clearfix if the user area is what is going to push the header to whatever height. Otherwise it wont do the pushing and will just overflow. Try it.

[Antechinus]

Oh while I thnk of it, there's another way you could tackle it. Float the header. If you do that, it will automatically wrap any floated content.

I assume it's inside a wrapper div that controls the overall theme width. In that case, adding float: left; width: 100%; to the header declaration will do the trick. The only detail you have to watch with that is that you can't use left or right padding on the header itself, unless you also declare box-sizing: border-box;

Box-sizing is supported back to IE8 anyway, so it's safe to use unless you're into zombie browsers, but you can usually get away without padding on the parent and just use margins on the child elements anyway.

Basically, this is easy to fix and there are several possible ways you can tackle it. Just use whichever method works best for the elements in question.

[ARG01]

Thanks for the advise. Yes, the header, logo and userarea are all in the same wrapper. I will toy with it when I get to my comp. I guess the best way to tackle it would be to set up a test site and add a whole crap load of links to the menu.   

[Antechinus]

Or you can just add insane side padding to each menu link, if you dont want to mess with the Subs array.

[ARG01]

That will work too.

[ARG01]

Okay jafonseca, open index.css and find

Code Select Expand

#toolbar {
background: url(../images/toolbar.png) repeat-x; border-radius: 4px 4px 0 0;
height: 42px;
}

change to:

Code Select Expand

#toolbar {
background: #fff url(../images/toolbar.png) repeat-x; border-radius: 4px 4px 0 0;
height: 90px;
}


then find:

Code Select Expand

#header {
background: #fff; border-radius: 0 0 5px 5px;
height: 140px;
}

change to:

Code Select Expand

#header {
background: #fff; border-radius: 0 0 5px 5px;
height: 140px;
display: block;
        clear: both;
}

But again, if you desire a multitude of menu items, you should really consider using sub-menus. 

[meetdilip]

Good one ARG.

[jafonseca]

Thanks a lot for all but i think i have many problems with my web i supposed

[ARG01]

Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

Code Select Expand

#topnav li li {
    height: auto;
    padding: 0;
    width: 200px;
}

[jafonseca]

Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

Code Select Expand

#topnav li li {
    height: auto;
    padding: 0;
    width: 200px;
}

Is a code to add to index.css file?

[ARG01]

Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

Code Select Expand

#topnav li li {
    height: auto;
    padding: 0;
    width: 200px;
}

Is a code to add to index.css file?

Although you are probably the only one with an ungodly amount of nav links, I am going to rewrite the entire nav/header code just for you. Stay tuned. 

[Costa]

Cool theme ARG. Very nice.

[TheListener]

Love the theme ARG

But so I can correct a few button colours and would you please let me know where I can find the font colours.

Not all the headings show as white text. 

Also I ause the nice tooltips mod on the forum. Could you please let me know the hex colours needed so the mod doesn't look outta place please.

Have added the mods attachments so ya have an idea of what I am babbling on about.

The Mod: http://custom.simplemachines.org/mods/index.php?mod=2115

[meetdilip]

Good one ARG.

[ARG01]

Thanks meetdilip. 



Just to clear things up, I was not slacking in my support duties for this theme. Old Fossil's issues have been solved elsewhere. 

[firefly8568]

great theme.. love the color blending. very pleasing to the eyes..

im currently customizing the theme; can you please assists me in making the logo place a little bit wide?

and transfer the menu right below the logo..

and remove the date and search area..

im trying to delete this but im receiving template parse error..

<div id="header">
         <a href="'.$scripturl.'" id="logo" title=""></a>
         <div id="user">';

   // If the user is logged in, display stuff like their name, new messages, etc.
   if ($context['user']['is_logged'])
   {
      if (!empty($context['user']['avatar']))
      echo '
         ', $context['user']['avatar']['image'];
      echo '
            <ul class="reset">
               <li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
               <li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
               <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

      echo '
            </ul>';
   }
      // Otherwise they're a guest - this time ask them to either register or login - lazy bums...
   else if (1 == 2)
   {
      echo '
            <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
            <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
               <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
               <input type="text" name="user" size="17" class="input_text" />
               <input type="password" name="passwrd" size="17" class="input_password" />
               <input type="submit" value="', $txt['login'], '" class="button_submit" />';

      if (!empty($modSettings['enableOpenID']))
         echo '
               <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

         echo '
               <input type="hidden" name="hash_passwrd" value="" />
            </form>';
      }

   echo '
         </div>
      </div>
      <div id="main_body">
         <div id="search_block">
            <form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
               <input class="inputbox" type="text" name="search" value="', $txt['forum_search'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['forum_search'], '\';" />
               <input type="hidden" name="advanced" value="0" />';

      // Search within current topic?
      if (!empty($context['current_topic']))
         echo '
               <input type="hidden" name="topic" value="', $context['current_topic'], '" />';

      // If we're on a certain board, limit it to this board .
      elseif (!empty($context['current_board']))
         echo '
               <input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

         echo '
            </form>
            <ul class="reset">
               <li id="time">', $context['current_time'],'</li>';

      // Is the forum in maintenance mode?
      if ($context['in_maintenance'] && $context['user']['is_admin'])
         echo '
               <li><strong>', $txt['maintenance'], '</strong></li>';

      // Are there any members waiting for approval?
      if (!empty($context['unapproved_members']))
         echo '
               <li><a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">(', $context['unapproved_members'] , ' ', $txt['approval_member'], ')</a></li>';

      if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
         echo '
               <li><a href="', $scripturl, '?action=moderate;area=reports">(', $context['open_mod_reports'], ' ', $txt['open_reports'], ')</a></li>';

         echo '
            </ul>
         </div>';

thank you