Fixed INNER header and footer - not among the answered Q's

Fixed INNER header and footer - not among the answered Q's - html

As you can see the inner-header and inner-footer div scroll down along the are that contains the select list.
How do I make that area scrolls down and having the inner-header/footer fixed into the content?
I hope my question is clear enough. Thank you
* {outline: 0; margin: 0; padding: 0; }
html, body, form { height: 100% !important; margin: 0; padding: 0;}
body {line-height: 1.6; padding-top: 50px; margin-bottom: 50px;}
footer {background-color: #212934;padding: 10px 0;width: 100%;position: fixed;height: 50px;bottom: 0px !important;}
.the-box {height: 100%; min-height: 600px;padding: 0px;background: #fff; margin: 0px 0 !important; margin-bottom: 50px !important; }
.inner-heder {background: #000;color: #fff;}
.inner-footer {background: #ccc;color: #fff }
<!-- Latest Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Latest compiled and minified jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form id="form1" runat="server">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="inner-heder">
<div class="static-top">
Inner-heder content here
</div>
<div class="scroll-only-me">
<select id="testlist" size="60" style="width: 100%;">
<option value="0">Please select</option>
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
<option value="4">Item #4</option>
<option value="5">Item #5</option>
<option value="6">Item #6</option>
<option value="7">Item #7</option>
<option value="8">Item #8</option>
<option value="9">Item #9</option>
<option value="10">Item #10</option>
<option value="11">Item #11</option>
<option value="12">Item #12</option>
<option value="13">Item #13</option>
<option value="14">Item #14</option>
<option value="15">Item #15</option>
<option value="16">Item #16</option>
<option value="17">Item #17</option>
<option value="18">Item #18</option>
<option value="19">Item #19</option>
<option value="20">Item #20</option>
<option value="21">Item #21</option>
<option value="22">Item #22</option>
<option value="23">Item #23</option>
<option value="24">Item #24</option>
<option value="25">Item #25</option>
<option value="26">Item #26</option>
<option value="27">Item #27</option>
<option value="28">Item #28</option>
<option value="29">Item #29</option>
<option value="30">Item #30</option>
<option value="31">Item #31</option>
<option value="32">Item #32</option>
<option value="33">Item #33</option>
<option value="34">Item #34</option>
<option value="35">Item #35</option>
<option value="36">Item #36</option>
<option value="37">Item #37</option>
<option value="38">Item #38</option>
<option value="39">Item #39</option>
<option value="40">Item #40</option>
<option value="41">Item #41</option>
<option value="42">Item #42</option>
<option value="43">Item #43</option>
<option value="44">Item #44</option>
<option value="45">Item #45</option>
<option value="46">Item #46</option>
<option value="47">Item #47</option>
<option value="48">Item #48</option>
<option value="49">Item #49</option>
<option value="50">Item #50</option>
<option value="51">Item #51</option>
<option value="52">Item #52</option>
<option value="53">Item #53</option>
<option value="54">Item #54</option>
<option value="55">Item #55</option>
<option value="56">Item #56</option>
<option value="57">Item #57</option>
<option value="58">Item #58</option>
<option value="59">Item #59</option>
<option value="60">Item #60</option>
</select>
</div>
<div class="inner-footer">
Inner-footer content here
</div> <!-- /.inner-footer -->
</div> <!-- /.the-box -->
</div> <!-- /.container -->
<footer class="hidden-xs" style="width: 100%;position: fixed;height: 50px;bottom:0px !important;">
<p>Footer text here</p>
</footer>
</form>

* {
outline: 0;
margin: 0;
padding: 0;
}
html,
body,
form {
height: 100% !important;
margin: 0;
padding: 0;
}
body {
line-height: 1.6;
padding-top: 0px;
margin-bottom: 0px;
overflow: hidden;
}
footer {
background-color: #212934;
width: 100%;
flex: 0;
min-height: 30px;
line-height: 30px;
color: #FFF;
text-align: center;
}
.the-box {
height: 100%;
min-height: 600px;
padding: 0px
background: #fff;
margin: 0px 0 !important;
margin-bottom: 50px !important;
}
#form1 {
display: flex;
flex-direction: column;
}
.navbar {
flex: 0;
min-height: 50px;
border-radius: 0 !important;
margin-bottom:0 !important;
}
.inner-heder {
background: #000;
color: #fff;
height: 100%;
display: flex;
flex-direction: column;
}
.inner-container {
flex: 1;
height: 100%;
overflow: hidden;
}
.static-top{
flex: 0;
min-height: 20px;
}
#testlist {
color: #000;
flex: 1;
}
.inner-footer {
background: #ccc;
color: #fff;
flex: 0;
min-height: 24px;
}
<!-- Latest Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Latest compiled and minified jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form id="form1" runat="server">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container inner-container">
<div class="inner-heder">
<div class="static-top">
Inner-heder content here
</div>
<select id="testlist" size="60">
<option value="0">Please select</option>
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
<option value="4">Item #4</option>
<option value="5">Item #5</option>
<option value="6">Item #6</option>
<option value="7">Item #7</option>
<option value="8">Item #8</option>
<option value="9">Item #9</option>
<option value="10">Item #10</option>
<option value="11">Item #11</option>
<option value="12">Item #12</option>
<option value="13">Item #13</option>
<option value="14">Item #14</option>
<option value="15">Item #15</option>
<option value="16">Item #16</option>
<option value="17">Item #17</option>
<option value="18">Item #18</option>
<option value="19">Item #19</option>
<option value="20">Item #20</option>
<option value="21">Item #21</option>
<option value="22">Item #22</option>
<option value="23">Item #23</option>
<option value="24">Item #24</option>
<option value="25">Item #25</option>
<option value="26">Item #26</option>
<option value="27">Item #27</option>
<option value="28">Item #28</option>
<option value="29">Item #29</option>
<option value="30">Item #30</option>
<option value="31">Item #31</option>
<option value="32">Item #32</option>
<option value="33">Item #33</option>
<option value="34">Item #34</option>
<option value="35">Item #35</option>
<option value="36">Item #36</option>
<option value="37">Item #37</option>
<option value="38">Item #38</option>
<option value="39">Item #39</option>
<option value="40">Item #40</option>
<option value="41">Item #41</option>
<option value="42">Item #42</option>
<option value="43">Item #43</option>
<option value="44">Item #44</option>
<option value="45">Item #45</option>
<option value="46">Item #46</option>
<option value="47">Item #47</option>
<option value="48">Item #48</option>
<option value="49">Item #49</option>
<option value="50">Item #50</option>
<option value="51">Item #51</option>
<option value="52">Item #52</option>
<option value="53">Item #53</option>
<option value="54">Item #54</option>
<option value="55">Item #55</option>
<option value="56">Item #56</option>
<option value="57">Item #57</option>
<option value="58">Item #58</option>
<option value="59">Item #59</option>
<option value="60">Item #60</option>
</select>
<div class="inner-footer">
Inner-footer content here
</div>
<!-- /.inner-footer -->
</div>
<!-- /.the-box -->
</div>
<!-- /.container -->
<footer class="hidden-xs">
Footer text here
</footer>
</form>

Are you looking for fixed header and fixed footer with scrollable content like this demo.
I have updated my answer please check it once.
Demo here:
body {
margin: 0;
border: 0;
padding: 0;
font-size: 15px;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.inner_header {
position: absolute;
top: 50px;
left:0;
right:0;
color: #ffffff;
display: block;
font-size: 15px;
text-align: center;
padding: 10px 0;
background-color: #2bde73;
}
.inner_footer {
position: absolute;
bottom: 30px;
left:0;
right:0;
color: #ffffff;
display: block;
text-align: center;
padding: 10px;
margin: 0;
background-color: #2bde73;
}
.content {
position: fixed;
top: 90px;
left: 0;
bottom: 50px;
right: 0;
overflow: auto;
}
.select {
overflow: hidden;
width: 100%;
padding: 5px 0;
}
.footer {
position: absolute;
left:0;
right:0;
bottom: 0;
width: 100%;
background-color: #222;
border-color: #080808;
color: #fff;
height: 30px;
font-size: 12px;
padding: 5px 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About
</a>
</li>
<li>
<a href="#">Services
</a>
</li>
<li>
<a href="#">Contact
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="content">
<select id="testlist" class="select" size="60">
<option value="0">Please select
</option>
<option value="1">Item #1
</option>
<option value="2">Item #2
</option>
<option value="3">Item #3
</option>
<option value="4">Item #4
</option>
<option value="5">Item #5
</option>
<option value="6">Item #6
</option>
<option value="7">Item #7
</option>
<option value="8">Item #8
</option>
<option value="9">Item #9
</option>
<option value="10">Item #10
</option>
<option value="11">Item #11
</option>
<option value="12">Item #12
</option>
<option value="13">Item #13
</option>
<option value="14">Item #14
</option>
<option value="15">Item #15
</option>
<option value="16">Item #16
</option>
<option value="17">Item #17
</option>
<option value="18">Item #18
</option>
<option value="19">Item #19
</option>
<option value="20">Item #20
</option>
<option value="21">Item #21
</option>
<option value="22">Item #22
</option>
<option value="23">Item #23
</option>
<option value="24">Item #24
</option>
<option value="25">Item #25
</option>
<option value="26">Item #26
</option>
<option value="27">Item #27
</option>
<option value="28">Item #28
</option>
<option value="29">Item #29
</option>
<option value="30">Item #30
</option>
<option value="31">Item #31
</option>
<option value="32">Item #32
</option>
<option value="33">Item #33
</option>
<option value="34">Item #34
</option>
<option value="35">Item #35
</option>
<option value="36">Item #36
</option>
<option value="37">Item #37
</option>
<option value="38">Item #38
</option>
<option value="39">Item #39
</option>
<option value="40">Item #40
</option>
<option value="41">Item #41
</option>
<option value="42">Item #42
</option>
<option value="43">Item #43
</option>
<option value="44">Item #44
</option>
<option value="45">Item #45
</option>
<option value="46">Item #46
</option>
<option value="47">Item #47
</option>
<option value="48">Item #48
</option>
<option value="49">Item #49
</option>
<option value="50">Item #50
</option>
<option value="51">Item #51
</option>
<option value="52">Item #52
</option>
<option value="53">Item #53
</option>
<option value="54">Item #54
</option>
<option value="55">Item #55
</option>
<option value="56">Item #56
</option>
<option value="57">Item #57
</option>
<option value="58">Item #58
</option>
</select>
</div>
<div class="inner_header">Inner Header Section</div>
<div class="inner_footer">Inner Footer Section</div>
<div class="footer">Copyright © Test 2016</div>

Related

Why does Bootstrap icon disappear when nav is collapsed?

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.

html can't place elements properly

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>

z-index not working autocompleter under tabs

I have a problem with my autocompleter. If I resize my site then the autocompleter is under the tabs even I have z-index on it.
How can I fix this problem? I tried many things for example change the class autocompleter to absolute then it is over the tabs but the position changes. If I resize again to desktop size then it is not working.
Here is my css for the autocompleter:
.search_box{ float: left;position: relative;width:100%;}
.search-input-fields{float: left;width:100%; position: relative; }
.search-btn-wrap{float: left;width:100%;}
.search_box .search-input-fields input{float:left; height: auto; padding:12px 20px 12px; border-radius:0; border: 1px solid #eeeeee; background-color:#ffffff; box-shadow: none; font-weight: 600; color:#000000; }
.search_box .search-input-fields select{float:left; padding:12px 20px; border-radius:0; border: 1px solid #eeeeee; border-right:none; background-color:#ffffff; box-shadow: none; font-weight: 600; }
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Chrome- and Safari-specific CSS here*/
.search_box .search-input-fields select{float:left; -webkit-appearance: none;
background: url("/assets/fonts/selectdown.png") 96% / 15% no-repeat #eee; background-size:15px; border-radius:0; border: 1px solid #eeeeee; background-color:#ffffff; box-shadow: none; font-weight: 600; }
}
.search_box .search-btn-wrap input[type="submit"]{
width: 100%;border-radius:0;line-height: normal;padding-bottom: 10px;padding:14px;background-color: #ff5a5f;
border:none;color: #ffffff;margin-bottom: 20px;
}
.search_box .location{ width:100%; float:left;position: relative;}
.search_box .guest{ width:100%; color:#909090}
.search_box select:disabled {
background: #f5f5f5!important;
}
div.autocomplete {
background-color: #f5f5f5;
box-shadow: 0 1px 5px rgba(50, 50, 50, 0.2);
left: 15px;
margin-top: 0;
position: absolute;
right: 15px;
top: 100%;
width: auto;
z-index: 999999999!important;
}
.search_box .location div.autocomplete{
left:0;
right: 0;
}
.search_box .location ul.autocomplete li .glyphicon{
display: block;
left: 10px;
position: absolute;
top: 13px;
}
.search_box .location ul.autocomplete li{
padding-left: 40px;
position: relative;
line-height: 1.7;
}
.search_box .location span.search-close-icon{
top:14px;
}
ul.autocomplete{
padding: 0;
list-style: none;
/*border:1px solid #c4c4c4;*/
margin:0;
}
ul.autocomplete li{border-top:1px solid #e6e6e6; padding:10px; line-height: 1; color: #999999;cursor: pointer }
ul.autocomplete li .bold{color:#333333; font-weight: 600;display:inline-block; vertical-align: top; line-height: 1.7; }
ul.autocomplete li a{ text-decoration: none;color:inherit; }
ul.autocomplete li .glyphicon { font-size: 20px; line-height: 1; margin-right: 10px; color:#999999; }
ul.autocomplete li:hover{background-color:#00bce4;color:#ffffff; }
ul.autocomplete li:hover a{ text-decoration: none }
ul.autocomplete li:hover .bold{ color: #ffffff; }
ul.autocomplete li:hover .glyphicon {color:#ffffff; }
.search-input-fields .col-sm-6,.search-input-fields .col-sm-3,.search-input-fields .col-sm-2, .search-input-fields .col-sm-4{
position: initial; padding: 0; margin-bottom: 20px;border-right:1px;
}
.location-inner-wrap { float: left; position: relative; width: 100%; }
span.search-close-icon {
color: #00bce4;
cursor: pointer;
display: none;
height: 30px;
position: absolute;
right: 10px;
top: 10px;
width: auto;
z-index: 999999;
}
/*.col-sm-4{padding-right:0!important;}*/
#media (max-width: 767px){
.search-input-fields .col-sm-6,.search-input-fields .col-sm-3,.search-input-fields .col-sm-2, .search-input-fields .col-sm-4{float: left;width: 100%;position: relative; padding-right:15px; padding-left:15px; border-right:1px;}
div.autocomplete {margin-top: 0; width:100%}
}
Here is my css for tabs:
.tabs-left>li:hover{
border-bottom-color:transparent!important;
}
li.active span.round-tabs.one {
background: #fff !important;
border: 2px solid #8EC73F;
color: #8EC73F;
z-index:0;
}
li.active span.round-tabs.two {
background: #fff !important;
border: 2px solid #00bce4;
color: #00bce4;
}
li.active span.round-tabs.three {
background: #fff !important;
border: 2px solid purple;
color: purple;
}
.glyphicon-th:hover{
color:#8EC73F;
}
.glyphicon-bullhorn:hover{
color:#00bce4;
}
.login{
margin-top:auto;
}
span.round-tabs {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: relative;
left: 0;
text-align: center;
font-size: 25px;
}
footer{
width:70%;
}
.text-muted{
width: 60%;
float: right;
}
.glyphicon-filter{
cursor: pointer;
}
HTML
<div class="sticky" style="background-color:#F5F5F5;">
<login (roleSet)='setRole($event)' (loginState)='loginState($event)' (userIdSet)='setUserId($event)' (refreshPage)='changeQuery(1)'
[logoutFlag]='logoutFlag'></login>
<div class="load" *ngIf="loading"></div>
<div class="search" style=" background-color:#FFFFFF;">
<div class="container-fluid " style=" background-color:#FFFFFF;">
<div class="row">
<div class="col-md-2 logo">
</div>
<div class="col-md-10 searchfilter">
<div class="form-section">
<div class="row">
<form id="searchfield">
<div class="search_box">
<div class="search-input-fields">
<div class="col-sm-4">
<div class="location">
<div class="location-inner-wrap">
<input type="text" class="guest" [(ngModel)]="place_search" [ngModelOptions]="{standalone: true}" (keyup)="search(place_search)"
placeholder="z.B. Berlin oder Ballonfahrt Berlin" focus="true">
<span class="search-close-icon"><i (click)="emptyAutocomplete()" class="search-close-icon glyphicon glyphicon-remove"></i></span>
</div>
<div class="autocomplete">
<ul class="autocomplete">
<li *ngIf="noplacefound== true">No records found.</li>
<li *ngFor="let place of items" (click)="selectPlace(place)">
<i *ngIf="place.is_city== true" class="glyphicon glyphicon-map-marker"></i>
<i *ngIf="place.is_city== false" class="glyphicon glyphicon-flag"></i>
<span class="bold">{{place.placename}}</span> {{place.country}}
</li>
</ul>
</div>
</div>
</div>
<div *ngIf="!toggleFilter">
<div class="col-sm-2">
<select [(ngModel)]="miles" [ngModelOptions]="{standalone: true}" class="miles_select guest" (change)="changeRange($event)">
<option value="20">20 km</option>
<option value="50">50 km</option>
<option value="100">100 km </option>
<option value="200">>200 km</option>
</select>
</div>
<div class="col-sm-3">
<select class="guest categorydd" [(ngModel)]="category_search" [ngModelOptions]="{standalone: true}" (ngModelChange)="changeCategory($event)">
<option value="Alle Kategorien" >Alle Kategorien</option>
<option *ngFor="let x of countedCategory " value="{{x._id}}"> {{x._id}} ({{x.total}})</option>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Alle Kategorien'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<option label="Unterkategorie" selected>Unterkategorie</option>
<optgroup label="Fliegen & Fallen" >
<option value="Fallen & Springen">Fallen & Springen</option>
<option value="Fliegen mit Motor">Fliegen mit Motor</option>
<option value="Gleiten & Schweben">Gleiten & Schweben</option>
<option value="Jets & Weltraum">Jets & Weltraum</option>
</optgroup>
<optgroup label="Motorpower">
<option value="Geländewagen">Geländewagen </option>
<option value="Ketten & Schienen">Ketten & Schienen</option>
<option value="Motorräder">Motorräder</option>
<option value="Oldtimer">Oldtimer </option>
<option value="Quads & Spaßmobile">Quads & Spaßmobile </option>
<option value="Rennwagen">Rennwagen</option>
<option value="Schneefahrzeuge">Schneefahrzeuge</option>
<option value="Traumautos">Traumautos </option>
</optgroup>
<optgroup label="Essen & Trinken">
<option value="Essen gehen">Essen gehen</option>
<option value="Kochkurse">Kochkurse</option>
<option value="Wein, Bier & Spirituosen">Wein, Bier & Spirituosen</option>
<option value="Kaffee & Schokolade">Kaffee & Schokolade</option>
</optgroup>
<optgroup label="Abenteuer & Sport">
<option value="Sport im Sommer">Sport im Sommer</option>
<option value="Sport im Winter">Sport im Winter</option>
<option value="Action & Stunts">Action & Stunts</option>
<option value="Wildnis">Wildnis</option>
</optgroup>
<optgroup label="Wellness & Gesundheit">
<option value="Verwöhnen & Erholen">Verwöhnen & Erholen</option>
<option value="Beauty & Styling">Beauty & Styling</option>
<option value="Fitness & Ernährung">Fitness & Ernährung</option>
<option value="Körper & Seele">Körper & Seele</option>
</optgroup>
<optgroup label="Kunst, Kultur & Lifestyle">
<option value="Dating, Liebe & Romantik">Dating, Liebe & Romantik</option>
<option value="Kunst & Handwerk">Kunst & Handwerk</option>
<option value="Lifestyle">Lifestyle</option>
<option value="Musik & Tanz">Musik & Tanz</option>
<option value="Vor der Kamera">Vor der Kamera</option>
<option value="Vor der Kamera">Wedding</option>
</optgroup>
<optgroup label="Wasser & Wind">
<option value="Boot">Boot</option>
<option value="Kajak">Kanu</option>
<option value="Rafting">Rafting</option>
<option value="Segeln">Segeln</option>
<option value="Surfen">Surfen</option>
<option value="Tauchen">Tauchen</option>
<option value="Wasserspass">Wasserspass</option>
</optgroup>
<optgroup label="Reisen">
<!-- <option value="Festivals">Festival</option> -->
<option value="Alpin">Alpin</option>
<option value="Hotel">Hotel</option>
<option value="Kultur">Kultur</option>
<!-- <option value="Nachtleben">Nachtleben</option> -->
<option value="Romantik">Romantik</option>
<option value="Staedtetrips & Ausfluege">Staedtetrips & Ausfluege</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Fliegen & Fallen'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Fliegen & Fallen">
<option value="Fallen & Springen">Fallen & Springen</option>
<option value="Fliegen mit Motor">Fliegen mit Motor</option>
<option value="Gleiten & Schweben">Gleiten & Schweben</option>
<option value="Jets & Weltraum">Jets & Weltraum</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Motorpower'">
<select id="scrollable-menu" class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" [ngModelOptions]="{standalone: true}"
(ngModelChange)="changeSpecCat($event)">
<optgroup label="Motorpower">
<option value="Geländewagen">Geländewagen </option>
<option value="Ketten & Schienen">Ketten & Schienen</option>
<option value="Motorräder">Motorräder</option>
<option value="Oldtimer">Oldtimer </option>
<option value="Quads & Spaßmobile">Quads & Spaßmobile </option>
<option value="Rennwagen">Rennwagen</option>
<option value="Schneefahrzeuge">Schneefahrzeuge</option>
<option value="Traumautos">Traumautos </option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Essen & Trinken'">
<select id="scrollable-menu" class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Essen & Trinken">
<option value="Essen gehen">Essen gehen</option>
<option value="Kochkurse">Kochkurse</option>
<option value="Wein, Bier & Spirituosen">Wein, Bier & Spirituosen</option>
<option value="Kaffee & Schokolade">Kaffee & Schokolade</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Abenteuer & Sport'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Abenteuer & Sport">
<option value="Sport im Sommer">Sport im Sommer</option>
<option value="Sport im Winter">Sport im Winter</option>
<option value="Action & Stunts">Action & Stunts</option>
<option value="Wildnis">Wildnis</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Wellness & Gesundheit'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Wellness & Gesundheit">
<option value="Beauty & Styling">Beauty & Styling</option>
<option value="Massagen">Massagen</option>
<option value="Verwöhnen & Erholen">Verwöhnen & Erholen</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Kunst, Kultur & Lifestyle'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Kunst, Kultur & Lifestyle">
<option value="Vor der Kamera">Vor der Kamera</option>
<option value="Kunst & Handwerk">Kunst & Handwerk</option>
<option value="Musik & Tanz">Musik & Tanz</option>
<option value="Dating, Liebe & Romantik">Dating, Liebe & Romantik</option>
<option value="Lifestyle">Lifestyle</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Wasser & Wind'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Wasser & Wind">
<option value="Boot">Boot</option>
<option value="Kajak">Kajak</option>
<option value="Kanu">Kanu</option>
<option value="Rafting">Rafting</option>
<option value="Segeln">Segeln</option>
<option value="Surfen">Surfen</option>
<option value="Tauchen">Tauchen</option>
</optgroup>
</select>
</div>
<div class="col-sm-3" *ngIf="category_search == 'Reisen'">
<select class="guest subcategorydd" [(ngModel)]="specCategory_search" name="specCategory_search" (ngModelChange)="changeSpecCat($event)">
<optgroup label="Reisen">
<option value="Alpin">Alpin</option>
<option value="Hotel">Hotel</option>
<option value="Kultur">Kultur</option>
<!-- <option value="Nachtleben">Nachtleben</option> -->
<option value="Romantik">Romantik</option>
<option value="Staedtetrips & Ausfluege">Staedtetrips & Ausfluege</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<i class="glyphicon glyphicon-filter" (click)="toggleFilter = !toggleFilter" ></i>
</div>
</div>
</div>
</div>
<div class="container-fluid ">
<div class="row">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs tabs-left">
<li class="active">
<a href="#_all" data-toggle="tab" (click)="pricewise(0)">
<span class="round-tabs one">
<i class="glyphicon glyphicon glyphicon-th"></i>
</span>
</a>
</li>
<li>
<a href="#_all" (click)="loadNewsComment(); messageTab=false;loadingFeeds()" data-toggle="tab" >
<span class="round-tabs two">
<i class="glyphicon glyphicon glyphicon-bullhorn"></i>
</span>
</a>
</li>
<li>
Eigene
</li>
<li>
<a href="#_all" style="outline:none;" (click)="messageClick()" *ngIf="isAlive" data-toggle="tab">
<span class="round-tabs three">
<i class="glyphicon glyphicon-envelope"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Try and add a z-index to .search_box
Something like z-index 50 to test (reduce this z-index to a logic in your website after)
Also check the opacity

add z-index to search-box
.search_box{z-index:100 float: left;position: relative;width:100%;}

Popups when hovered over not showing up (tooltip)

I will include my script below, I am having a problem where my pop ups do not show up. I have researched online and am not sure where in my code I went wrong. I am trying to include a pop up everywhere it says data-tooltip.
Here is the code for the tooltip
[data-tooltip],
[data-tooltip-uc],
[data-tooltip-ul],
[data-tooltip-ur],
[data-tooltip-lc],
[data-tooltip-ll],
[data-tooltip-lr] {
position: relative;
z-index: 2;
cursor: pointer;
}
[data-tooltip]:before {
bottom: 110%;
content: attr(data-tooltip);
}
[data-tooltip]:before,
[data-tooltip-uc]:before,
[data-tooltip-ul]:before,
[data-tooltip-ur]:before,
[data-tooltip-lc]:before,
[data-tooltip-ll]:before,
[data-tooltip-lr]:before {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
white-space: normal;
}
[data-tooltip]:after,
[data-tooltip-uc]:after {
bottom: 100%;
}
[data-tooltip]:after,
[data-tooltip-uc]:after,
[data-tooltip-ul]:after,
[data-tooltip-ur]:after,
[data-tooltip-lc]:after,
[data-tooltip-ll]:after,
[data-tooltip-lr]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
margin-left: 0px;
width: 0px;
border-top: 8px solid black;
border-top: 10px solid hsla(0, 0%, 20%, 0.9);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: transparent;
content: " ";
font-size: 0;
line-height: 0;
}
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
<div id="xbuilder">
<table>
<caption>Map of real-time streamflow compared to historical streamflow for the day of year<br>
<span style="font-size: 0.50em;">(Choose a region and then click "GO" to view a regional map) <br><span style="color: red;">(Warning: It may take several minutes to process)</span></span>
</caption>
<tbody>
<tr>
<td>
<div>
États-Unis :
<span data-tooltip='Choose a US state'>
<select name='usst' id='usst' size='1' onchange='javascript:set_st(this);' >
<option value=''>États</option>
<option value='al'>Alabama</option>
<option value='ak'>Alaska</option>
<option value='az'>Arizona</option>
<option value='ar'>Arkansas</option>
<option value='ca'>Californie</option>
<option value='co'>Colorado</option>
<option value='ct'>Connecticut</option>
<option value='de'>Delaware</option>
<option value='dc'>District de Colombie</option>
<option value='fl'>Floride</option>
<option value='ga'>Géorgie</option>
<option value='hi'>Hawaï</option>
<option value='id'>Idaho</option>
<option value='il'>Illinois</option>
<option value='in'>Indiana</option>
<option value='ia'>Iowa</option>
<option value='ks'>Kansas</option>
<option value='ky'>Kentucky</option>
<option value='la'>Louisiane</option>
<option value='me'>Maine</option>
<option value='md'>Maryland</option>
<option value='ma'>Massachusetts</option>
<option value='mi'>Michigan</option>
<option value='mn'>Minnesota</option>
<option value='ms'>Mississippi</option>
<option value='mo'>Missouri</option>
<option value='mt'>Montana</option>
<option value='ne'>Nebraska</option>
<option value='nv'>Nevada</option>
<option value='nh'>New Hampshire</option>
<option value='nj'>New Jersey</option>
<option value='nm'>Nouveau-Mexique</option>
<option value='ny'>L'état de New York</option>
<option value='nc'>Caroline du Nord</option>
<option value='nd'>Dakota du Nord</option>
<option value='oh'>Ohio</option>
<option value='ok'>Oklahoma</option>
<option value='or'>Oregon</option>
<option value='pa'>Pennsylvanie</option>
<option value='ri'>Rhode Island</option>
<option value='sc'>Caroline du Sud</option>
<option value='sd'>Dakota du Sud</option>
<option value='tn'>Tennessee</option>
<option value='tx'>Texas</option>
<option value='ut'>Utah</option>
<option value='vt'>Vermont</option>
<option value='va'>Virginie</option>
<option value='wa'>L'état de Washington</option>
<option value='wv'>Virginie-Occidentale</option>
<option value='wi'>Wisconsin</option>
<option value='wy'>Wyoming</option>
<option value='pr'>Puerto Rico</option>
</select>
</span>
<span data-tooltip='Choose a US water resource region'>
<select name='ushuc' id='ushuc' size='1' onchange='javascript:set_st(this);' >
<option value=''>Région hydrologique</option>
<option value='01'>01 New England</option>
<option value='02'>02 Littoral de l'Atlantique</option>
<option value='03'>03 South Atlantic-Gulf</option>
<option value='04'>04 Grands Lacs</option>
<option value='05'>05 Ohio</option>
<option value='06'>06 Tennessee</option>
<option value='07'>07 Haut-Mississippi</option>
<option value='08'>08 Mississippi Inférieur</option>
<option value='09'>09 Souris-Rouge-Pluie</option>
<option value='10'>10 Missouri</option>
<option value='11'>11 Arkansas-Blanc-Rouge</option>
<option value='12'>12 Texas-Gulf</option>
<option value='13'>13 Rio Grande</option>
<option value='14'>14 Haut-Colorado</option>
<option value='15'>15 Colorado Inférieur</option>
<option value='16'>16 Grand Bassin</option>
<option value='17'>17 Pacifique Nord-Ouest</option>
<option value='18'>18 Californie</option>
<option value='19'>19 Alaska</option>
<option value='20'>20 Hawaï</option>
<option value='21'>21 Puerto Rico</option>
</select>
</span>
</div>
<button class="button" onClick="javascript:down_ch();"><span class="icon">Télécharger les données</span></button>
</td>
</tr>
<tr>
<td>
<div>
Canada :
<span data-tooltip='Choisissez une province canadienne'>
<select name='nus' id='nus' size='1' onchange='javascript:set_st(this);' >
<option value=''>Provinces</option>
<option value='zab'>Alberta</option>
<option value='zbc'>Colombie-Britannique</option>
<option value='zmb'>Manitoba</option>
<option value='znb'>Nouveau-Brunswick</option>
<option value='znl'>Terre-Neuve et Labrador</option>
<option value='zns'>Nouvelle-Écosse</option>
<option value='znt'>Territoires du Nord-Ouest</option>
<option value='znu'>Nunavut</option>
<option value='zon'>Ontario</option>
<option value='zpe'>Île-du-Prince-Édouard</option>
<option value='zqc'>Québec</option>
<option value='zsk'>Saskatchewan</option>
<option value='zyt'>Yukon</option>
</select>
</span>
<span data-tooltip='Choisissez un bassin versant canadien'>
<select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
<option value=''>Bassins fluviaux canadiens</option>
<option value='z01'>01 Provinces Maritimes</option>
<option value='z02'>02 Saint-Laurent</option>
<option value='z03'>03 Nord du Québec et Labrador</option>
<option value='z04'>04 Sud-ouest de la baie d'Hudson</option>
<option value='z05'>05 Fleuve Nelson</option>
<option value='z06'>06 Ouest et Nord de la Baie d'Hudson</option>
<option value='z07'>07 Grand lac des Esclaves</option>
<option value='z08'>08 Pacifique</option>
<option value='z09'>09 Fleuve Yukon</option>
<option value='z10'>10 Arctique</option>
<option value='z11'>11 Fleuve Mississippi</option>
</select>
</span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region."><input value="Restaurer la Carte" type="button" onclick="history.go(0)" /></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</header>
<body>
<div class="center">
<div id="my-div">
<iframe src="http://watermonitor.gov/naww/index.php?fr=1" id="my-iframe"></iframe>
</div>
</div>
<div class="legend">
<img name="legend" style="border: 0px" src="http://watermonitor.gov/naww/fr/images/map_legends/ptile_dot.gif" alt="map legend">
</div>
</body>

Its because you hide it all with
visibility: hidden;
opacity: 0;
And then never unhide it.
You'll need to use the :hover pseudo-class to show the tooltips.
[data-whatever]:hover:before,
[data-whatever]:hover:after {
visibility: visible;
opacity: 1;
}
Obviously, replace "whatever" with the actual selector.
You can see a functioning example here.

image overlay and change on dropdown selection?

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>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Fixed INNER header and footer - not among the answered Q's - html

Related

Why does Bootstrap icon disappear when nav is collapsed?

html can't place elements properly

z-index not working autocompleter under tabs

Popups when hovered over not showing up (tooltip)

image overlay and change on dropdown selection?

Categories

Resources