Question with PRMenuWidget

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Question with PRMenuWidget

Mariano Martinez Peck
Hi everybody,

I have a question with PRMenuWidget. I have a menu where I have background images for each menu item and the name of the link is inside the image. For example, I have a home.gif where that picture has the background image with the "HOME" written inside.

If I do this (in settings):

- *Contact us>/Contact us*

PRMenuWidget puts me in menu ul li the name ("contact us) and there is the href. However, what I want is:

- Don't show any text in menu ul li
- The href I want it for the whole menu ul li (the whole div) not only the text. I mean, I want that the user can click all over the menu background image.

Now, the question is, can I do this with PRMenuWidget ? If true, how ? If not, what should I do ? make my own menu seaside component ?

Thanks in advance for the help.

Mariano



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

Re: Question with PRMenuWidget

John McKeon


On Sun, Apr 5, 2009 at 6:33 PM, Mariano Martinez Peck <[hidden email]> wrote:
Hi everybody,

I have a question with PRMenuWidget. I have a menu where I have background images for each menu item and the name of the link is inside the image. For example, I have a home.gif where that picture has the background image with the "HOME" written inside.

If I do this (in settings):

- *Contact us>/Contact us*

PRMenuWidget puts me in menu ul li the name ("contact us) and there is the href. However, what I want is:

- Don't show any text in menu ul li

Use a reference to the image in the link so it would be
- *+homeImage+>/*
- *+contactImage+>/contact* then make the references point to the desired image. You'll probably need to fiddle with the css in this case too.
 

- The href I want it for the whole menu ul li (the whole div) not only the text. I mean, I want that the user can click all over the menu background image.

For this effect I make the menu a table as in:  | *Home>/* | *Contact Us>/contact* | etc ), with the same fancy background image for each cell. Then, in the CSS I use .menu td a { width:100%; padding-left: 3em; padding-right: 3em; } where the amount of padding will vary depending on how may menu items you have. CSS is one of my weak points so I usually have to fiddle with padding and margins to make everything "fit" nicely, and I usually make the left or right border solid 1px to get the visual separation. I have no idea if this is the best way to do it.

Hope this helps
John
 

Now, the question is, can I do this with PRMenuWidget ? If true, how ? If not, what should I do ? make my own menu seaside component ?

Thanks in advance for the help.

Mariano



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

Re: Question with PRMenuWidget

Mariano Martinez Peck


On Sun, Apr 5, 2009 at 8:24 PM, John McKeon <[hidden email]> wrote:


On Sun, Apr 5, 2009 at 6:33 PM, Mariano Martinez Peck <[hidden email]> wrote:
Hi everybody,

I have a question with PRMenuWidget. I have a menu where I have background images for each menu item and the name of the link is inside the image. For example, I have a home.gif where that picture has the background image with the "HOME" written inside.

If I do this (in settings):

- *Contact us>/Contact us*

PRMenuWidget puts me in menu ul li the name ("contact us) and there is the href. However, what I want is:

- Don't show any text in menu ul li

Use a reference to the image in the link so it would be
- *+homeImage+>/*
- *+contactImage+>/contact* then make the references point to the desired image. You'll probably need to fiddle with the css in this case too.
 

John, first of all, thanks for the help :)

Ok, this is a good solution, but I still have some problems:

- I don't want to have my css images in Pier, but in library.
- I have 2 images per menu item: the unslected one and the selected one (hoover). I need to set this trought CSS.
- I think I need to set width for each menu item
 


- The href I want it for the whole menu ul li (the whole div) not only the text. I mean, I want that the user can click all over the menu background image.

For this effect I make the menu a table as in:  | *Home>/* | *Contact Us>/contact* | etc ), with the same fancy background image for each cell. Then, in the CSS I use .menu td a { width:100%; padding-left: 3em; padding-right: 3em; } where the amount of padding will vary depending on how may menu items you have. CSS is one of my weak points so I usually have to fiddle with padding and margins to make everything "fit" nicely, and I usually make the left or right border solid 1px to get the visual separation. I have no idea if this is the best way to do it.

John, I didn't understood. I need to have different background images for each menu item. Does that help me?

Sorry, but I am very nowbie with CSS (and also with pier and seaside haha).

Thanks
 

Hope this helps
John
 

Now, the question is, can I do this with PRMenuWidget ? If true, how ? If not, what should I do ? make my own menu seaside component ?

Thanks in advance for the help.

Mariano



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

problem with imges in latest

keith1y
Not sure if it is just me but I had to add to get images to render at all.

PRViewRenderer - visitFile: aStructure
   
    html image
        altText: aStructure title;
        url: (aStructure file urlFor: html context)


Keith


_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

Re: problem with imges in latest

Lukas Renggli
> Not sure if it is just me but I had to add to get images to render at all.

We fixed that on saturday.

Lukas

On Mon, Apr 6, 2009 at 7:32 AM, Keith Hodges <[hidden email]> wrote:

>
> PRViewRenderer - visitFile: aStructure
>
>    html image
>        altText: aStructure title;
>        url: (aStructure file urlFor: html context)
>
>
> Keith
>
>
> _______________________________________________
> SmallWiki, Magritte, Pier and Related Tools ...
> https://www.iam.unibe.ch/mailman/listinfo/smallwiki
>



--
Lukas Renggli
http://www.lukas-renggli.ch


_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

Re: problem with imges in latest

keith1y
Lukas Renggli wrote:
>> Not sure if it is just me but I had to add to get images to render at all.
>>    
>
> We fixed that on saturday.
>
> Lukas
>
>  
I loaded latest of everything on Monday am

Keith



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

Re: Question with PRMenuWidget

John McKeon
In reply to this post by Mariano Martinez Peck
Mariano,

On Sun, Apr 5, 2009 at 10:14 PM, Mariano Martinez Peck <[hidden email]> wrote:

John, first of all, thanks for the help :)

No problem. Just let me know if I am being a hinderance =)
 


Ok, this is a good solution, but I still have some problems:

- I don't want to have my css images in Pier, but in library.
- I have 2 images per menu item: the unslected one and the selected one (hoover). I need to set this trought CSS.
- I think I need to set width for each menu item

Yes your constraints are numerous lol


- The href I want it for the whole menu ul li (the whole div) not only the text. I mean, I want that the user can click all over the menu background image.

For this effect I make the menu a table as in:  | *Home>/* | *Contact Us>/contact* | etc ), with the same fancy background image for each cell. Then, in the CSS I use .menu td a { width:100%; padding-left: 3em; padding-right: 3em; } where the amount of padding will vary depending on how may menu items you have. CSS is one of my weak points so I usually have to fiddle with padding and margins to make everything "fit" nicely, and I usually make the left or right border solid 1px to get the visual separation. I have no idea if this is the best way to do it.

John, I didn't understood. I need to have different background images for each menu item. Does that help me?

Sorry, but I am very nowbie with CSS (and also with pier and seaside haha).

I have accomplished ALMOST all of this using this css in the file library (I have yet to get the image url syntax working from the pier css file).

.menu td a { background: url(mnuJpg); }
.menu td a:hover { background: url(mnuAJpg); }  notice the colon NOT period
.menu td a.active { background: url(mnuBJpg); }
 
Yours would be a little more complicated because (I believe) you are using a different css class for each menu item(?).
BTW, to get rid of the link text put a space: * >/aPage*

After playing with this last night it I realize that a table is not really necessary, it can be accomplished with a ul as well.

Best of luck
John



Thanks
 

Hope this helps
John
 

Now, the question is, can I do this with PRMenuWidget ? If true, how ? If not, what should I do ? make my own menu seaside component ?

Thanks in advance for the help.

Mariano



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki