Jump to content

Please help me with this menu


rizmah

Recommended Posts

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:
423d0fad1ccc36bf3d61e1adb3498363.png
Clicked:
7f6812030e8c9a06ff4235e1f287b364.png
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 clear.png !
Edited by rizmah
Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

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> 
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.