Solved

Adding two "buttons in the right top corner

Posted on 2013-11-06
7
390 Views
Last Modified: 2013-11-06
I use jQuery and have these two buttons.

<a id="backToCaseStudyListButton" data-icon="back"  data-transition="slide" data-direction="reverse" rel="external">Testing</a>

Open in new window


and

						 <label for="options-menu" class="select"></label>
						 	<select name="options-menu" data-native-menu="false" id="options-menu"  data-theme="b" class="ui-btn-right" data-inline="true" data-icon="gear">
								<option value="None" id="options-menu-none">Options</option>
								<option value="reset" id="options-menu-reset">Reset to default</option>
								<option value="hide" id="options-menu-hide">Hide legend</option>					
							</select>

Open in new window


I want to put them after each other up in the right hand corner. How do I do that? When I do it like it is now, they end up on top of each other.

I looked here, but don't get it together:
http://stackoverflow.com/questions/5849173/multiple-buttons-on-right-hand-side-of-header
0
Comment
Question by:mdoland
  • 4
  • 3
7 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39627394
I use <ul> element to accomplish this.
See it in action here: http://jsfiddle.net/hjchZ/
HTML
<ul class="buttons-topright">
    <li><input type="button" value="button 1" /></li>
    <li><select><option>aksjdhajks</option></select></li>
    <li><input type="button" value="button 2" /></li>
</ul>

Open in new window

CSS
ul.buttons-topright{
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}
ul.buttons-topright li {
    float: left;
}

Open in new window

you can have as many <li> as you want, and inside each one you can have whatever you want.
0
 

Author Comment

by:mdoland
ID: 39627430
Could you write that out exactly as it should be with my buttons and with what parameters left? I don't seem to get it to work.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39627459
I didn't write with your code because I couldn't see any buttons there...

Your fist code section, that you say it's 2 buttons, it's actually only a <a> element.
I guess there's something missing there...
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:mdoland
ID: 39627473
Ok, I think you are right. It looks like a button on the screen though. Is it possible to treat it like a button and make it stay up in the right corner with the other button??
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39627494
So the list for your code should be:
<ul class="buttons-topright">
    <li><a id="backToCaseStudyListButton" data-icon="back" data-transition="slide" data-direction="reverse" rel="external">Testing</a>
    </li>
    <li>
        <label for="options-menu" class="select"></label>
        <select name="options-menu" data-native-menu="false" id="options-menu" data-theme="b" class="ui-btn-right" data-inline="true" data-icon="gear">
            <option value="None" id="options-menu-none">Options</option>
            <option value="reset" id="options-menu-reset">Reset to default</option>
            <option value="hide" id="options-menu-hide">Hide legend</option>
        </select>
    </li>
</ul>

Open in new window


Like I told you, you need to add a <li> in the list per item and add the content there.

And don't forget the CSS
0
 

Author Closing Comment

by:mdoland
ID: 39627654
Well, didn't really get it to work in this way, but solved it in another way.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39627663
I don't know how you did it but for these kind of things, using ul / li lists is the best option.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now