[Solved]Menu with images

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

[Solved]Menu with images

Post 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 ???
Last edited by libralion on Thu May 14, 2009 6:00 pm, edited 1 time in total.
Top
User avatar
Lucaz
Forum Members
Forum Members
Posts: 66
Joined: Fri Dec 01, 2006 9:56 pm

Re: Menu with images

Post by Lucaz »

Instead of posting a long css list, could you send us the URL of the project you are working on?
Top
tyman00
Power Poster
Power Poster
Posts: 906
Joined: Tue Oct 24, 2006 5:59 pm

Re: Menu with images

Post 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.
If all else fails, use a bigger hammer.
M@rtijn wrote: This is a community. This means that we work together and have the same goal (a beautiful CMS), not that we try to put people down and make their (voluntary) job as difficult as can be.
Top
tyman00
Power Poster
Power Poster
Posts: 906
Joined: Tue Oct 24, 2006 5:59 pm

Re: Menu with images

Post 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.
If all else fails, use a bigger hammer.
M@rtijn wrote: This is a community. This means that we work together and have the same goal (a beautiful CMS), not that we try to put people down and make their (voluntary) job as difficult as can be.
Top
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

Re: Menu with images

Post 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
Top
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

Re: Menu with images

Post 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
Top
tyman00
Power Poster
Power Poster
Posts: 906
Joined: Tue Oct 24, 2006 5:59 pm

Re: Menu with images

Post 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.
If all else fails, use a bigger hammer.
M@rtijn wrote: This is a community. This means that we work together and have the same goal (a beautiful CMS), not that we try to put people down and make their (voluntary) job as difficult as can be.
Top
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

Re: Menu with images

Post 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 :)
Top
tyman00
Power Poster
Power Poster
Posts: 906
Joined: Tue Oct 24, 2006 5:59 pm

Re: Menu with images

Post 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}
If all else fails, use a bigger hammer.
M@rtijn wrote: This is a community. This means that we work together and have the same goal (a beautiful CMS), not that we try to put people down and make their (voluntary) job as difficult as can be.
Top
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

Re: Menu with images

Post 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
Top
tyman00
Power Poster
Power Poster
Posts: 906
Joined: Tue Oct 24, 2006 5:59 pm

Re: [Solved]Menu with images

Post by tyman00 »

No problem. You were on the right track and you were trying and doing research so I am glad to help out.
If all else fails, use a bigger hammer.
M@rtijn wrote: This is a community. This means that we work together and have the same goal (a beautiful CMS), not that we try to put people down and make their (voluntary) job as difficult as can be.
Top
Post Reply

Return to “Layout and Design (CSS & HTML)”