Sat, 2014-04-12 15:54
This has been driving me crazy all morning, and throws away everything I thought I know about CSS.
I am using this following page to assist me in designing an accordion-menu;
http://www.menucool.com/vertical/accordion-menu-css?s=1
Problem is, when I save that entire page, along with the associated .css and .js files, the menu displays differently. I uploaded the resulting display here; http://www.soflorealty.com/css/
I have no idea why (1) the arrows are doubled up, and (2) why the Heading are padded withing an already padded box.
What could be causing this even when the page is being saved completely as is, with no changes?
What can I do to correct the display?
Mon, 2014-04-14 16:53
#1
The images are doubled
The images are doubled because you use two times a div every time.
This will result in a doubled image (double button and double red icon)
Look at this (this seems to be one button)
<div class="heading"> <div class="arrowImage"></div> <div class="heading"> <div class="arrowImage"></div> Horizontal Menus </div> </div>
How would this look?
<div class="heading"> <div class"arrowImage"></div> Horizontal Menus </div>
Remember this is just one button, you have to do the rest the same way.
Cheers, Henk
Mon, 2014-04-14 16:58
#2
Update: I created a JSfiddle
Update:
I created a JSfiddle for you where you can see how it would basically look like.
I didn't used the images, so you have to leave them out.
But by using the commands I said above you won't have them double all the time.