News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

How to get Header/Frame/Top Section to line up with Navigation Menu?

Started by CrissyUK, December 08, 2014, 02:47:57 PM

Previous topic - Next topic

CrissyUK

Good evening,

Please could you help solve a few layout issues with my forum?

I am using SMF 2.0.9 and a modified version of the default theme. The url is: http://mazdarotaryclub.com/forum

ISSUE NO. 1
The aim is to have the header and menu bar adjacent and to obtain this effect I set the height of header, frame and top_section to 300px or min-height 300px and set the image as background. Change the height and background of the menu bar too. At this point the menu bar was some way below the header section and the only way I could find to bring that up was to change the top margin to -111px in the CSS file for my custom theme.

This looked perfect in Chrome , Opera. iPad, iPhone and Android devices (phone and tablet) with my avatar which is 100 x 74px, however, as all the avatars were moved over exactly as they were from the previous forum (vB) during the conversion, all Hell breaks loose when the avatars are smaller or bigger or absent (see attachment).

Is there a way to resolve this that would work consistently across browsers?

ISSUE NO. 2
Is there an easy way to make the login page look correct in all browsers? FF and Safari seem to be the ones causing this slight but very annoying issue, whereas Chrome, Opera and IE are behaving as expected.

Thank you in advance for your help.  :)

ARG01

Just a thought, have you tried making any adjustments to the upper section to correspond with changes made to the header section?

#upper_section {
    padding: 5px;
    position: relative;
    top: -8em;
}
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

CrissyUK

Yes, I removed this line: /*   margin-bottom: 1.5em;*/ and then tweaked the width of the two sections with the username, avatar and the search button.

If I set a fixed height for this section (I guess max-height 74 (avatar) + 5 px (padding)) would it solve the alignment issue?

I have now placed the 3 little links on one line so all that appears underneath is the date for normal users and 2 additional lines for Mods and Admins when new members join or there is a moderator report. This should take care of too many lines pushing the menu bar down.


ARG01

CSS is perhaps the easiest code to work with. All I can say is give it a try. Just play around with it and eventually you will find the right solution.
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

CrissyUK

OK, you were correct - set a fixed height for #upper_section and it seems to work across browsers and tablets.

Thank you, much appreciated.

Cristina

Advertisement: