Top Menu Icon Alignment

[grayarti]

Hello to everyone,
I would like to use images larger than icons in the top menu, (say 100px x 60px), and have the menu item name under each image, but in the Top Menu Module I see that the Menu Icon Alignments are either left or right.  Is there any way of overriding this setting in the template .css to have the item name beneath each image?
I'm hoping some clever person has already solved this problem?
Thanks, Gray

[ks-net]

I'm hoping some clever person has already solved this problem?

this is not a problem... it is a matter of design! you know you do!

yes it can be done.. trhough css ...

There are unlimited options to use, depending on your tpl ! and not elxis!

in general i can say:

use css properties  like , margin, display,float,img,a...  and if necessary override any inline styles with !important property.


let me see your tpl... if not match to do(my time is extremely limited) perhaps i can suggest more detailed tips.   
otherwise maybe you have to post an add to job-offering-adds

[grayarti]

Hi Kostas, no, I wasn't saying that Elxis has a problem... I can understand the point of small menu icons, and the reason for the left/right positioning of them.  This idea of using large images in the menu, and not small icons, is just a design idea that I have, and would like to do, and so far I'm just showing the images, including the text title in the image itself, which is fine, BUT, because I have several languages, it means making many versions of each image, whereas if it were possible to have the item text underneath it would be great. 
I just thought that someone may have already done this, and already has the solution on what needs to be modified to override the left/right setting. So, no complaint or criticism, just a request for help on an idea.
I'm using the Okto template, and have tried to figure out how to do this in the custom.css, but I'm not good enough with css yet! 

[ks-net]

ok ... but still i have to notice that is more  depending to  tpl rather than elxis...

a quick approach to what you are asking for...
www[.]ks-net[.]gr/elxisdemo/

/* top menu - Flat */
.navigation ul {
   overflow: hidden;
   margin: 0px;
   padding: 0px;
}
.navigation li {
   border-right: 1px solid #133F56;
   float:left;
   margin: 0px;
   padding: 0px;

}
.navigation li a, .navigation li a:visited {
   background: #3C6F89 /*url(../images/topmenu.png) top left repeat-x*/;
   color: #ffffff;
   display: block;
   font: bold 1.1em sans-serif;
   line-height: 30px;
   padding: 0 20px;
   text-decoration: none;
        text-align:center;   
}
.navigation li a:hover {
   background: #fff /*url(../images/topmenu_over.png) top left repeat-x*/;
   color: #333;
}
.navigation li #active_menu-nav {
   background: /*#3C6F89 url(../images/topmenu_over.png) top left repeat-x*/;
}




.mainlevel-nav img {display:block;margin-right:auto;margin-left:auto;}

red or bold text is  what needed for okto tpl to display img above text and text align at center

the most important for you is the last line

Ps.. elxis has no limit

[grayarti]

Bravo Kostas! ... That is exactly what I was trying to do, it's always SO easy when you know how, huh?  Thank you very much for your help, Elxis is a great CMS!!