CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

[Solved]Menu with images

https://forum.cmsmadesimple.org/viewtopic.php?t=33722

Page 1 of 1

[Solved]Menu with images

Posted: Wed May 13, 2009 12:23 pm
by libralion
Hi everybody,
I am struggling with a menu.
I have it running now by following the advice Nullig gave in this thread:
http://forum.cmsmadesimple.org/index.php/topic,31696.0.html
So I have a css file and a menu template.
But the hover only hovers the text and it should also hover the images.

3 questions:
-Where can I get rid of the borderline of the images? I searched in the css, but can't find it. It isn't there in the orioginal css, so it musat be somewhere in the menutemplate?
-How can I get also the hover over the images?
-Why don't I get the green background image?

This is my css file:

Code: Select all

/* CSS Document */
body{padding:0px; margin:0px; color:#7D7D7D; font:14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, form, label, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

a:link { color: #FF9900; text-decoration: none }
a:active { color: #FF9900; text-decoration: none }
a:visited { color: #FF9900; text-decoration: none }
a:hover { color: #64C0B5; text-decoration: none }

#main {
width: 950px;
margin: 0 auto;
text-align: left;
}

/*----TOP PANEL----*/
#topPan{width:950px; height:184px; background:url(uploads/images/floral/header.jpg) 0 0 no-repeat; position:relative;}
#topPan img.logo{width:348px; height:35px; position:absolute; top:139px; right:60px;}

#topPan ul{width:140px; height:29px; background:url(uploads/images/floral/top-nav.gif) 0 0 no-repeat; position:absolute; top:23px; left:155px;}
#topPan ul li{float:left;}

#topPan ul li.home{width:47px; height:29px; float:left;}
#topPan ul li.home a{width:18px; height:16px; display:block; background:url(uploads/images/floral/home-hover.gif) 0 0 no-repeat; margin:3px 0 0 16px;  text-indent:-20000px;}
#topPan ul li.home a:hover{background:url(uploads/images/floral/home-hover.gif) 0 0 no-repeat;}

#topPan ul li.sitemap{width:43px; height:29px; float:left;}
#topPan ul li.sitemap a{width:18px; height:16px; display:block; background:url(uploads/images/floral/sitemap-nor.gif) 0 0 no-repeat; margin:3px 0 0 15px;  text-indent:-20000px;}
#topPan ul li.sitemap a:hover{background:url(uploads/images/floral/sitemap-hover.gif) 0 0 no-repeat;}

#topPan ul li.contact{width:43px; height:29px; float:left;}
#topPan ul li.contact a{width:18px; height:16px; display:block; background:url(uploads/images/floral/contact-nor.gif) 0 0 no-repeat; margin:3px 0 0 15px;  text-indent:-20000px;}
#topPan ul li.contact a:hover{background:url(uploads/images/floral/contact-hover.gif) 0 0 no-repeat;}
/*----/TOP PANEL----*/

/*----BODY TOP PANEL----*/
#bodytopPan{width:950px; position:relative; padding:13px 0 0;}
/*----Body Top Left Panel----*/
#btleftPan{width:590px; float:left; padding:0 36px;}
#btleftPan h2{width:290px; height:53px; background:#fff; color:#FF9209; font:30px/53px Georgia, "Times New Roman", Times, serif;}

#btleftPan p span{font-weight:bold;}

#btleftPan p.more{width:73px; height:25px; margin:0 0 0 417px; font:12px/24px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase;}
#btleftPan p.more a{width:53px; height:25px; display:block; background:url(uploads/images/floral/rollover-nor.gif) 0 0 no-repeat #FAFAFA; color:#fff; padding:0 0 0 20px; text-decoration:none;}
#btleftPan p.more a:hover{background:url(uploads/images/floral/rollover-hover.gif) 0 0 no-repeat #FAFAFA; color:#A67B03; text-decoration:none;}
/*----/Body Top Left Panel----*/

/*----Body Top Right Panel----*/
#btrightPan{width:233px; float:left; font-family:Arial, Helvetica, sans-serif;}

#btrightPan #graph{width:233px; height:58px; display:block; background:url(uploads/images/floral/side-frame.jpg) 0 0 no-repeat; font-size:18px; line-height:18px; position:relative; margin:0 auto;}
#btrightPan #graph h2{width:90px; height:22px; display:block; background:#95E4DE; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #graph p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #graph a{width:202px; height:58px; display:block; background:url(uploads/images/floral/graph-nor.jpg) 13px 0 no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #graph a:hover{background:url(uploads/images/floral/graph-hover.jpg) 13px 0 no-repeat; text-decoration:none;}

#btrightPan #planning{width:233px; height:58px; display:block; background:url(uploads/images/floral/side-frame.jpg) 0 0 no-repeat;  line-height:18px; position:relative; margin:0 auto;}
#btrightPan #planning h2{width:60px; height:22px; display:block; background:#95E4DE; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #planning p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #planning a{width:202px; height:58px; display:block; background:url(uploads/images/floral/planning-nor.jpg) 13px 1px no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #planning a:hover{background:url(uploads/images/floral/planning-hover.jpg) 13px 1px no-repeat; text-decoration:none;}

#btrightPan #services{width:233px; height:58px; display:block; background:url(uploads/images/floral/side-frame.jpg) 0 0 no-repeat;  line-height:18px; position:relative; margin:0 auto;}
#btrightPan #services h2{width:60px; height:22px; display:block; background:#95E4DE; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #services p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #services a{width:202px; height:58px; display:block; background:url(uploads/images/floral/services-nor.jpg) 13px 1px no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #services a:hover{background:url(uploads/images/floral/services-hover.jpg) 13px 1px no-repeat; text-decoration:none;}



#btrightPan #projects{width:233px; height:58px; display:block; background:url(uploads/images/floral/side-frame.jpg) 0 0 no-repeat;  line-height:18px; position:relative; margin:0 auto;}
#btrightPan #projects h2{width:60px; height:22px; display:block; background:#95E4DE; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #projects p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #projects a{width:202px; height:58px; display:block; background:url(uploads/images/floral/projects-nor.jpg) 13px 1px no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #projects a:hover{background:url(uploads/images/floral/projects-hover.jpg) 13px 1px no-repeat; text-decoration:none;}

/*----/Body Top Right Panel----*/


/*----Body Middle Panel----*/
#bodymiddlePan{width:708px; padding:0 34px 0 36px; clear:both;}

#bodymiddlePan h3{width:300px; height:65px; background:#fff; color:#7D7D7D; font:30px/65px Georgia, "Times New Roman", Times, serif;}
#bodymiddlePan ul{width:707px; height:100px; margin:0px;}
#bodymiddlePan ul li{width:707px; height:28px;}
#bodymiddlePan ul li a{width:688px; height:20px; display:block; background:url(uploads/images/floral/bullet.gif) 0 6px no-repeat #fff; color:#7D7D7D; font-size:16px; line-height:20px; text-decoration:none; padding:0 0 0 20px;}
#bodymiddlePan ul li a:hover{background:url(uploads/images/floral/bullet.gif) 0 6px no-repeat #fff; color:#5C5C5C; text-decoration:none;}

#bodymiddlePan h4{width:628px; height:24px; display:block; float:left; background:url(uploads/images/floral/border-line.jpg) 100% 100% no-repeat #fff; color:#CCC502; font-size:30px; line-height:24px; padding:0px; margin:0px;}

#bodymiddlePan p.more{width:73px; height:25px; display:block; float:left; font:12px/24px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; margin:0 0 0 6px;}
#bodymiddlePan p.more a{width:53px; height:25px; display:block; background:url(uploads/images/floral/rollover-nor.gif) 0 0 no-repeat #FAFAFA; color:#fff; padding:0 0 0 20px; text-decoration:none;}
#bodymiddlePan p.more a:hover{background:url(uploads/images/floral/rollover-hover.gif) 0 0 no-repeat #FAFAFA; color:#A67B03; text-decoration:none;}
/*----/Body Middle Panel----*/

/*----Body Bottom Panel----*/
#bodybottomPan{width:706px; padding:0px 36px; clear:both;}
/*----Bottom Left Panel----*/
#bottomleftPan{width:250px; float:left; padding:27px 0 0;}

#bottomleftPan p.online{width:250px; height:107px;}
#bottomleftPan p.online a{width:250px; height:107px; display:block; background:url(uploads/images/floral/online-chat.jpg) 0 0 no-repeat; text-indent:-20000px;}
#bottomleftPan p.online a:hover{background:url(uploads/images/floral/online-chat.jpg) 0 0 no-repeat; text-indent:-20000px;}

#bottomleftPan form{width:250px; height:137px; background:url(uploads/images/floral/form.gif) 0 100% no-repeat; position:relative;}
#bottomleftPan form h2{width:224px; height:38px; display:block; background:url(uploads/images/floral/form-h2-bg.gif) 0 0 no-repeat #fff; color:#716D12; font:20px/40px Georgia, "Times New Roman", Times, serif; padding:7px 0 0 26px;}
#bottomleftPan form label{width:150px; height:18px; display:block; background:#fff; color:#7D7D7D; font:13px/18px Arial, Helvetica, sans-serif; font-weight:bold;}
#bottomleftPan form label.labeltopmarginone{position:absolute; top:49px; left:26px;}
#bottomleftPan form label.labeltopmargintwo{position:absolute; top:92px; left:26px;}

#bottomleftPan form input{width:135px; height:17px; font-size:14px;}
#bottomleftPan form input.inputtopmarginone{position:absolute; top:69px; left:26px;}
#bottomleftPan form input.inputtopmargintwo{position:absolute; top:110px; left:26px;}
#bottomleftPan form input.botton{width:60px; height:23px; display:block; background:#fff; color:#7D7D7D; border:none; position:absolute; top:110px; right:20px; font:16px/23px Georgia, "Times New Roman", Times, serif; font-weight:bold;}

#bottomleftPan h3{width:250px; height:28px; background:#fff; color:#7D7D7D; font:22px/23px Arial, Helvetica, sans-serif; padding:11px 0 0;}

#bottomleftPan p.resistred{width:250px; height:22px; font:18px/22px Arial, Helvetica, sans-serif;}
#bottomleftPan p.resistred a{width:250px; height:22px; display:block; background:url(uploads/images/floral/registernow-bg.gif) 116px 6px no-repeat #fff; color:#FEA905; text-decoration:none; }
#bottomleftPan p.resistred a:hover{background:url(uploads/images/floral/registernow-bg.gif) 116px 6px no-repeat #fff; color:#C98703; text-decoration:none; }

/*----/Bottom Left Panel----*/

/*----Bottom Right Panel----*/
#bottomrightPan{width:407px; float:left; padding:42px 0 0 49px;}
#bottomrightPan h2{width:350px; height:33px; font:30px/33px Georgia, "Times New Roman", Times, serif; background:#fff; color:#FF8500;}
#bottomrightPan h3{width:115px; height:40px; font:18px/40px Georgia, "Times New Roman", Times, serif; background:url(uploads/images/floral/athorname-border.gif) 0 15px no-repeat #fff; color:#FF8500; padding:0 0 0 291px;}

#bottomrightPan p{padding:6px 0;}
#bottomrightPan p span{font-weight:bold;}

#bottomrightPan p.greencaptiontext{background:#fff; height:72px; color:#ABA501; font:18px/24px Georgia, "Times New Roman", Times, serif; font-style:italic; padding:10px 0 0;}
/*----/Bottom Right Panel----*/

/*----FOOTER PANEL----*/
#footermainPan{height:45px; background:url(uploads/images/floral/footerbg.gif) 0 0 repeat-x #F1F1F1; color:#585858; font:13px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; clear:both; padding:10px 0 0;}

#footerPan{width:706px; position:relative; padding:0 0 0 36px;}

#footerPan ul{width:480px; height:20px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#585858; background:#F1F1F1; text-decoration:none; font-size:12px;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:360px; position:relative; margin:0 auto; background:#F1F1F1; color:#585858;  font-size:13px;}

#footerPan ul.templateworld{width:250px; background:#F1F1F1; color:#585858; display:block; position:absolute; top:70px; left:285px; font-size:10px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#F1F1F1; display:block; color:#585858; text-decoration:none; padding:0px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:45px; left:285px;}
#footerPanhtml a{width:66px; height:24px; display:block; background:url(uploads/images/floral/html-nor.gif) 0 0 no-repeat #F1F1F1; color:#fff; font-size:14px; line-height:24px; font-weight:bold; text-decoration:none;text-transform:uppercase; padding:0 0 0 4px;}
#footerPanhtml a:hover{background:url(uploads/images/floral/html-hover.gif) 0 0 no-repeat #3B3B3B; color:#fff;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:45px; left:360px;}
#footerPancss a{width:50px; height:24px; display:block; background:url(uploads/images/floral/css-nor.gif) 0 0 no-repeat #F1F1F1; color:#fff; font-size:14px; line-height:24px; font-weight:bold; text-decoration:none; text-transform:uppercase; padding:0 0 0 8px;}
#footerPancss a:hover{background:url(uploads/images/floral/css-hover.gif) 0 0 no-repeat #3B3B3B; color:#fff; text-decoration:none;}
/*----/FOOTER PANEL----*/
And this is the menutemplate nullig suggested:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> <img src="uploads/images/floral/{$node->image}" />  {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn> <img src="uploads/images/floral/{$node->image}" />  {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn><img src="uploads/images/{$node->image}" />  {$node->menutext}</a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
<div class="clearb"></div>
</div>
{/if}

Furthermore I only have the accessibility stylesheet attached. Nothing more.
Hope somebody can shed some light on this.

Johanna ???

Re: Menu with images

Posted: Wed May 13, 2009 2:45 pm
by Lucaz
Instead of posting a long css list, could you send us the URL of the project you are working on?

Re: Menu with images

Posted: Wed May 13, 2009 2:56 pm
by tyman00
A link would be great. But I actually appreciate the template posts because I am sure it will be asked for in time.

Re: Menu with images

Posted: Wed May 13, 2009 3:53 pm
by tyman00
It looks like you have copied and pasted the CSS from somewhere else.

You need to adjust your template so you include the proper ID names.

IE: #btrightPan #graph  - You have no id="btrightPan" or id="graph" in your template. Add them accordingly and I bet your template will fall into place.

I added style="border: none;" to one of your image tags with Firebug and it removed the border. That leads me to believe you need to work  little more on your template.

Re: Menu with images

Posted: Wed May 13, 2009 4:19 pm
by libralion
tyman00 wrote: It looks like you have copied and pasted the CSS from somewhere else.

You need to adjust your template so you include the proper ID names.

IE: #btrightPan #graph  - You have no id="btrightPan" or id="graph" in your template. Add them accordingly and I bet your template will fall into place.

I added style="border: none;" to one of your image tags with Firebug and it removed the border. That leads me to believe you need to work  little more on your template.
Hi Tyman,
I do have the div id="btrightPan" in my template.
The problem is, that in the original template, after the div id="btrightplan", there are some other divs. I cut them out but I don't know where to put them.
This is the part in the original template:

Code: Select all

<div id="btrightPan">
  	<div id="projects">
			<h2>Werkwijze</h2>
			<p> </p>
	  <p> </p>
			<a href="#">graph</a>
	</div>
		<div id="planning">
			<h2>Contact</h2>
			<p>Loopbaantraject</p>
			<a href="#">graph</a>
		</div>
		<div id="graph">
			<h2>Over Mij</h2>
		    <a href="#">graph</a>		</div>
		<div id="services">
			<h2>Workshops</h2>
			<a href="#">graph</a> </div>
		<div id="projects">
		  <h2>Links</h2>
			<a href="#">graph</a>
	</div>
        
   
  </div>
  
</div>


</div>
So where do I put the div id projects, planning, services, graph?

And with the code from Nullig I have added the images to every page. So where can I add border: none then? That is not possible in the page itself.

Johanna

Re: Menu with images

Posted: Wed May 13, 2009 4:55 pm
by libralion
Ok managed to get rid of the borders.
The menu is looking better now. And if I can't find a way to get the hover on the images, then I can use it like this.

Johanna

Re: Menu with images

Posted: Wed May 13, 2009 4:56 pm
by tyman00
It's difficult because you are trying to combine CSS that was designed for a different layout and menu than what you are using.


Try using this menu template instead of the one nullig showed. That one is a little more complex than what you need.

Code: Select all


{foreach from=$nodelist item=node}
  	<div id="{$page_alias}">
		<h2>{$node->menutext}</h2>
		<p> </p>
	        <p> </p>
		<a href="{$node->url}" {$node->url}>graph</a>
	</div>

{/foreach}
This assumes that your page aliases are a lot like the id's specified in the css. (products, planning, projects, graph, services) if not you will need to modify the id call in your css or specify a different page alias.

Re: Menu with images

Posted: Wed May 13, 2009 5:12 pm
by libralion
tyman00 wrote: It's difficult because you are trying to combine CSS that was designed for a different layout and menu than what you are using.


Try using this menu template instead of the one nullig showed. That one is a little more complex than what you need.
Thanks! It is looking better now. The only thing is that all the images are the same. Only when you click on a link you get a different image.
I will try and make the background image a little bigger or the text a little smaller, so that the text fits the green background image.

Johanna :)

Re: Menu with images

Posted: Wed May 13, 2009 5:18 pm
by tyman00
Oops looks like some of my changes got missed. Try this.

Code: Select all

{foreach from=$nodelist item=node}
  	<div id="{$node->alias}">
		<h2>{$node->menutext}</h2>
		<p> </p>
	        <p> </p>
		<a href="{$node->url}">{$node->alias}</a>
	</div>
{/foreach}

Re: Menu with images

Posted: Wed May 13, 2009 5:23 pm
by libralion
tyman00 wrote: Oops looks like some of my changes got missed. Try this.

Code: Select all

{foreach from=$nodelist item=node}
  	<div id="{$node->alias}">
		<h2>{$node->menutext}</h2>
		<p> </p>
	        <p> </p>
		<a href="{$node->url}">{$node->alias}</a>
	</div>
{/foreach}
Yesssssssss!! Thanks so much! I named the menu: cssmenutyman ;D

Johanna :D

Re: [Solved]Menu with images

Posted: Wed May 13, 2009 5:26 pm
by tyman00
No problem. You were on the right track and you were trying and doing research so I am glad to help out.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited