So, I,m new to html and trying to make a plot with html and js. But I can't seem to place the element properly. Here's the piece of code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#figurecontainer {
margin: 0px;
width: 960px;
height: 800px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.scatterlayer .trace:last-child path {
pointer-events: all;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<input style="float:left; width:20%; " type="file" id="input">
<div style="float:left; width:20%;" id="status" ><p>Load Data to plot</p></div>
<input style="display: none ; width: 100px" id="saveMe" type="button" value="SaveData">
<div >
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div>
<select style="width:100px" id="xcolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select style="width:100px" id="ycolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div id="figurecontainer"></div>
<script>
// some js
</script>
</body>
</html>
I want the first three element on 1st row, then "X column" and "Y column" in next and finally the two dropdown box on 3rd row alined with the Column names. How can I do that?
EDIT: The fiure blocks others elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
body {
float: left;
width: 100%;
}
.row {
float: left;
width: 100%;
}
input[type=file] {
display: inline-block;
margin-right: 15px;
}
#status {
display: inline-block;
margin-right: 15px;
}
.saveMe {
display: inline-block;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="row">
<input type="file" id="input">
<div id="status" >Load Data to plot</div>
<input id="saveMe" type="submit" value="SaveData">
</div>
<div class="row">
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div class="row">
<select style="width:100px" id="xcolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select style="width:100px" id="ycolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div id="figurecontainer"></div>
<script>
var layout = {
autosize: true,
showlegend: false,
margin: {
t: 20,
r: 10,
b: 30,
l: 30,
pad: 0
},
xaxis: {
range: [0, 8],
fixedrange: false,
layer: 'below traces'
},
yaxis: {
range: [0, 51],
fixedrange: false,
layer: 'below traces'
},
font: {size: 16}
};
var breakpoints = {
x: [1, 8],
y: [5, 30],
type: 'scatter',
cliponaxis: false,
mode: 'markers',
marker: {
size: 5,
symbol: "circle-open-dot",
color: '#b00',
line: {
width: 2
}
},
hoverinfo: 'x+y'
};
var figurecontainer = document.getElementById("figurecontainer");
Plotly.plot(figurecontainer, [breakpoints], layout);
</script>
Your code has a mixed types of positioning elements that is why your web-page was not structured correctly, but for beginners it is ok. I changed your code a little bit and here is the final html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
body {
float: left;
width: 100%;
}
.row {
float: left;
width: 100%;
}
input[type=file] {
display: inline-block;
margin-right: 15px;
}
#status {
display: inline-block;
margin-right: 15px;
}
.saveMe {
display: inline-block;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="row">
<input type="file" id="input">
<div id="status" >Load Data to plot</div>
<input id="saveMe" type="submit" value="SaveData">
</div>
<div class="row">
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div class="row">
<select style="width:100px" id="xcolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select style="width:100px" id="ycolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div id="figurecontainer"></div>
<script>
// some js
</script>
</body>
</html>
Related
Using Bootstrap 4 nav, all looks good and links work, until screen size is reduced. For reasons I haven't been able to grok, the icon in right corner appears, but is not functional.
Site passes w3 validator for both html and css. I've looked at examples and tried different code for the button all to no avail.
html body {
background-color: #494848;
color: #ffffff;
}
header {
margin: 10px 0 30 0;
}
nav {
margin-bottom: 40px;
}
h1 {
font-family: sans-serif;
color: #FFFF00;
}
h3 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
table {
margin: 0 auto 10px;
auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 80%;
}
th,
td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
color: #6D2E0D;
}
ul {
list-style: none;
}
.fsc {
color: #FFFF00;
font-family: cursive;
}
.header_p {
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
color: #FFFF00;
}
.drop {
text-align: center;
margin-top: 1%;
}
.name {
font-family: cursive;
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
#div_table {
margin-top: 20px;
;
}
#a_examples {
color: #FFFFFF;
text-align: center;
}
#p_examples {
text-align: center;
color: #FFFF00;
}
#div_music {
color: #ffffff;
margin: 0 8% 10px 8%;
}
#Joe {
/* image of joe */
width: auto;
height: auto;
padding: 0px;
margin-right: 2%;
margin-top: 2px;
margin-bottom: 0;
float: none;
border: 2px solid #ffffff;
}
#twitter {
float: left;
clear: left;
}
#connect_ul {
margin-top: 30px;
}
#footer_p {
color: #FFFF00;
padding-top: 2px;
padding-left: 4px;
padding-right: 2px;
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
margin: 0 auto;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
margin-top: 10%;
}
/* built into bootstrap:
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
Small (sm) devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
Medium (md) devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
Large (lg) devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
Extra (xl) large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index1.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="why.html">Why</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples.html">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="connect.html">Connect</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<div class="container">
<h2 class="drop">Drop That Guitar Pick!</h2>
<p class="header_p">It's <span><i>gonna</i></span> happen anyway...😎</p>
</div>
</header>
<section>
<!-- put content here -->
<div class="container">
<div class="row col-lg-12 col-sm-6">
<h2 class="display-4">Join The Club:</h2>
<div class="container col-lg-12 col-sm-6">
</div>
<p class="lead">Membership will give me an idea of just who is interested in Finger-Style Guitar playing...</p>
<p class="lead">where you come from, playing style, etc., so I can tailor the music presented to your interests.</p>
</div>
</div>
</section>
<div class="container">
<div class="form">
<form>
<!-- form, button -->
<input class="full_name" type="text" placeholder="Full Name" name="name">
<button type="button" class="btn btn-success">Submit</button>
<!-- Bootstrap button -->
</form>
<br>
<form>
<input class="age" type="number" placeholder="Age" name="number">
<button type="button" class="btn btn-success">Submit</button>
<!-- Bootstrap button -->
</form>
</div>
<br>
<div class="form">
<input class="playing_style" name="electric" list="style" placeholder="Playing Style?">
<datalist id="style"> <!-- datalist used -->
<option value="Finger Style">
<option value="Pick">
</datalist>
<br>
<input class="where" name="country" list="countries" placeholder="Where from?">
<datalist id="countries">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Angola">
<option value="Antigua & Deps">
<option value="Argentina">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<option value="Bahamas">
<option value="Bahrain">
<option value="Bangladesh">
<option value="Barbados">
<option value="Belarus">
<option value="Belgium">
<option value="Belize">
<option value="Benin">
<option value="Bhutan">
<option value="Bolivia">
<option value="Bosnia Herzegovina">
<option value="Botswana">
<option value="Brazil">
<option value="Brunei">
<option value="Bulgaria">
<option value="Burkina">
<option value="Burundi">
<option value="Cambodia">
<option value="Cameroon">
<option value="Canada">
<option value="Cape Verde">
<option value="Central African Rep">
<option value="Chad">
<option value="Chile">
<option value="China">
<option value="Colombia">
<option value="Comoros">
<option value="Congo">
<option value="Congo (Democratic Rep)">
<option value="Costa Rica">
<option value="Croatia">
<option value="Cuba">
<option value="Cyprus">
<option value="Czech Republic">
<option value="Denmark">
<option value="Djibouti">
<option value="Dominica">
<option value="Dominican Republic">
<option value="East Timor">
<option value="Ecuador">
<option value="Egypt">
<option value="El Salvador">
<option value="Equatorial Guinea">
<option value="Eritrea">
<option value="Estonia">
<option value="Ethiopia">
<option value="Fiji">
<option value="Finland">
<option value="France">
<option value="Gabon">
<option value="Gambia">
<option value="Georgia">
<option value="Germany">
<option value="Ghana">
<option value="Greece">
<option value="Grenada">
<option value="Guatemala">
<option value="Guinea">
<option value="Guinea-Bissau">
<option value="Guyana">
<option value="Haiti">
<option value="Honduras">
<option value="Hungary">
<option value="Iceland">
<option value="India">
<option value="Indonesia">
<option value="Iran">
<option value="Iraq">
<option value="Ireland (Republic)">
<option value="Israel">
<option value="Italy">
<option value="Ivory Coast">
<option value="Jamaica">
<option value="Japan">
<option value="Jordan">
<option value="Kazakhstan">
<option value="Kenya">
<option value="Kiribati">
<option value="Korea North">
<option value="Korea South">
<option value="Kosovo">
<option value="Kuwait">
<option value="Kyrgyzstan">
<option value="Laos">
<option value="Latvia">
<option value="Lebanon">
<option value="Lesotho">
<option value="Liberia">
<option value="Libya">
<option value="Liechtenstein">
<option value="Lithuania">
<option value="Luxembourg">
<option value="Macedonia">
<option value="Madagascar">
<option value="Malawi">
<option value="Malaysia">
<option value="Maldives">
<option value="Mali">
<option value="Malta">
<option value="Marshall Islands">
<option value="Mauritania">
<option value="Mauritius">
<option value="Mexico">
<option value="Micronesia">
<option value="Moldova">
<option value="Monaco">
<option value="Mongolia">
<option value="Montenegro">
<option value="Morocco">
<option value="Mozambique">
<option value="Myanmar, (Burma)">
<option value="Namibia">
<option value="Nauru">
<option value="Nepal">
<option value="Netherlands">
<option value="New Zealand">
<option value="Nicaragua">
<option value="Niger">
<option value="Nigeria">
<option value="Norway">
<option value="Oman">
<option value="Pakistan">
<option value="Palau">
<option value="Panama">
<option value="Papua New Guinea">
<option value="Paraguay">
<option value="Peru">
<option value="Philippines">
<option value="Poland">
<option value="Portugal">
<option value="Qatar">
<option value="Romania">
<option value="Russian Federation">
<option value="Rwanda">
<option value="St Kitts & Nevis">
<option value="St Lucia">
<option value="Saint Vincent & the Grenadines">
<option value="Samoa">
<option value="San Marino">
<option value="Sao Tome & Principe">
<option value="Saudi Arabia">
<option value="Senegal">
<option value="Serbia">
<option value="Seychelles">
<option value="Sierra Leone">
<option value="Singapore">
<option value="Slovakia">
<option value="Slovenia">
<option value="Solomon Islands">
<option value="Somalia">
<option value="South Africa">
<option value="South Sudan">
<option value="Spain">
<option value="Sri Lanka">
<option value="Sudan">
<option value="Suriname">
<option value="Swaziland">
<option value="Sweden">
<option value="Switzerland">
<option value="Syria">
<option value="Taiwan">
<option value="Tajikistan">
<option value="Tanzania">
<option value="Thailand">
<option value="Togo">
<option value="Tonga">
<option value="Trinidad & Tobago">
<option value="Tunisia">
<option value="Turkey">
<option value="Turkmenistan">
<option value="Tuvalu">
<option value="Uganda">
<option value="Ukraine">
<option value="United Arab Emirates">
<option value="United Kingdom">
<option value="United States">
<option value="Uruguay">
<option value="Uzbekistan">
<option value="Vanuatu">
<option value="Vatican City">
<option value="Venezuela">
<option value="Vietnam">
<option value="Yemen">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>
</div>
</div>
<!-- content ends here -->
<footer id="sticky-footer" class=" footer py-4 bg-dark text-white-50 ">
<div class="container text-center">
<p id="footer_p">Copyright © 2020 <span class="name">Joe Austin Mcintosh</span>. All rights reserved.</p>
<!-- id used -->
</div>
</footer>
The underlying issue causing my code not to work was that i somehow overlooked the required supporting ref docs that bootstrap provides links to. The lesson here seems to be that you must be extremely careful when reading instructions for the use of a block of code you never saw, let alone used before. Read and reread everything...every time.
I'd like to make something of this kind where you can select the fore and background and make it display together. : https://www.control4.com/solutions/products/switches
I do understand some things could be missing and I have tried to look around. I'd appreciate any help. Many thanks.
<div class="foreground">
<h4>Button Colour</h4>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
<option value="switch/button/white.png" selected>White</option>
<option value="switch/button/snowwhite.png">Snow White</option>
<option value="switch/button/biscuit.png">Biscuit</option>
<option value="switch/button/lightalmond.png">Light Almond</option>
<option value="switch/button/brown.png">Brown</option>
<option value="switch/button/black.png">Black</option>
<option value="switch/button/midnightblack.png">Midnight Black</option>
<option value="switch/button/aluminum.png">Aluminum</option>
</select>
</div>
<br>
<div class="background">
<h4>Faceplate Colour</h4>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
<option value="switch/faceplate/white.png" selected>White</option>
<option value="switch/faceplate/snowwhite.png">Snow White</option>
<option value="switch/faceplate/biscuit.png">Biscuit</option>
<option value="switch/faceplate/lightalmond.png">Light Almond</option>
<option value="switch/faceplate/brown.png">Brown</option>
<option value="switch/faceplate/black.png">Black</option>
<option value="switch/faceplate/midnightblack.png">Midnight Black</option>
<option value="switch/faceplate/aluminum.png">Aluminum</option>
<option value="switch/faceplate/satinnickle.png">Satin Nickel</option>
<option value="switch/faceplate/bronze.png">Venetian Bronze</option>
<option value="switch/faceplate/stainlesssteel.png">Stainless Steel</option>
</select>
</div>
<!-- style -->
<style type="text/css">
.background {
position:absolute;
z-index:1;
left:125px;
top:125px;
float: right;
}
.foreground {
position:absolute;
z-index:auto;
float: left;
}
#switch{
position: relative;
}
</style>
If you notice, those images are png and of same dimensions with perfectly positioned switch and background. so displaying one div inside another will overlap it perfectly as the snippet below
Something with jQuery, should get you going....
$(document).ready(function() {
$('#switchSel').change(function() {
var switchPic = $('.switch');
switchPic.removeClass();
switchPic.addClass('switch ' + $(this).val());
})
})
.back {
background: url(https://www.control4.com/files/large/805347005e9b7ee87d4da29d56c9fa44.png);
height: 575px;
width: 361px;
display: inline-block;
}
.brown {
background: url(https://www.control4.com/files/large/61ba4092e170c22c3806a930ca7924f5.png);
height: 575px;
width: 361px;
}
.black {
background: url(https://www.control4.com/files/large/251e9a5ac63b46f4acf8b09dbc5e17b7.png);
height: 575px;
width: 361px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="switchSel">
<option value="black">black</option>
<option value="brown">brown</option>
</select>
</div>
<div class="switch black">
<div class="back">
</div>
</div>
I want the select options to show up when you press a button but not have the bar showing the selected option to appear inside the button.
This is what i have so far:
<!DOCTYPE html>
<html>
<body>
<button>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
This is what I want it to look like, then I will place an image inside the button
<!DOCTYPE html>
<html>
<body>
<button>
<select style="display: none;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
$("#btn, .close").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper {
display: none;
position: fixed;
width: 100vw;
height: 100vw;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.select-wrapper select {
font-size: 24px;
position: absolute;
left: 50vw;
transform: translateX(-50%);
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" src="http://lorempixel.com/120/60/" id="btn">
<div class="select-wrapper">
<input type="button" value="close" class="close">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
I encountered similar problem that the dev refused to just use list due to some backend issue.
found a simple cheat to make the select tag show all the options, that look like a dropdown, and then I just toggle the whole select tag. Not exactly what you asking for, but looks like it.
$("#btn, .selector").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper{
display: none;
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
add variable:
<br>
<input type="button" value="add" id="btn">
<div class="select-wrapper">
<select size="4" class="selector">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</div>
</body>
I removed the spacing between multiple input fields and the submit button using float:left.
But I dont know how to keep this hole block centered on the page.
Here is a Fiddle:https://jsfiddle.net/bb61c412/43/
And the code:
.form-control {
float: left;
border-radius: 0px;
}
.btn {
float: left;
border-radius: 0px;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Remove the floats and use flexbox instead.
JSfiddle Demo
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Otherwise you will have to review How to remove the space between inline-block elements?
Please try this:
Change:
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
to
<div style="margin: 0px auto; padding-top: 30px; width: 427px;">
It is best practice to have all your .js files or CDN(s) at the bottom of your HTML before the closing body tag.
You want to render your .js scripts last to help with your asset pipeline.
I have a menubar that looks like this:
What I want is that the dropdownbox aligns right of the label. The first one (#Writers) is correct, altough it should be aligned a little bit higher because now it isn't vertically centered but that's not the issue.
The HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div class="horizontalNavigation">
<ul>
<li><span>Issue</span></li>
<li><span>Series</span></li>
<li><span>Writer</span></li>
<li><span>Editor</span></li>
<li><span>Letterer</span></li>
<li><span>Colourist</span></li>
<li><span>Cover Artist</span></li>
<li><span>Inker</span></li>
<li><span>Penciler</span></li>
<li><span>Trade Paper Back</span></li>
<li><span>Publisher</span></li>
</ul>
</div>
<div class="creditsbar">
<div class="creditsbarfields">
<form action="getInfo.php" method="get">
<label class="creditsbardropdown" for="writerName">
<span>#Writers:</span>
<form action="">
<select name="writer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="editorName">
<span>#Editors:</span>
<form action="">
<select name="editor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="lettererName">
<span>#Letterer:</span>
<form action="">
<select name="letterer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="colouristName">
<span>#Colourist:</span>
<form action="">
<select name="colourist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="coverArtistName">
<span>#Cover Artist:</span>
<form action="">
<select name="coverArtist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="inkerName">
<span>#Inker:</span>
<form action="">
<select name="inker">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="pencilerName">
<span>#Penciler:</span>
<form action="">
<select name="penciler">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<form>
<input type="submit" value="Next">
</form>
</form>
</div>
</div>
<div class="issueInformationLayout">
</div>
</body>
</html>
The CSS:
.creditsbar {
border: 5px solid;
border-radius: 25px;
width: 60%;
height: 5%;
margin: 1% 0% 0% 20%;
background-color: feedb4;
}
.creditsbarfields {
margin: 0% 0% 0% 2%;
width: 300%;
}
.creditsbardropdown {
float: left;
margin-right: 2%;
}
.horizontalNavigation {
background: url(../images/navigation.png) top left repeat-x;
border-radius: 75px;
height: 6%;
}
.horizontalNavigation * {
float: left;
}
.horizontalNavigation ul a {
margin: 5px 40px 0px 23px;
color: #578ba0;
font-size: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
.issueInformationLayout {
border: 5px solid;
border-radius: 25px;
border-color: #573700;
width: 50%;
height: 66%;
margin: 1% 0% 0% 25%;
background-color: feedb4;
overflow: hidden;
}
You have to set display:inline; for the dropdown lists:
HTML:
<div class="creditsbar">
<div class="creditsbarfields">
<form action="getInfo.php" method="get">
<label class="creditsbardropdown" for="writerName"> <span>#Writers:</span>
<form class="dropdownform" action="">
<select name="writer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="editorName"> <span>#Editors:</span>
<form class="dropdownform" action="">
<select name="editor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="lettererName"> <span>#Letterer:</span>
<form class="dropdownform" action="">
<select name="letterer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="colouristName"> <span>#Colourist:</span>
<form class="dropdownform" action="">
<select name="colourist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="coverArtistName"> <span>#Cover Artist:</span>
<form class="dropdownform" action="">
<select name="coverArtist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="inkerName"> <span>#Inker:</span>
<form class="dropdownform" action="">
<select name="inker">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="pencilerName"> <span>#Penciler:</span>
<form class="dropdownform" action="">
<select name="penciler">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<form>
<input type="submit" value="Next" />
</form>
</form>
</div>
</div>
CSS:
.creditsbar {
border: 5px solid;
border-radius: 25px;
height: 5%;
}
.creditsbarfields {
margin: 0 0 0 2%;
width: 100%;
}
.creditsbardropdown {
float: left;
margin-right: 2%;
}
.dropdownform {
display:inline;
}
Take a look at the output of the code above Here
And here is a FIDDLE
You could give each span that contains a title a class and then do something like this: Code Pen
.title, select {float: left;}
Note: I didn't use your css because it looked like you are missing some stuff that breaks it.