rizmah Posted December 12, 2014 Share Posted December 12, 2014 (edited) I am close to pulling my hair out! I cannot seem to fix it. I am trying to make a HTML dropdown menu, this is what it looks like at the minute. Non-clicked: Clicked: The problem I am having at the minute is the title "Question One goes here?", I cannot seem to position it right on the grey bar. I have tried padding but it doesn't work -.- Here is my code: HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title> </title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="collapsible-panels"> <h2><a href="#">Question One goes here?</a></h2> <div>Answer to Question One goes here.</div> </div> <script src="js/lib/jquery-1.9.0.min.js" type="text/javascript"></script> <script src="js/jquery.index.js" type="text/javascript"></script> </body> </html> CSS: body { font: 80% Arial, Helvetica, sans-serif; } #collapsible-panels h2 { width: 1134.614173228px; height: 60.094488189px; margin: 0; padding: 0px 0; background: url(../images/bar1.png) no-repeat left center; border-top: 10px solid #FFFFFF; } #collapsible-panels h2.active { background: url(../images/bar2.png) no-repeat left center; } #collapsible-panels h2 a { padding: 35px; text-decoration:none; color: #1869AE; } #collapsible-panels div { width: 851px; height: 45px; background-image: url("../images/bardrop.png") } You should be able to match which css # matches the HTML code, I can that's why I don't put comments in -.- Please help me ! Edited December 12, 2014 by rizmah Quote Link to comment https://forums.phpfreaks.com/topic/293065-please-help-me-with-this-menu/ Share on other sites More sharing options...
cssfreakie Posted January 20, 2015 Share Posted January 20, 2015 (edited) Have a look at jquery-UI's accordion no need to reinvent this when you are about to pull your hair out. Than you also dont need the images which we dont have so it harder for us to test. Edited January 20, 2015 by cssfreakie Quote Link to comment https://forums.phpfreaks.com/topic/293065-please-help-me-with-this-menu/#findComment-1503480 Share on other sites More sharing options...
jeffreyappel Posted March 4, 2015 Share Posted March 4, 2015 for your convenience i got this: <!doctype html> <html lang="us"> <head> <meta charset="utf-8"> <title>jQuery UI Example Page</title> <link href="jquery-ui.css" rel="stylesheet"> <style> body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px; } .demoHeaders { margin-top: 2em; } #dialog-link { padding: .4em 1em .4em 20px; text-decoration: none; position: relative; } #dialog-link span.ui-icon { margin: 0 5px 0 0; position: absolute; left: .2em; top: 50%; margin-top: -8px; } #icons { margin: 0; padding: 0; } #icons li { margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none; } #icons span.ui-icon { float: left; margin: 0 4px; } .fakewindowcontain .ui-widget-overlay { position: absolute; } select { width: 200px; } </style> </head> <body> <h1>Welcome to jQuery UI!</h1> <div class="ui-widget"> <p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p> </div> <h1>YOUR COMPONENTS:</h1> <!-- Accordion --> <h2 class="demoHeaders">Accordion</h2> <div id="accordion"> <h3>First</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <h3>Second</h3> <div>Phasellus mattis tincidunt nibh.</div> <h3>Third</h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> Quote Link to comment https://forums.phpfreaks.com/topic/293065-please-help-me-with-this-menu/#findComment-1507533 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.