Button menu

Guido

2011-07-12 09:36

Hi everyone,

I would like to change the lay-out of #menu2 and put buttons there (.png or .gif).

I think I have to edit templates/default? What do I have to delete/edit?

Guido

» Quick.Cms v3.x

Makaron

2011-07-12 15:50

The simpliest way is to edit templates/default.css file. All elements of menu have their own classes fe:
.l1
.l2
.l3
.
.
.
.lL

so You can set different background image for every specific element.

I helped? Like it: www.facebook.com/makwebpl

Guido

2011-07-13 19:11

Thanks Makaron! I now have a button menu, but I still have one thing I cannot fix.

How do I center the buttons above the menu items?
Link: http://www.guidovanderleest.nl/buttons.jpg

Here's my code:

/* MENU TOP 2 */
#menu2{float:left;height:100px;margin-top: 20px;list-style:none}
#menu2 li{float:left;padding:10px 10px 0}

#menu2 .l1{background:url('img/home.png') no-repeat}
#menu2 .l2{background:url('img/navi.png') no-repeat}
#menu2 .l3{background:url('img/navi.png') no-repeat}
#menu2 .lL{background:url('img/navi.png') no-repeat}

#menu2 li a{float:left;padding:105px 40px 0;color:#fff;font:bold 1.333em 'Verdana';text-decoration:none;text-transform:uppercase}

boboo

2011-07-13 19:16

Guido,
example:
#menu2 .l1{background:url('img/home.png') no-repeat 4px 10px;}
the first value (4px) moves the image on the X-axis (left-right) - you can use negative values.
the second value is the Y-axis (up-down).

Guido

2011-07-13 20:31

boboo, THANKS!

Guido