I am using Jquery to create a toolbar across the top of my page.
I currently have it “formatted” correctly. I use formatted loosely as the buttons are laid out correctly and there exists a bar going across the top of my page as well.
However, the buttons are not within the toolbar. The only way I could get the buttons formatted into their locations (one on the left, one on the right) was to float the buttons to the left and right, but that in turn took them out of the toolbar.
Here is the code with the buttons in the right location:
#toolbar
{
display: block;
padding: 2px;
}
.right
{
float: right;
}
.left
{
float: left;
}
</style>
<title>Lobby</title>
</head>
<body>
<span id="toolbar" class="ui-widget-header ui-corner-all">
<input id='button' class='left' type="submit" value="My Decks" onclick="window.location.href='listDecks.php'"/>
<input id='button' class='right' type='submit' name='log-out' value='Logout' onclick="window.location.href='logout.php'" />
</span>
Originally I had which produced the buttons within the toolbar, but on the same side (left):
#toolbar
{
display: block;
padding: 2px;
}
</style>
<title>Lobby</title>
</head>
<body>
<div align="left">
<span id="toolbar" class="ui-widget-header ui-corner-all">
<input id='button' class='left' type="submit" value="My Decks" onclick="window.location.href='listDecks.php'"/>
<input id='button' class='right' type='submit' name='log-out' value='Logout' onclick="window.location.href='logout.php'" />
</div>
</span>
How can I get the buttons on opposite sides of the page as well as in the bar?
You are not ending your span and div properly . in code above .Span is inside div but you are ending div before span . Fix that and see if it helps.
Also I would use hyperlinks than buttons for case like this .