stormtracker Posted March 16, 2018 Share Posted March 16, 2018 Hello i am working on a weather website would like to add table to my weather page to clean it up so i can use javascript for the table also how can i fix up musearch button to the rite of the serch bar mike function show(data){ return "<h2 style='font-size:15px; font-weight: bold;' class='text-center'>Current Weather Forecast For " + data.name + ", " + data.sys.country +"</h2>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Description</strong>: <img src='http://openweathermap.org/img/w/"+ data.weather[0].icon+".png'> "+ data.weather[0].main +"</h3>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Weather</strong>: "+ data.weather[0].main +"</h3>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Temperature</strong>: "+ data.main.temp + "°C</h3>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Pressure</strong>: "+ data.main.pressure + " HPA</h3>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Humidity</strong>: "+ data.main.humidity + " %</h3>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Min</strong>: "+ data.main.temp_min + " °C</h3>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Max</strong>: "+ data.main.temp_max + " °C</h3>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Winds Speed</strong>: "+ data.wind.speed + " m/s</h3>" + "<h3 style='font-size:15px; font-weight: bold;'><strong>Winds Direction</strong>: " + data.wind.deg + " °</h3>"; "<h3 style='font-size:15px; font-weight: bold;'><strong>Sunrise</strong>: " + data.sys.sunrise + "</h3>"; } Link to comment Share on other sites More sharing options...
iwato Posted March 16, 2018 Share Posted March 16, 2018 (edited) You might wish to begin here. In regard to your button, you might try floating it or placing the entire bar in a flex box. Button and forms have a mind of their own. Roddy p.s. If you find my entry helpful, hover over the heart and click on the trophy. Edited March 16, 2018 by iwato Link to comment Share on other sites More sharing options...
stormtracker Posted March 17, 2018 Author Share Posted March 17, 2018 I hve try the float right but still not working #submitWeather{ height: 30px; font-size: 15px; font-weight: bold; float: right; margin: 10px; padding: 10px; } Link to comment Share on other sites More sharing options...
dsonesuk Posted March 17, 2018 Share Posted March 17, 2018 Then that suggests there's not enough room available in the parent element to allow another child element to show as a single row. Link to comment Share on other sites More sharing options...
stormtracker Posted March 17, 2018 Author Share Posted March 17, 2018 (edited) this is my html code if anyone can help me please <html lang="en"> <head> <meta charest="UTF-8"> <meta name="description" content="Free Weather Resource"> <meta name="keywords" content="Current Forecast, Weather Charts, Weather Community,Weather Blog"> <meta name="author" content="Michael Wright"> <title>StormSearchers</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;"> <h2 class="text-center" style="font-size:50px; font-weight:600px;">StormSearchers</h2> </div> <div id="nav"> <ul> <li><a href="http://www.stormsearchers.com/current.html">Current</a></li> <li><a href="http://www.stormsearchers.com/winds.html">Winds</a></li> <li><a href="http://www.stormsearchers.com/rain.html">Rainfall</a></li> <li><a href="http://www.stormsearchers.com/almanac.html">Almanac</a></li> <li><a href="http://www.stormsearchers.com/tides.html">Marine Tides</a></li> <li><a href="http://www.stormsearchers.com/storms.html">Stormcast</a></li> <div class="row form-group form-inline" id="rowDiv"> <input type="text" name="city" id="city" class="form-control" placeholder="City Name"> <button id="submitWeather" class="btn btn-primary">Search City</button> </ul> </div> <div id="warnings" class="marquee">marquee information marquee information marquee information marquee information</div> </div> </div> <div id="container">This is where the contents goes</div> <div id="show"> </div> <script src="weather.js"></script> <div class="footer"> <div class="container"> <div class="row text-center" style="padding-top:30px;"> <p>Copyright©Stormsearchers 2018-2019 A.B.N:000.000.000.000 all rights reserved</p> <br>Your use of this website is subject to our <a href="http://www.stormsearchers.com/terms.html">Terms & Conditions</a> and please Read our <a href="http://www.stormsearchers.com/privacy.html">Privacy statement</a></br> <br>Comments, Confessionsor contact the web-master!</p> </div> </div> </body> </html> Edited March 17, 2018 by stormtracker Link to comment Share on other sites More sharing options...
dsonesuk Posted March 17, 2018 Share Posted March 17, 2018 (edited) You have no doctype <!DOCTYPE html> For every opening '<div' there must be equally a closing </div>, same with '<p>.........</p>' paragraphs. Each of these are like box containers, a box within a box <div id="nav"> is a box container for '<ul>...........</ul>'which is a box container for 'li' box container elements and so on. You have a div opening box container but no, or misplaced closing div outside closing div for id="nav", this breaks the box structure, causing more problems as the browser attempts to correct this broken structure as well as others within your code. IF you validate at https://validator.w3.org/ You will also find it says "document type does not allow element "DIV" here; assuming missing "LI" start-tag" which is referring to <div class="row form-group form-inline" id="rowDiv"> not being allowed as child of '<ul>' elements, only 'li' elements are allowed child elements, so you need to add the div INSIDE a li element. Go through validation and fix remaining errors/warnings, then come back to us if problem still exists. Edited March 17, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now