Welcome Guest [Log In] [Register]
Support Staff Recommendation
All communities remaining on zIFBoards/InvisionFree should check their conversion opt-in selection in their Admin CP (menu item Tapatalk Conversion)
(Read More)
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
3 Piece Topmenu
Topic Started: Sep 6 2008, 05:14 AM (7,804 Views)
Leonardo
Member Avatar
Hakuna Matata
[ *  *  *  *  *  *  * ]
3 Piece Topmenu
There is no HTML involved in this as you will only be messing around with the CSS. It is quite easy to do this seeing that you are not creating any new classes or ids.
However this is not the only method of creating a 3 Piece Topmenu, this one doesn't need jQuery to append a new class to the existing topmenu.

Theme Appearance
Zetaboards Original CSS
Code:
 
#top {
background:url(http://z3.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-bottom:1px solid #3a5197;
height:20px;
padding:0 2% 4px;
margin-bottom:12px;
}

#top_info {
color:#fff;
float:left;
margin-top:4px;
}

#top_menu {
background:#3a5197;
border-left:1px solid #3a5197;
float:right;
margin-top:0px;
}


Adding the 3 Piece
Code:
 
#top {
background: repeat-x top url( /*REPEATING IMAGE*/ ) transparent;
border-bottom:0px;
height: #px;
padding:0px ;
margin: 0px 7px;
margin-bottom:12px;
}

#top_info {
background: no-repeat top left url(/*LEFT IMAGE*/);
color:#HEX;
font-size:80%;
float:left;
padding:3px 10px;
padding-left: /*width of the image*/ px!important;
margin-top:0px;
}

#top_menu {
background: url( /*RIGHT IMAGE*/ ) top right no-repeat;
font-size:80%;
float:right;
padding:0px;
padding-right: /*width of the image + 10px*/ px!important;
margin-top:0px;
}


Place in the images and the widths of the images within the paddings. You may add additional attributes to the CSS if you wish.
PS. The #top_menu image will not appear for guests.
Enjoy.
Edited by Leonardo, Nov 4 2008, 05:22 AM.
Offline Profile Quote Post Goto Top
 
Replies:
Zex1on
Member Avatar
Member
[ * ]
Thanks. Cool stuff.
Offline Profile Quote Post Goto Top
 
Delirium
Member Avatar
Rill Rill
[ *  *  *  *  *  *  * ]
Leonardo
Sep 5 2009, 08:53 AM
x! Shifty
Sep 2 2009, 07:59 PM
Kieran Marshall
Sep 2 2009, 11:46 AM
x! Shifty
Sep 1 2009, 06:10 PM
Or, just make a massive top right image:
http://z3.ifrm.com/12/51/0/p202603/top.gif

And set that as the background for #top. #top_info overlays, and voila.
In which case it breaks in big screens and takes a lot more to load. Wrapping it would be easier.
How many people do you know who have a screen wider than 2000px? And that's only on width:100%; topmenus. If the width's 90%, you'd have to have a resolution width of 2,222px. LOL

Wrapping's fine indeed, but you're just adding an unnecessary div tag and id.
I love discussion :lol:
I must say both of you bring out valid points, but I think I'll side with Kieran on this one. Even though you are adding another div, it would load much faster than making a large image like that. You should consider those who have slower internet speeds.
Meh, the 2,000px image Shifty posted is only 1.72kb. I really don't think it's going to cause much in terms of loading problems.

Though, I admit I usually make an extra div for a wrap I don't see either technique being more effective than the other.
Offline Profile Quote Post Goto Top
 
x! Shifty
Member Avatar
Member
[ *  *  *  * ]
Lolol, exactly. If you use a .gif and it's a horizontally repeating grad, there really is no filesize to consider. It's like taking into account the tax on interest rates 8-)
Offline Profile Quote Post Goto Top
 
Sith
Member
[ *  *  *  *  *  *  * ]
I just use #menu, #menu_l and #menu_r

Works fine when guests are not logged in too and requires no huge images.
Edited by Sith, Sep 6 2009, 10:48 AM.
Offline Profile Quote Post Goto Top
 
Nicola
Member Avatar
Zatharawrus
[ *  *  *  *  *  *  *  *  *  * ]
Hmm reading the latest comments just reminded me to edit my fluid themes doc: http://docs.zetaboards.com/themes/fluid_themes#top_topmenu <- that ought to work for both guests and members.
Offline Profile Quote Post Goto Top
 
x! Shifty
Member Avatar
Member
[ *  *  *  * ]
Surely #top_left is entirely extraneous?
Offline Profile Quote Post Goto Top
 
Nicola
Member Avatar
Zatharawrus
[ *  *  *  *  *  *  *  *  *  * ]
x! Shifty
Sep 7 2009, 07:35 AM
Surely #top_left is entirely extraneous?
Depends. Not everyone wants to use ultra long images. Plus in my experience, people still whinge even when they're over 2000px :( But they suck :P
Plus depending on the theme design, it can be a heafty file size.
In any case, there is a three-piece top which works for both members and guests. Can be used elsewhere, actually :P
Offline Profile Quote Post Goto Top
 
x! Shifty
Member Avatar
Member
[ *  *  *  * ]
Yeah, I spose it's a bit of a moot argument...

We should all revert to four celled tables for three piece grads.
Offline Profile Quote Post Goto Top
 
Nicola
Member Avatar
Zatharawrus
[ *  *  *  *  *  *  *  *  *  * ]
x! Shifty
Sep 7 2009, 09:06 PM
We should all revert to four celled tables for three piece grads.
:huh: ?
Offline Profile Quote Post Goto Top
 
x! Shifty
Member Avatar
Member
[ *  *  *  * ]
Code: HTML
 
<table cellpadding="0" cellspacing="0"><tr><td id="navwrap"><td id="navleft"><td id="navright"><td id="navtext">
...
</td></td></td></td></tr></table>


Worrrrrrrrd.
Offline Profile Quote Post Goto Top
 
Nicola
Member Avatar
Zatharawrus
[ *  *  *  *  *  *  *  *  *  * ]
... :huh: Please tell me you're joking.

Tables are for tabular data, not for layouts. Divs are far more versatile and don't have a set way of behaving quite like tables do, which can also change depending on the browser. Then on ZetaBoards, the CSS styles the tables and table cells already, so you'd have to 'undo' what has been done on it, which might not even work that well in browsers such as IE.
Having table cells within table cells is just... icky. It's miles cleaner to nest a new table inside a table cell.
Offline Profile Quote Post Goto Top
 
x! Shifty
Member Avatar
Member
[ *  *  *  * ]
Yes, I was kidding :P
Offline Profile Quote Post Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
Finally got to use this :#
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme Tricks · Next Topic »
Add Reply