2 replies [Last post]
noy2014
noy2014's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT-4
Joined: 2012-03-02
Posts: 2
Points: 6

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?

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 19 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 19 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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.

Check Maximum Webdesign for your online solutions