CODEWITHSUNDEEP
jquerycssnavigationhtml-lists
Grant
Grant

Reputation: 196

Navigation won't show in DIV

This is an overused navigation I'm sure. I'm using it to edit what I want out of it to be honest, but I'm missing the main goal; getting it in my page. I've tried everything for hours now, and can't get it to show up correctly in a div I have on my page. Hopefully someone will see what I'm missing.

JSFiddle

Please go to my test page to see what it should be like here: http://imengine.gofreeserve.com/fileshare/fileshare2/test/testlogin.html

And what it is actually doing here (dont know how to put images in jsfiddle): since i can only post 2 links, its the link above except fileshare/fileshare2/index2.php

Upvotes: 1

Views: 162

Answers (3)

Grant
Grant

Reputation: 196

I can't give an exact answer, but something with the navigation menu, its javascript, and the janko menu and it's javascript, at the least (maybe something with css on them too?) was colliding together and breaking it. I redid the navigation menu for the pages, and this works just fine now. I have no idea, but it seemed it may have been the javascript.

Upvotes: 0

Sammaye
Sammaye

Reputation: 43884

I looked this over in Firebug continously to try and see the problem.

Everything was correctly positioning itself except for the most outer div which had CSS of:

#loginbar {
    height: auto;
    left: 400px;
    margin: 0 auto;
    position: absolute;
    top: 150px;
    visibility: visible;
    width: auto;
    z-index: 3;
}

The left and top causes the menu to display in a weird position, i.e. not at the top of the page which is probably what your trying to do here.

Zeroing these values will stop the menu floating in a specific position.

You can also take out the position absolute as well to stop it floating. But since the elements on fileshare/fileshare2/index2.php are floating absolute I recommend you change your CSS dramatically if you wish to do this.

Hope it helps,

Upvotes: 1

Justin McCraw
Justin McCraw

Reputation: 602

Looking at the fileshare2/index2.php page, I can see your problem. The the drop down menu for the Janko at Warp Speed menu bar area isn't sized correctly. This stems from a menu.css min-width property. To correct the drop down menus going outside the indicated boxes, change menu.css's ul attribute:

ul {
cursor: pointer;
list-style-type: none;
margin: 0;
min-width: 200px; /* change this to 150px instead */
padding: 0;
}

The excess padding around the "Login" and "Help" menus can be removed by applying a style of padding: 0; to #menu li. That should make the menu you're using look like you want it to, not including the unstyled "Home," "Projects" and "Admin" menus. Hope it helps and is what you're looking for.

Upvotes: 2

Related Questions