Welcome Guest [Log In] [Register]
This board has been archived and is no longer accepting new questions. If you have a support question for your ZetaBoard, please visit us at the new support board. Registration is free and easy.


Visit the NEW ZetaBoards Support forum!

Username:   Password:
Locked Topic
[Solved]Bars above and below LOGO; CSS help please
Topic Started: May 30 2008, 03:33 PM (399 Views)
TeachX3
Member Avatar
Member
[ *  * ]

Currently, the colors of the bars above the logo are Orange/Blue and the bars below the logo are Orange/Blue

I would like to switch the colors around and have it: Blue/Orange LOGO Orange/Blue

heehee, make sense? How would I go about this?

Thanks!! :D

Offline Profile Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Like this? Just replace what you have from #top_bar to #submenu with this:
CSS
 
#top_bar {
background:url(http://z3.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
height:19px;
}

#top {
background:url(http://z3.ifrm.com/static/1/css/h2s.png) repeat-x top #FB9D3A;
border-bottom:1px solid #e77700;
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;
}

.drop_menu li {
background:url(http://z3.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
float:left;
margin-right:1px;
text-align:center;
}

.drop_menu a {
color:#5a70b3;
display:block;
padding:4px .25em;
position:relative;
width:9em;
}

.drop_menu a:hover {
color:#ef7400;
}

.drop_menu ul {
-moz-opacity:0.85;
border-top:1px solid #3A5197;
color:#fff;
left:-999em;
margin:0;
opacity:0.85;
position:absolute;
width:9.4em;
}

.drop_menu ul li {
background:#5a70b3;
font-size:85%;
margin:0;
padding:0;
width:100%;
}

.drop_menu ul li a {
border:0 solid #3A5197;
border-width:0 1px 1px;
display:block;
padding:4px 5%;
width:90%;
}

.drop_menu li ul li a:hover {
background:#3a5197;
}

#logo {
background:url(http://img.photobucket.com/albums/v64/TeachX3/F4LFHoldingHands.jpg) #566cb0;
border:1px solid #3a5197;
border-bottom:0;
clear:both;
margin:0 2%;
}

#submenu_bar {
background:url(http://z3.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-left:1px solid #3a5197;
border-right:1px solid #3a5197;
height:14px;
margin:0 2%;
}

#submenu {
background:url(http://z3.ifrm.com/static/1/css/h2s.png) repeat-x top #FB9D3A;
border-left:1px solid #e77700;
border-right:1px solid #e77700;
color:#586eb1;
font-size:85%;
margin:0 2%;
padding:3px 1% 4px;
text-align:right;
}
Offline Profile Goto Top
 
TeachX3
Member Avatar
Member
[ *  * ]
oops, no... now it is:

blue
orange (with blue drop downs)
LOGO
blue
orange

I want it:

orange
blue
LOGO
blue
orange

Sorry to be a bother about this *blush*

Edited by TeachX3, May 30 2008, 04:17 PM.
Offline Profile Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Sorry, my fault for getting confused (I need some tea! :P )

So to clarify, you just wanted to swap the #submenu_bar and #submenu colours around? If so, then replace the #top_bar and #top CSS I just pasted with the default:
CSS
 
#top_bar {
background:url(http://z3.ifrm.com/static/1/css/topbar.png) repeat-x top #FB9D3A;
height:19px;
}

#top {
background:url(http://z1.ifrm.com/static/1/css/topmenu.png) repeat-x bottom #586eb1;
border-bottom:1px solid #6c80be;
height:20px;
padding:0px 1px 5px 2%;
margin-bottom:25px;
}
Offline Profile Goto Top
 
TeachX3
Member Avatar
Member
[ *  * ]

That works just fine Nicola (green tea is my fav :) ) ... but how come there is now an 'open area' between the top bar and the logo strip that the background shows through but the logo strip and bottom bar touch...

Offline Profile Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Margins.

margin-bottom:25px; <- Remove that line from the #top. Then add this to the CSS (around where the other .drop_menu parts are if you want):
CSS
 

.drop_menu {
margin:0;
}
Offline Profile Goto Top
 
TeachX3
Member Avatar
Member
[ *  * ]

Fantastic! :D Thanks again Nicola...

Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme & CSS Help · Next Topic »
Locked Topic