CSS Problem - Please Help! - Frontend

July 9, 200818 yr

Hi. I've got a CSS problem...

I have a site made with joomla here: http://www.visionartisanfilms.com/site

And a Forum made with phpbb3 here: http://www.visionartisanfilms.com/site/distribution

The problem is, I'm trying to make them look the same, and I am stuck on the navigation bar, with the hover effect.

Here is my CSS for Joomla (template_css.css):

/* MAIN NAVIGATION
--------------------------------------------------------- */
#navcontainer {
width: 100%;
padding-bottom: 1px;
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
}

#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }

#navcontainer ul {
margin: 0;
height: 42px;
padding: 0 10px 0 10px;
font-size: 1.1em;
}

#navcontainer ul li a {
padding: 12px 10px 0 10px;
height: 30px;
color: #FFFFFF;
text-decoration: none;
float: left;
}

#navlist li a:hover, #navlist li a:active {
text-decoration: none;
text-align: left;
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav_hover.gif") top repeat-x;
}




/*#ja-mainnav {
font-size: 1em;
line-height: normal;
background: url(../images/mainnav-bg.gif) no-repeat top left;
height: 50px;
}

.narrow #ja-mainnav {
background: url(../images/mainnav-narrow-bg.gif) no-repeat top left;
}

#ja-mainnav a {
}

#ja-subnav {
padding: 10px 20px 5px;
margin: 0;
clear: both;
line-height: normal;
}
*/
/* Default Joomla! Menu */
a.mainlevel {
padding: 3px 3px 5px 3PX;
width: 98%;
display: block;
background: url(../images/a-mainlevel-bg.gif) no-repeat bottom right;
color: #333333;
text-decoration: none;
}

a.mainlevel:hover,
a.mainlevel:active,
a.mainlevel:focus {
color: #333333;
background: url(../images/a-mainlevel-bg2.gif) no-repeat bottom right #FFFFFF;
text-decoration: none;
}

a.mainlevel#active_menu {
color: #006699;
background: url(../images/a-mainlevel-bg3.gif) no-repeat bottom right;
font-weight: bold;
text-decoration: none;
}

a.sublevel {
padding: 2px 4px 2px 13px;
display: block;
color: #333333;
background: url(../images/bullet-list.gif) no-repeat 2% 55%;
text-decoration: none;
}

a.sublevel:hover,
a.sublevel:active,
a.sublevel:focus {
color: #006699;
background: url(../images/bullet-list2.gif) no-repeat 2% 55%;
text-decoration: none;
}

#active_menu {
background: url(../images/bullet-list2.gif) no-repeat 2% 55%;
color: #006699;
font-weight: bold;
}

/* SPOTLIGHT
--------------------------------------------------------- */
/* Sub Header */
#ja-sh {
clear: both;
height: 150px;
overflow: hidden;
background: #000000;
border-bottom: 1px solid #000000;
}

/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left div.moduletable {
padding-right: 20px;
}

.ja-box-right div.moduletable {
padding-left: 20px;
}

.ja-box-center div.moduletable {
padding: 0 20px;
}

/* Top Spotlight */
#ja-topsl {
clear: both;
background: url(../images/topsl-bg.jpg) no-repeat #000000;
color: #FFFFFF;
border-top: 1px solid #333333;
border-bottom: 1px solid #000000;
}

#ja-topsl a,
#ja-botsl a {
color: #FFFFFF;
}

#ja-topsl div.moduletable {
padding: 20px;
}

.narrow #ja-topsl div.moduletable {
padding: 20px 5px;
}

#ja-topsl div.ja-box-left,
#ja-topsl div.ja-box-center,
#ja-topsl div.ja-box-right {
padding: 0;
}

#ja-topsl div.ja-box-left,
#ja-topsl div.ja-box-center,
#ja-botsl div.ja-box-left,
#ja-botsl div.ja-box-center {
background: url(../images/v-seperator.gif) repeat-y top right;
}

/* Bottom Spotlight */
#ja-botsl {
width: 100%;
clear: both;
color: #F0F0F0;
background: url(../images/botsl-bg.jpg) no-repeat bottom #181818;
}

#ja-botsl div.moduletable {
margin: 0;
padding: 20px;
}

#ja-topsl h3,
#ja-botsl h3 {
padding: 0;
margin: 0 0 5px;
border: none;
background: none;
text-indent: 0;
color: #F0F0F0;
}

#ja-topsl ul,
#ja-botsl ul {
padding: 0;
margin: 0!important;
}

#ja-topsl li,
#ja-botsl li {
padding: 0 0 0 12px;
margin: 0;
background: url(../images/bullet-list-sl.gif) no-repeat 0 55%;
}

#ja-topsl a,
#ja-botsl a {
color: #FFFFFF;
text-decoration: underline;
}

#ja-topsl a:hover, #ja-topsl a:active, #ja-topsl a:focus,
#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #FFFFFF;
text-decoration: underline;
}

#ja-topsl td,
#ja-botsl td {
padding: 0;
}

#ja-botsl .article_seperator,
#ja-topsl .article_seperator {
display: none;
}

#ja-botsl table,
#ja-topsl table {
border-spacing: 0;
border-collapse: collapse;
}

/* PATHWAY
---------------------------------------------------------*/
#ja-pathway {
margin: 0 0 20px;
padding: 10px 6px;
display: block;
background: #000000;
font-size: 1em;
line-height: normal;
text-indent: 15px;
border-top: 1px solid #181818;
border-bottom: 1px solid #C0C0C0;
color: #FFFFFF;
}

#ja-pathway img {
margin: 0 5px 1px;
}

#ja-pathway strong {
margin-right: 5px;
}

#ja-pathway a {
color: #F0F0F0;
}

#ja-pathway a:hover, #ja-pathway a:active, #ja-pathway a:focus {
color: #FFFFFF;
}

/* CONTENT COLUMN
--------------------------------------------------------- */
#ja-mainbody {
float: left;
width: 80%;
border: 2px solid #000000;
}

#ja-mainbody #ja-contentwrap {
float: right;
width: 75%;
}

#ja-mainbody-fl {
float: left;
width: 80%;
}

#ja-mainbody-fl #ja-contentwrap {
float: left;
width: 100%;
}

#ja-mainbody-fr {
float: left;
width: 100%;
}

#ja-mainbody-fr #ja-contentwrap {
float: right;
width: 80%;
}

#ja-mainbody-fr #ja-leftcol {
width: 20%;
}

#ja-mainbody-f {
float: left;
width: 100%;
}

/* LEFT COLUMN + RIGHT COLUMN
--------------------------------------------------------- */
#ja-leftcol {
float: left;
width: 24.9%;
margin-bottom: 10px;
}

#ja-leftcol-inner {
padding: 0 0 0 15px;
}

#ja-rightcol {
float: right;
width: 18.9%;
}

#ja-leftcol table,
#ja-rightcol table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-leftcol ul li {
padding-left: 10px;
margin: 0;
background: url(../images/bullet-list.gif) no-repeat 0 7px;
}

#ja-rightcol ul li {
padding-left: 10px;
margin: 0;
background: url(../images/bullet-list-sl.gif) no-repeat 0 7px;
}

#ja-leftcol ul,
#ja-rightcol ul {
margin: 0;
}

#ja-leftcol li a {
color: #333333;
}

#ja-rightcol a {
color: #FFFFFF;
text-decoration: underline;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footer {
clear: both;
overflow: hidden;
position: relative;
text-align: left;
padding: 20px;
color: #888888;
}

#ja-footer a {
color: #888888;
font-weight: bold;
}

#ja-footer a:hover,
#ja-footer a:active,
#ja-footer a:focus {
color: #F0F0F0;
}

#ja-footnav ul {
margin: 0;
}

#ja-footnav li {
display: inline;
background: none;
padding: 0 20px 0 0;
}

#ja-bottomline {
float: left;
}

#ja-cert {
position: absolute;
top: 40px;
right: 22%;
}

#ja-cert a {
padding-left: 10px;
}

/* MISCELLANOUS
----------------------------------------------------------- */
#ja-banner {
text-align: center;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
margin: 10px 0;
display: block;
}

#mod_login_password, #mod_login_username {
width: 93%;
}

#mod_login_password {
}

#mod_login_username {
}

#mod_login_remember {
border: none;
background: none;
}

/* JA CoolAds Module */
#ja-coolads {
height: 0;
overflow: hidden;
position: relative;
}

#ja-coolads-container {
margin-right: 5%;
overflow: hidden;
}

#ja-coolads-container div.moduletable {
overflow: hidden;
}

/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

* html > body .clearfix {
width: 100%;
display: block;
}

* html .clearfix {
height: 1%;
}

/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}

And here is more code for the joomla navigation bar (ja-splitmenu.css):

 
/*------------------------------------------------------------------------
# JA Villadi 1.0 - Mar, 2007
# ------------------------------------------------------------------------
# Copyright (C) 2004-2007 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites:  http://www.joomlart.com -  http://www.joomlancers.com
-------------------------------------------------------------------------*/

/* TOP NAVIGATION
----------------------------------------------------------- */

#ja-splitmenu {
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
margin: 0;
padding: 0 0 0 10px;
}

#ja-splitmenu ul {
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
margin: 0;
padding: 0;
list-style: none;
}

#ja-splitmenu li {
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
margin: 0;
padding: 0;
display: inline;
}

#ja-splitmenu a {
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
float: left;
margin: 0 2px;
padding: 0 0 0 5px;
display: block;
color: #F0F0F0;
text-decoration: none;
font-size: 120%;
line-height: 46px;
}

#ja-splitmenu a span {
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
float: left;
display: block;
font-weight: bold;
padding: 0 25px 0 20px;
}

#ja-splitmenu a:hover,
#ja-splitmenu a:active,
#ja-splitmenu a:focus {
float: left;
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav_hover.gif") top repeat-x;
text-decoration: none;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}

#ja-splitmenu a:hover span,
#ja-splitmenu a:active span,
#ja-splitmenu a:focus span {
float: left;
display: block;
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav_hover.gif") top repeat-x;
}


/* Commented Backslash Hack hides rule from IE5-Mac \*/
#ja-splitmenu a span { float: none; }
/* End IE5-Mac hack */

#ja-splitmenu li.active a,
#ja-splitmenu li.active a:hover,
#ja-splitmenu li.active a:active,
#ja-splitmenu li.active a:focus {
color: #FFFFFF;
padding: 0 0 0 6px;
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
}

#ja-splitmenu li.active a span,
#ja-splitmenu li.active a:hover span,
#ja-splitmenu li.active a:active span,
#ja-splitmenu li.active a:focus span {
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
}

/* SUB NAVIGATION
--------------------------------------------------------- */
#ja-subnav {
background-image: url(http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif);
}

#ja-subnav ul {
margin: 0;
padding: 0;
}

#ja-subnav li {
margin: 0;
padding: 0;
display: inline;
background: none;
line-height: normal;
}

#ja-subnav a {
padding: 0 20px;
float: left;
display: block;
color: #FFFFFF;
background: url(../images/v-seperator.gif) repeat-y top left;
}

#ja-subnav a:hover,
#ja-subnav a:active,
#ja-subnav a:focus {
color: #16A9CD;
text-decoration: none;
}

#ja-subnav li.active a,
#ja-subnav li.active a:hover,
#ja-subnav li.active a:active,
#ja-subnav li.active a:focus {
color: #16A9CD;
text-decoration: none;
font-weight: bold;
}

#ja-subnav .first-item {
background: none!important;
}

Here is the code for the PHPBB3 Nav Bar...

 
/* Navigation
--------------------- */

#navcontainer {
width: 100%;
padding-bottom: 1px;
background: url("{T_THEME_PATH}/images/nav.gif") top repeat-x;
}

#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }

#navcontainer ul {
margin: 0;
height: 42px;
padding: 0 10px 0 10px;
font-size: 1.1em;
}

#navcontainer ul li a {
padding: 12px 10px 0 10px;
height: 30px;
color: #FFFFFF;
text-decoration: none;
float: left;
}

#navlist li a:hover, #navlist li a:active {
text-decoration: none;
text-align: left;
background: url("{T_THEME_PATH}/images/nav_hover.gif") top repeat-x;
}

I copied the code, and updating the links. But the problem is, that the Joomla Navigation bar is Seperated into chunks like this:

When I want it to be like this:

Can anyone help me with this?

Thanks,

-Meshach

July 9, 200818 yr

Remove the left and right margin from this bit of code in ja-splitmenu.css:

#ja-splitmenu a {
background: url("http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif") top repeat-x;
float: left;
margin: 0 2px; /***** make this margin:0; ******/
padding: 0 0 0 5px;
display: block;
color: #F0F0F0;
text-decoration: none;
font-size: 120%;
line-height: 46px;
}

and let me know how you get on

July 9, 200818 yr

Author

It worked!

There is only one more thing though. How do I Make the bar stretch and line up?

July 9, 200818 yr

Do you mean the background image for the nav?

Try giving the div id="ja-mainnav" the same background image as

#ja-splitmenu li which I think is :

url(http://www.visionartisanfilms.com/site/templates/ja_villadi/images/nav.gif)

July 9, 200818 yr

Author

YES! Thanks so much! That worked! YESSSSSS!! I owe it to you ElanMan!

WOOHOO!

July 9, 200818 yr

Good stuff Meshach!

CSS Problem - Please Help!

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)