News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Criterion

Started by ARG, March 10, 2013, 04:37:02 PM

Previous topic - Next topic

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.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Antechinus

#21
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.

#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 :P) 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. :D

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:"?
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

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.   ;D
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

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.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

ARG01

Okay jafonseca, open index.css and find

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


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



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


change to:
#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.  ;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

meetdilip


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.

#topnav li li {
    height: auto;
    padding: 0;
    width: 200px;
}
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

jafonseca

Quote from: ARG on March 17, 2013, 04:29:46 PM
Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

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


Is a code to add to index.css file?

ARG01

Quote from: jafonseca on March 17, 2013, 05:08:14 PM
Quote from: ARG on March 17, 2013, 04:29:46 PM
Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

#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.  ;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Costa

Cool theme ARG. Very nice.
Hugo "Costa" Fernandes - PT SMF
Todas as MP's a pedir ajuda são sujeitas a radioactividade, microondas, queimadas e atiradas borda fora.

"At least someone appreciates the fact that I am doing and not thinking..."
"Laziness is counter-revolutionary."

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


ARG01

#37
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.  ;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

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


Advertisement: