Please help me with this menu

rizmah · December 12, 2014

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

cssfreakie · January 20, 2015

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

jeffreyappel · 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>

Sign In

Please help me with this menu

Recommended Posts

rizmah

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

jeffreyappel

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information