Question with different pictures in menu

List overview All Threads
Download

newer

older

isEditable

How to catch the moment of PRCase...

Mariano Martinez Peck

1 Apr 2009 1 Apr '09

4:09 a.m.

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… "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

Attachments:

attachment.htm (text/html — 1.2 KB)

Show replies by date

Lukas Renggli

1 Apr 1 Apr

9:12 a.m.

...

"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

Mariano Martinez Peck

2 Apr 2 Apr

12:28 a.m.

On Wed, Apr 1, 2009 at 4:12 AM, Lukas Renggli <renggli(a)gmail.com> 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

Keith Hodges

1:18 a.m.

...

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

Mariano Martinez Peck

1:27 a.m.

On Wed, Apr 1, 2009 at 8:18 PM, Keith Hodges <keith_hodges(a)yahoo.co.uk>wrote;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

Keith Hodges

1:42 a.m.

...

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

Tudor Girba

1:43 a.m.

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 <keith_hodges(a)yahoo.co.uk> 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."

Mariano Martinez Peck

3 Apr 3 Apr

3:06 a.m.

On Wed, Apr 1, 2009 at 8:43 PM, Tudor Girba <girba(a)iam.unibe.ch> 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 <keith_hodges(a)yahoo.co.uk> 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

-- www.tudorgirba.com "Presenting is storytelling." _______________________________________________ SmallWiki, Magritte, Pier and Related Tools ... https://www.iam.unibe.ch/mailman/listinfo/smallwiki

5496

days inactive

5498

days old

smallwiki@list.inf.unibe.ch

Manage subscription

7 comments

4 participants

tags (0)

participants (4)

Keith Hodges
Lukas Renggli
Mariano Martinez Peck
Tudor Girba