SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Chiang Mai
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Joomla customization

    Hi,
    'm new here, just joined.
    My question is about what can or cannot be done with Joomla. I wish I could give a site link but I'm doing this offline.

    I have a sidebar div (223px w. x 370px h.) whose background image I want to change as one goes through the different screens of the site. That in itself is easy.

    Within that div are 3 more divs stacked vertically. All 3 divs are transparent. Divs 1 and 3 are not a problem but the middle one is a superfish vertical menu with 5 parents who are transparent for the most part.

    My problem is when I assign different backgrounds (to the big div underneath the 3 smaller ones) based on itemid only parts of those images show up in each parent png all at the same time and the top and bottom divs show whatever is supposed to be on the current page.

    There may be a way to assign a mod like flexheader3 to do this but where would you put it?

    Here is what I tried (and did not work:

    <div id="navbar" >flexheader would go here or
    <div id="navcap"><span>text only</span></div>
    <div id="navigation"><jdoc:include type="modules" name="sf-menu" style="xhtml"/></div>
    <div id="filler">empty for now</div>
    flexheader would go here or</div>
    flexheader would go here
    </div>

    I think Flexheader need to be jammed up all by itself between 2 divs no?

    Thanks for reading this.

    Rawdata

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rawdata, welcome to SitePoint!

    It is hard to understand what the problem is like without all code involved.
    Maybe a screenshot of the error vs the intended look would help showing it more clearly.

    Solving this then, we would certainly need a link to the live code. But if it's not online, can you make a narrowed down demo of the problem and post the code here? Please add all the images' widths and heights too!
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Chiang Mai
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Erik J,

    Thanks for the welcome and response.
    here's a screenshot ( ) and the entire blocks code, explanation follows.

    <div id="block1">

    <div id="header" class="header_head1" class="header_head2" class="header_head3" class="header_head4" class="header_head5" class="header_head6" class="header_head7" class="header_head8" class="header_head9"><jdoc:include type="modules" name="header1" style="html"/></div> <--This is OK

    <div class="navbar" bg starts here>
    <div id="navcap"><span>Navigate our site</span></div>
    <div id="navigation"><jdoc:include type="modules" name="sf-menu" style="xhtml"/></div>
    <div id="filler"></div></div>
    <div style="clear:both">
    </div bg ends here>

    </div end block1>

    total width: 980
    header width:748
    nabar width 223
    header, navbar height: 370 width 223
    navigation height 50 width 223
    menu height 200 width 223
    filler height 120 width 223

    I put a background module for the header which is OK, not a problem. The mod can fit in between <div> </div>start and end tags. The problem is with the middle of the second part (navigation within navbar) that's where the superfish menu is but the background is bigger than that, it goes under 3 divs (which are in between the 2 navbar divs).

    I want that background to change depending on which menu itemid the visitor navigates to. The itemid-bg link causes the 5 parent menu items to each display their own image part. Look at the image being broken up into 7 parts, top div, 5 parents, bottom div each with its own part of its div which could mean parts of as many as 6 backgrounds all at once. Ugly.

    What you see in this pic is the menu broke the template it should be up next to the header (top).The bg images are not showing where they used to be. I tried recreating the situation of earlier. Now I am working on a copy of the menu, the 5 parents will not be article layouts but section layouts. the 5 parents will have no bg pics only color. The subs are jpg opaque and I'll assign bgs to their item ids hoping this will solve the problem. I'll get back to you asap with the results of that tryout.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your explaining but it is not possible to find what is not working yet, because there is much more code involved, both HTML and CSS.

    It is all the code that the browser sees that matters. So if you load your page showing the error in the browser and then use the "view source" option you will have the HTML we need to see here.

    But we also need to see the CSS code that styles the page. You can post the style-sheets here too.

    When you post more code, please use the (#) code button to mark your pasted code.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Chiang Mai
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eric,
    I've tried something else, same result.
    The code below (in order) is:
    1- page source (relevant parts)
    2- navbar CSS (all)
    3- menu CSS (not really needed since this works OK but included nevertheless).

    I think the possible solution to this would be to have the navbar backgrounds handled by the same type of mod that handles the headers (or flexheader3). How would I get that done? Doesn't a mod need to be between start/end div tags with nothing not directly related to it (in this case 3 smaller divs and superfish as well) next to it???


    The menu works well but has doubled-up (see page source). One has images the other has bullets??? All the bottom background images (223w x 370h.) have a pic navbarX.png (assigned to parents) is simply a frame. The 5 parent images are the same (with an eye on the RHS 223w x 40h).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
    <head>
    <jdoc:include type="head"/>
    
    <script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAduTtlch6Q3J3E5bpgcP15RRpwpQz_tbKpBSwJia_BGO4dAyplxTnFqSoBTng6_JyLyYwldNj6aW4mg"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
    <script type="text/javascript" src="/joomla/modules/mod_fontsize/js/md_stylechanger.js"></script>
    <script src = "http://127.0.0.1/joomla/modules/mod_vertical_slideshow/scripts/vertical.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/joomla/templates/familythais/css/templates.css" type="text/css"/>
    <link rel="stylesheet" href="/joomla/templates/familythais/css/modules.css" type="text/css"/>
    <link rel="stylesheet" href="/joomla/templates/familythais/css/contents.css" type="text/css"/>
    <link rel="stylesheet" href="/joomla/templates/system/css/system.css" type="text/css"/>
    <link rel="stylesheet" href="/joomla/templates/system/css/general.css" type="text/css"/>
    
    <script type="text/javascript">
      google.load("search", "1");
      google.load("jquery", "1.4.4");
      google.load("jqueryui", "1.8.7");
    </script>
    <script type="text/javascript">
      google.load("search", "1");
      google.load("mootools", "1.3.0");
      google.load("mootoolsyui", "1.3.0");
    </script>
    </head>
    <body>
    
    <div id="wrap1" class="wrapper">
    <div id="wrap2" class="wrapper">
    <div id="wrap3" class="wrapper">
    
    <div id="block1">
    <div id="header" class="header_head1" class="header_head2" class="header_head3" class="header_head4" class="header_head5" class="header_head6" class="header_head7" class="header_head8" class="header_head9"></div>
    <div class="navbar" class="navbar_item31" class="navbar_item32" class="navbar_item33" class="navbar_item34" class="navbar_item35" class="navbar_item36" class="navbar_item37" class="navbar_item38" class="navbar_item39" class="navbar_item40" class="navbar_item41" class="navbar_item42" class="navbar_item43" class="navbar_item44" class="navbar_item45" class="navbar_item46" class="navbar_item47" class="navbar_item48" class="navbar_item49"  class="navbar_item50" class="navbar_item51" class="navbar_item52" class="navbar_item53" class="navbar_item54" class="navbar_item55" class="navbar_item56" class="navbar_item57" class="navbar_item58" class="navbar_item59" class="navbar_item60" class="navbar_item61" class="navbar_item62" class="navbar_item63" class="navbar_item64" class="navbar_item65">
    <div id="navcap"><span>Navigate our site</span></div>
    <div id="navigation">		<div class="moduletable_ftmm">
    
    					<ul class="menu_main sf-menu_main sf-vertical" id="2"><li id="current" class="parent active item61"><a href="http://127.0.0.1/joomla/"><span>Home</span></a><ul><li class="first-child item31"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=31"><span>Welcome</span></a></li><li class="item36"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=36"><span>Who we are</span></a></li><li class="item37"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=37"><span>How we do what we do</span></a></li><li class="last-child item38"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=38"><span>getting in touch with us</span></a></li></ul></li><li class="parent item62"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=62"><span>Products &amp; services</span></a><ul><li class="first-child item32"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=32"><span>Overview</span></a></li><li class="item41"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=11&amp;Itemid=41"><span>mulberry paper</span></a></li><li class="item42"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=42"><span>shopping bags</span></a></li><li class="item43"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=13&amp;Itemid=43"><span>photo albums</span></a></li><li class="item40"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=10&amp;Itemid=40"><span>teak 'lotus' chairs</span></a></li><li class="item39"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=9&amp;Itemid=39"><span>artwork</span></a></li><li class="item44"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=14&amp;Itemid=44"><span>wood crafts</span></a></li><li class="item45"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=45"><span>custom orders</span></a></li><li class="last-child item46"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=16&amp;Itemid=46"><span>product searches</span></a></li></ul></li><li class="parent item63"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=4&amp;Itemid=63"><span>Terms &amp; policies</span></a><ul><li class="first-child item33"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=33"><span>Our terms, policies, etc.</span></a></li><li class="item55"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=55"><span>our policies</span></a></li><li class="item56"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=56"><span>customer satisfaction</span></a></li><li class="item57"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=28&amp;Itemid=57"><span>privacy and confidentiality</span></a></li><li class="item58"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=58"><span>terms and conditions</span></a></li><li class="last-child item59"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=29&amp;Itemid=59"><span>returns &amp; refunds</span></a></li></ul></li><li class="parent item64"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=8&amp;Itemid=64"><span>Q &amp; A</span></a><ul><li class="first-child item34"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=34"><span>Q &amp; A about:</span></a></li><li class="item47"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=47"><span>our terms and policies</span></a></li><li class="item48"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=48"><span>our products</span></a></li><li class="last-child item49"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=49"><span>our site</span></a></li></ul></li><li class="parent item65"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=6&amp;Itemid=65"><span>A bit more...</span></a><ul><li class="first-child item35"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=35"><span>A bit more info</span></a></li><li class="item51"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=26&amp;Itemid=51"><span>acknowledgements</span></a></li><li class="item50"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=24&amp;Itemid=50"><span>good ideas, great ideals</span></a></li><li class="item52"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=23&amp;Itemid=52"><span>useful bookmarks</span></a></li><li class="last-child item53"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=53"><span>fun bookmarks</span></a></li></ul></li></ul><div class="superfish_clear"></div>
    
    <script language="javascript" type="text/javascript" src="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/js/jquery.event.hover.js"></script>
    <script language="javascript" type="text/javascript" src="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/js/superfish.js"></script>
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/css/superfish.css" />
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/css/superfish-vertical.css" />
    <link rel="stylesheet" type="text/css" href="/joomla/  	http://127.0.0.1/joomla/templates/familythais/css/modules.css" media="all" />
    <script language="javascript" type="text/javascript">
    jQuery.noConflict();
    jQuery(function($){ $("ul.sf-menu_main").superfish({hoverClass:'sfHover', pathClass:'active', pathLevels:0, delay:800, animation:{height:'show'}, speed:'def', autoArrows:0, dropShadows:0}) });
    jQuery.event.special.hover.delay = 100;
    jQuery.event.special.hover.speed = 100;
    
    </script>		</div>
    	</div>
    <div id="filler"></div></div>
    <div id="navcap"><span>Navigate our site</span></div>
    
    <div id="navigation">		<div class="moduletable_ftmm">
    					<ul class="menu_main sf-menu_main sf-vertical" id="2"><li id="current" class="parent active item61"><a href="http://127.0.0.1/joomla/"><span>Home</span></a><ul><li class="first-child item31"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=31"><span>Welcome</span></a></li><li class="item36"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=36"><span>Who we are</span></a></li><li class="item37"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=37"><span>How we do what we do</span></a></li><li class="last-child item38"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=38"><span>getting in touch with us</span></a></li></ul></li><li class="parent item62"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=62"><span>Products &amp; services</span></a><ul><li class="first-child item32"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=32"><span>Overview</span></a></li><li class="item41"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=11&amp;Itemid=41"><span>mulberry paper</span></a></li><li class="item42"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=42"><span>shopping bags</span></a></li><li class="item43"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=13&amp;Itemid=43"><span>photo albums</span></a></li><li class="item40"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=10&amp;Itemid=40"><span>teak 'lotus' chairs</span></a></li><li class="item39"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=9&amp;Itemid=39"><span>artwork</span></a></li><li class="item44"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=14&amp;Itemid=44"><span>wood crafts</span></a></li><li class="item45"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=45"><span>custom orders</span></a></li><li class="last-child item46"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=16&amp;Itemid=46"><span>product searches</span></a></li></ul></li><li class="parent item63"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=4&amp;Itemid=63"><span>Terms &amp; policies</span></a><ul><li class="first-child item33"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=33"><span>Our terms, policies, etc.</span></a></li><li class="item55"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=55"><span>our policies</span></a></li><li class="item56"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=56"><span>customer satisfaction</span></a></li><li class="item57"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=28&amp;Itemid=57"><span>privacy and confidentiality</span></a></li><li class="item58"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=58"><span>terms and conditions</span></a></li><li class="last-child item59"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=29&amp;Itemid=59"><span>returns &amp; refunds</span></a></li></ul></li><li class="parent item64"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=8&amp;Itemid=64"><span>Q &amp; A</span></a><ul><li class="first-child item34"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=34"><span>Q &amp; A about:</span></a></li><li class="item47"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=47"><span>our terms and policies</span></a></li><li class="item48"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=48"><span>our products</span></a></li><li class="last-child item49"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=49"><span>our site</span></a></li></ul></li><li class="parent item65"><a href="/joomla/index.php?option=com_content&amp;view=section&amp;id=6&amp;Itemid=65"><span>A bit more...</span></a><ul><li class="first-child item35"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=35"><span>A bit more info</span></a></li><li class="item51"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=26&amp;Itemid=51"><span>acknowledgements</span></a></li><li class="item50"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=24&amp;Itemid=50"><span>good ideas, great ideals</span></a></li><li class="item52"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=23&amp;Itemid=52"><span>useful bookmarks</span></a></li><li class="last-child item53"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=53"><span>fun bookmarks</span></a></li></ul></li></ul><div class="superfish_clear"></div>
    
    <script language="javascript" type="text/javascript" src="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/js/jquery.event.hover.js"></script>
    <script language="javascript" type="text/javascript" src="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/js/superfish.js"></script>
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/css/superfish.css" />
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/joomla/modules/mod_superfishmenu/tmpl/css/superfish-vertical.css" />
    <link rel="stylesheet" type="text/css" href="/joomla/  	http://127.0.0.1/joomla/templates/familythais/css/modules.css" media="all" />
    <script language="javascript" type="text/javascript">
    jQuery.noConflict();
    jQuery(function($){ $("ul.sf-menu_main").superfish({hoverClass:'sfHover', pathClass:'active', pathLevels:0, delay:800, animation:{height:'show'}, speed:'def', autoArrows:0, dropShadows:0}) });
    jQuery.event.special.hover.delay = 100;
    jQuery.event.special.hover.speed = 100;
    
    </script>		</div>
    	</div>
    <div id="filler"></div></div>
    <div style="clear:both"></div>
    </div>
    
    </body>
    </html>
    [RELEVANT PAGE SOURCE ENDS HERE -- START NAVBAR CSS]

    Code:
    div.navbar
    {	width: 				223px;  
    	height: 			370px;	
    	position: 			relative;
    	display:			block;	
    	float: 				right;
    	margin:				0px 0px 0px 0px;
    	padding:			0px 0px 0px 0px;
    	background-repeat:  no-repeat;
    	background-position: 0 0;}
    div.navbar_item31, .navbar_item36							{background-image: 	url('../../../ftimages/navbarA.jpg');} 
    div.navbar_item33, .navbar_item35, .navbar_item48, .navbar_item58 {background-image: 	url('../../../ftimages/navbarB.jpg');} 
    div.navbar_item37, .navbar_item51 							{background-image: 	url('../../../ftimages/navbarC.jpg');} 
    div.navbar_item56, .navbar_item57  							{background-image: 	url('../../../ftimages/navbarD.png');} 
    div.navbar_item44, .navbar_item50, .navbar_item55				{background-image: 	url('../../../ftimages/navbarE.png');}		
    div.navbar_item45, .navbar_item46, .navbar_item52				{background-image: 	url('../../../ftimages/navbarF.jpg');}	
    div.navbar_item32, .navbar_item53							{background-image: 	url('../../../ftimages/navbarG.jpg');}
    div.navbar_item47											{background-image: 	url('../../../ftimages/navbarH.jpg');}
    div.navbar_item34											{background-image: 	url('../../../ftimages/navbarI.jpg');}
    div.navbar_item38											{background-image: 	url('../../../ftimages/navbarK.jpg');}
    div.navbar_item49											{background-image: 	url('../../../ftimages/navbarL.jpg');} 
    div.navbar_item39											{background-image: 	url('../../../ftimages/navbarM.png');}
    div.navbar_item59											{background-image: 	url('../../../ftimages/navbarQ.jpg');}
    div.navbar_item41 											{background-image: 	url('../../../ftimages/navbarR.jpg');}
    div.navbar_item42											{background-image: 	url('../../../ftimages/navbarS.jpg');}
    div.navbar_item40											{background-image: 	url('../../../ftimages/navbarT.jpg');}
    div.navbar_item61,	.navbar_item62,.navbar_item63,.navbar_item64,.navbar_item65 {background-image: 	url('../../../ftimages/navbarX.png');}
    [ NAVBAR CSS ENDS HERE -- START MENU CSS]

    Here is the menu CSS although this has little to do with the situation. I've just redone it making the parents section layouts instead of article layouts. BTW, if you see no sprites its because I could not get Superfish to work with them. The 5 parents display each their itemid backgrounds which are very different from one other..very ugly. I could post a screenshot but it closes by the time I hit Fireshot.



    Code:
    .moduletable_ftmm {
    	list-style-type:	none;
    	width:				223px;
    	position:			relative;	
    	display:			block;
    	margin:				0px 0px 0px 2px;
    	padding:			0px 0px 0px 0px;
    	z-index:			999;}
    ul.menu_main.sf-menu_main.sf-vertical {list-style-type:		none;
    z-index:			999;}
    .sf-menu, .sf-menu *{	margin:					0;
    					padding:				0;
    					width:				 	223px;}
    .sf-menu ul {	position:						absolute;
    			top:							-999em;
    			width:				 			223px;}
    .sf-menu ul li {	width:							194px;}
    .sf-menu a {	display:						block;
    			position:						relative;}
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {	left:					10px;
    					top:					0px;
    					z-index:				99;}
    .sf-vertical li:hover ul,
    .sf-vertical li.sfHover ul {	left:					10px;  
    					top:					0px;}
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {top:					0px;}
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {left:					0px;
    					top:					0px;}
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {top:					0px;}
    .sf-menu {float:								left;
    		margin-bottom:						-2px;}
    .sf-vertical li > a, 
    .sf-vertical li >  a:visited, 
    .sf-vertical li > a:hover, 
    .sf-vertical li > a:active{width:					223px;
    					height:					40px;
    					display:				block;
    					font-family:			Palatino, Georgia, Times New Roman;
    					position:				relative;
    					text-indent:			20px;
    					color:					#ffffff;
    					font-size:				100%;
    					font-weight:			bold;
    					line-height:			40px;
    					background-repeat:		no-repeat;
    					background-position: 	0 0;}
    .sf-vertical li > a {background-image:			   	url('../../../ftimages/ftmmp1.png');}
    .sf-vertical li > a:visited {background-image:   	url('../../../ftimages/ftmmp2.png');}
    .sf-vertical li > a:hover { background-image:   	url('../../../ftimages/ftmmp3.png');}
    .sf-vertical li > a:active{ background-image:   	url('../../../ftimages/ftmmp4.png');}
    .sf-vertical li li > a,
    .sf-vertical li li > a:visited,
    .sf-vertical li li > a:hover,
    .sf-vertical li li > a:active{line-height:			32px;
    					 font-size:				90%;
    					font-family:			Palatino, Georgia, Times New Roman;	
    					color:					#000;
    					text-indent:			.9em;
    					margin: 				0px 0px -8px -13px;
    					padding: 				2px 0px 0px 0px;
    					background-repeat:		no-repeat;
    					background-position:	 0 0;}
    .sf-vertical li li > a {	background-image:   		url('../../../ftimages/ftmmc1.png');}
    .sf-vertical li li > a:visited {	background-image:  	url('../../../ftimages/ftmmc2.png');}
    .sf-vertical li li > a:hover { background-image:   	url('../../../ftimages/ftmmc3.png');}
    .sf-vertical li li > a:active {background-image:   	url('../../../ftimages/ftmmc4.png');}
    .sf-vertical li li > a  #current { font-style:		italic;
    						color:					#000;}
    .sf-vertical, .sf-vertical li {	width:					194px;}

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    rawdata, can you please always wrap your code in CODE tags, as it's a chore for anyone to go through that code otherwise. I've done that now to make it a least a bit more readable for members to read.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Chiang Mai
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I forgot, will do next time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •