WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Images as Menulink

(1/3) > >>

Flogag:
Hi there,

any idears? I want to show a very small logo inside the menu (<ul><li><image></li><li>normal text</li></ul>).
The Problem is that i have to integrate the image into the menu list tag.

Thank you for any input. :mrgreen:

albatros:
Hi,

here you can find an example https://forum.WebsiteBaker.org/index.php/topic,13184.0/topicseen.html.

hth

Uwe

djdeeno:
wow, thats nice.

can we download this template or is there a other template where pics has the background from the buttons?

I want to make some new templates for WebsiteBaker so men can download it here.
But want to see examples on a working template so i understand the code right.

I am more a designer than a scripting girl.

thanks

Argos:

--- Quote from: Flogag on April 06, 2009, 10:14:53 PM ---Hi there,

any idears? I want to show a very small logo inside the menu (<ul><li><image></li><li>normal text</li></ul>).
The Problem is that i have to integrate the image into the menu list tag.

Thank you for any input. :mrgreen:

--- End quote ---

Give the menu LI a background image in your CSS file. There are lots of instructions about that on the web.

djdeeno:
Oke, wel i have build my menu with images, looks fine and works but there is 1 thing i don't understand.
Visit the test page www.webcentre.nl/kaagloop
1) buttons are yellow, clik on Parcours, the button wil be blue, after youre click, Parcours button wil be grey, the submenu is open, this is green, when u click on kidsloop parcours (or other button from this submenu) parcours is back in yellow again, but what i want, when i be in the submenu, the button above must grey, so parcour must be grey and not back to yellow, i hope some one het help this blonde.
Thanks

this is the css

/* Main menu BEGIN */

div.mainmenu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
div.mainmenu li {
    list-style: none;
    margin-left: 0px;
    padding-top: 0px;
}

div.mainmenu ul li a.menu_current:link, div.mainmenu ul li a.menu_current:visited {
    background-position: 0px -54px; 
    color: #000000;
    background-color: #eeeeee;

}
div.mainmenu ul li a:link, div.mainmenu ul li a:visited  {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    background: #eeeeee url(./images/geel.jpg);
    background-repeat: no-repeat;
    width: 100%;
    text-indent: 27px;
    text-decoration: none;
    line-height: 25px;
    height: 25px;
    margin-bottom: 2px;
}

div.mainmenu ul li a:hover {
    background-position: 0px -27px;
    color: #333333;
    background: #eeeeee url(./images/blue.jpg);

}
   
div.mainmenu ul ul a:link, div.mainmenu ul ul a:visited {
    font-size: 12px;
    color: #000000;
    font-size: 11px;

    text-indent: 10px;
    background: #eeeeee url(./images/green.jpg);
    width: 147px;
    line-height: 18px;
    height: 18px;
    margin-left: 4px;
    margin-bottom: 0px;
    padding-right: 5px;
}

div.mainmenu ul ul li a.menu_current {
    font-size: 13px;
    text-align: right;
    background: #eeeeee url(./images/rose.jpg);
}
div.mainmenu ul ul li a.menu_default {
    font-size: 12px;
}
div.mainmenu ul ul li a.menu_default:hover {
    font-size: 12px;
    text-decoration: underline;
    background: #eeeeee url(./images/orange.jpg);
}
div.mainmenu ul ul li a.menu_current:hover {
    font-size: 13px;
    text-align: right;
    text-decoration: underline;
}

Navigation

[0] Message Index

[#] Next page