Hi:
I´m trying to get the TLK all-CSS horizontal menu to work and I´m having
trouble with using images in place of text for the <li> elts. Here´s a code
snippet:
--></td><td tal:attributes="width python:here.sizeCalc(752)" align="left"
valign="top"><!--
--><ul id="TJK_dropDownMenu"><!--
--><li id="AB"><a tal:attributes="href
python:here.s.writeURLlang('lafontainerealestate.com','en-us',test,'index.pt')"><p
tal:replace="structure
python:here.templateImage2lang(here.size(),'en-us','2home_off',55,34,'jpg','')"
/></a></li><!--
--><li id="AB"><a tal:attributes="href
python:here.s.writeURLlang('lafontainerealestate.com','en-us',test,'Properties.pt')"><p
tal:replace="structure
python:here.templateImage2lang(here.size(),'en-us','2properties_off',119,34,'jpg','')"
/></a><!--
--><ul><!--
--><li><a
href="http://203.223.152.46:8080/lafontainerealestate.com/s/c/en-us/Properties/EMarket/Main_frame.pt?category=terrenos";>Land</a>     </li><!--
--><li><a
href="http://203.223.152.46:8080/lafontainerealestate.com/s/c/en-us/Properties/EMarket/Main_frame.pt?category=fincas";>Estates</a>     </li><!--
--><li><a
href="http://203.223.152.46:8080/lafontainerealestate.com/s/c/en-us/Properties/EMarket/Main_frame.pt?category=solares";>Plots</a>     </li><!--
--><li><a
href="http://203.223.152.46:8080/lafontainerealestate.com/s/c/en-us/Properties/EMarket/Main_frame.pt?category=casas";>Houses</a>     </li><!--
--><li><a
href="http://203.223.152.46:8080/lafontainerealestate.com/s/c/en-us/Properties/EMarket/Main_frame.pt?category=villas";>Villas</a>     </li><!--
--></ul><!--
--></li><!--
--><li id="AB"><a tal:attributes="href
python:here.s.writeURLlang('lafontainerealestate.com','en-us',test,'Rentals.pt')"><p
tal:replace="structure
python:here.templateImage2lang(here.size(),'en-us','2rentals_off',90,34,'jpg','')"
/></a><!--
--><ul><!--
--><li><a
href="http://203.223.152.46:8080/lafontainerealestate.com/s/c/en-us/Properties/EMarket/Main_frame.pt?category=apartementos";>Apartments</a>     </li><!--
--><li><a
href="http://203.223.152.46:8080/lafontainerealestate.com/s/c/en-us/Properties/EMarket/Main_frame.pt?category=casas-rentales";>Houses</a>     </li><!--
--></ul><!--
--></li><!--
--><li id="AB"><a tal:attributes="href
python:here.s.writeURLlang('lafontainerealestate.com','en-us',test,'Barahona.pt')"><p
tal:replace="structure
python:here.templateImage2lang(here.size(),'en-us','2barahona_off',111,34,'jpg','')"
/></a></li><!--
--><li id="AB"><a tal:attributes="href
python:here.s.writeURLlang('lafontainerealestate.com','en-us',test,'About_Us.pt')"><p
tal:replace="structure
python:here.templateImage2lang(here.size(),'en-us','2about_off',105,34,'jpg','')"
/></a></li><!--
--><li id="AB"><a tal:attributes="href
python:here.s.writeURLlang('lafontainerealestate.com','es-do',test,'index.pt')"><p
tal:replace="structure
python:here.templateImage2lang(here.size(),'en-us','2language_off',108,34,'jpg','')"
/></a></li><!--
--></ul><!--
--></td><td><!--
I use all that lovely commenting out to trick the browser into thinking it is
one continuous line, thus it makes no breaks between my images. Ignore it. The
problem is that the images clump together and overlap in the menu. You can see
it here:
http://www.lafontainerealestate.com/lafontainerealestate.com/1024/s/c/x/en-us/test
The critical part of the code appears to be here, in a css script:
/* All LIs */
#TJK_dropDownMenu li {
cursor:pointer;
float:left;
/* THE PROBLEM IS THE NEXT LINE */
/* width:5.23em; */
max-width:16.5%;
text-align:center;
list-style-type:none;
font-weight:bold;
}
Now, if I dink around with that width, I can change the spacing of the images.
But then the spacing is uniform, and the image width is not! If I set width to
auto, that still leaves a similar problem. What to do?
I also have a problem with the vertical menu. You can see the problem here:
http://shadday.com.do/shadday.com.do/es-do/s/c/j/1024/test
For some reason, the code kicks my images to the right a bit, and increases the
height of the <td>. I'm guessing the first behavior is because code on <ul>
elts always indents the <li>'s...is that right? Is there a way around it? Can I
somehow insert a negative value for the left-hand margin of the <ul>? I'm
clueless as to why it's altering the height. Here are some code snippets:
--><td><!--
--><ul id="TJK_dropDownMenu"><!--
--><li id="AB"><a href="es-do/CompuTienda_frame.pt" target="pt_frame"><img
src='1024/images/computienda_off.jpg' width='183' height='18' alt='' border='0'
/></a><!--
--><ul><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=mesas";>Mesas
de computadora</a></li><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=computadoras";>Computadoras</a></li><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=accesorios";>Accesorios
de computadora</a></li><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=repuestos";>Repustos
de computadora</a></li><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=monitores";>Monitores</a></li><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=musica";>Productores
de musica</a></li><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=impresoras";>Impresoras</a></li><!--
--><li><a target="pt_frame"
href="http://203.223.152.46:8080/shadday.com.do/s/c/es-do/Nuestra_Tienda/EMarket/Main_frame.pt?category=laptops";>Laptops</a></li><!--
--></ul><!--
--></li><!--
--></ul><!--
--></td><!--
and from the css:
#TJK_dropDownMenu {position:relative;max-width:100%;float:left;
}
/* sub-menu ULs */
#TJK_dropDownMenu li ul {
width:11em !important;/* leaves room for padding */
cursor:default;
height:auto;
position:absolute;
display:none;
left:190px;
}
/* All LIs */
#TJK_dropDownMenu li {
position:relative;
max-width:16.5%;
cursor:pointer;
float:left;
list-style-type:none;
font-weight:bold;
}
TIA,
Tony
________________________________________________________________________
Email and AIM finally together. You've gotta check out free AOL Mail! -
http://mail.aol.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
