Smalltalk › Frameworks & Tools › Magritte, Pier and Related Tools

Question with different pictures in menu

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

Mariano Martinez Peck

Question with different pictures in menu

Hi folks,
I have a menu with images as background and the first and the last ones are different from the others (the one that are between them).

See for example this: http://www.templatesbox.com/premium-templates/website-templates/template213.htm

"About us" and "Contacts" are different from "adventure guide", "tours review" and "bike news".

How can I specify different classes for them ?

this is my css:

I have something like this in my css:


.menu ul {
    margin: 0;
    margin-top: 0em;
    padding-bottom: 0em;
    list-style-type: none;
}

.menu ul li {
    float: left;
    display: inline;
    margin: 0px;
    margin-right: 0px;
    list-style-type: none;
    background-image: url(menutemplate0.gif);
    border: 0px;
    width: 170px;
    height: 40px;
    text-align: center;
    align: center;
    vertical-align: middle
     line-height: 40px;
}
.menu li a {
    align: center;
    padding-left: 30px;
}

Thanks in advance,

Mariano

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

Lukas Renggli

Re: Question with different pictures in menu

> "About us" and "Contacts" are different from "adventure guide", "tours
> review" and "bike news".
>
> How can I specify different classes for them ?

If you use the menu widget, you could specify the menu as such:

- *about|class=first*
- *adventure*
- *events*
- *contacts|class=last*

However, this adds the class to the link. In general it is not
possible to add additional classes to widgets without creating your
own subclass.

A common and rather simple trick of CSS designers is to define
different background image on '.menu', '.menu ul', '.menu ul li' that
overlap each other to get the desired effect.

Lukas

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

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

Mariano Martinez Peck

Re: Question with different pictures in menu

On Wed, Apr 1, 2009 at 4:12 AM, Lukas Renggli <[hidden email]> wrote:

> "About us" and "Contacts" are different from "adventure guide", "tours
> review" and "bike news".
>
> How can I specify different classes for them ?

If you use the menu widget, you could specify the menu as such:

- *about|class=first*
- *adventure*
- *events*
- *contacts|class=last*

It seems it doesn't work. The CSS class is ignored. I used Firebug and I see just .menu ul li for those divs.

I did this:

- */Rutas|class=zaraza*

However, this adds the class to the link. In general it is not
possible to add additional classes to widgets without creating your
own subclass.

Sorry. I didn't understood that.

A common and rather simple trick of CSS designers is to define
different background image on '.menu', '.menu ul', '.menu ul li' that
overlap each other to get the desired effect.

But this actually didn't solve my problem. Ok, I can define differents background images but where I tell them each menu which background image or css class to use ?

Thanks for the help.

Mariano

Lukas

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

_______________________________________________
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

keith1y

Re: Question with different pictures in menu

>
> But this actually didn't solve my problem. Ok, I can define differents
> background images but where I tell them each menu which background
> image or css class to use ?
>
>
> Thanks for the help.
>
> Mariano
For widgets you can og course simply embed them in a div

<div class="someclass">+widget+<div>

Keith

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

Mariano Martinez Peck

Re: Question with different pictures in menu

On Wed, Apr 1, 2009 at 8:18 PM, Keith Hodges <[hidden email]> wrote:

>
> But this actually didn't solve my problem. Ok, I can define differents
> background images but where I tell them each menu which background
> image or css class to use ?
>
>
> Thanks for the help.
>
> Mariano

For widgets you can og course simply embed them in a div

<div class="someclass">+widget+<div>

I am using PRMenuWidget, with this:

- *Inicio>/*
- *Quienes Somos>/Quienes somos*
- *Contactenos>/Contactenos*
- *Lugares y Destinos>/LugaresDestino*
- *Se parte>/Se Parte*
- */Rutas|class=first*

How can I do that there ?

thanks

mariano

Keith

_______________________________________________
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

keith1y

Re: Question with different pictures in menu

>
> I am using PRMenuWidget, with this:
>
> - *Inicio>/*
> - *Quienes Somos>/Quienes somos*
> - *Contactenos>/Contactenos*
> - *Lugares y Destinos>/LugaresDestino*
> - *Se parte>/Se Parte*
> - */Rutas|class=first*
>
>
> How can I do that there ?
>

- */Info/Where To Buy*
- <div class="hmm">*/Info/FAQ*</div

Keith

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

Tudor Girba-3

Re: Question with different pictures in menu

In reply to this post by Mariano Martinez Peck

Hi,

If the class first specified as -*/Rutas|class=first* does not appear
in html, you probably have an older Pier image. In 1.1.1 the code
should work.

Anyway, if that does not work, you can also write the followings:
- <div class="first">*/Rutas*</div>

This must work.

Cheers,
Doru

On 2 Apr 2009, at 01:27, Mariano Martinez Peck wrote:

>
>
> On Wed, Apr 1, 2009 at 8:18 PM, Keith Hodges
> <[hidden email]> wrote:
>
> >
> > But this actually didn't solve my problem. Ok, I can define
> differents
> > background images but where I tell them each menu which background
> > image or css class to use ?
> >
> >
> > Thanks for the help.
> >
> > Mariano
> For widgets you can og course simply embed them in a div
>
> <div class="someclass">+widget+<div>
>
> I am using PRMenuWidget, with this:
>
> - *Inicio>/*
> - *Quienes Somos>/Quienes somos*
> - *Contactenos>/Contactenos*
> - *Lugares y Destinos>/LugaresDestino*
> - *Se parte>/Se Parte*
> - */Rutas|class=first*
>
>
> How can I do that there ?
>
> thanks
>
> mariano
>
>
>
>
> Keith
>
>
> _______________________________________________
> 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

--
www.tudorgirba.com

"Presenting is storytelling."

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

Mariano Martinez Peck

Re: Question with different pictures in menu

On Wed, Apr 1, 2009 at 8:43 PM, Tudor Girba <[hidden email]> wrote:

Hi,

If the class first specified as -*/Rutas|class=first* does not appear in html, you probably have an older Pier image. In 1.1.1 the code should work.

No. It doesn't appear in html. I am using last 1.1.1 from Universe.

Anyway, if that does not work, you can also write the followings:
- <div class="first">*/Rutas*</div>

This must work.

Yes. This actually works :) Thanks!!!

Mariano

Cheers,
Doru

On 2 Apr 2009, at 01:27, Mariano Martinez Peck wrote:

On Wed, Apr 1, 2009 at 8:18 PM, Keith Hodges <[hidden email]> wrote:

>
> But this actually didn't solve my problem. Ok, I can define differents
> background images but where I tell them each menu which background
> image or css class to use ?
>
>
> Thanks for the help.
>
> Mariano
For widgets you can og course simply embed them in a div

<div class="someclass">+widget+<div>

I am using PRMenuWidget, with this:

- *Inicio>/*
- *Quienes Somos>/Quienes somos*
- *Contactenos>/Contactenos*
- *Lugares y Destinos>/LugaresDestino*
- *Se parte>/Se Parte*
- */Rutas|class=first*

How can I do that there ?

thanks

mariano

Keith

_______________________________________________
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

--
www.tudorgirba.com

"Presenting is storytelling."

_______________________________________________
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