The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> How to position button?, How to position button on screen
gonen52
post May 10 2018, 01:50 PM
Post #1





Group: Members
Posts: 3
Joined: 10-May 18
Member No.: 26,643
Hi
I am almost new to html

I have a sample code with few buttons on top.

I would like to have the buttons with Day01... Day02... Day03... Day04... to be positioned vertically on the left side of the screen
can this be done?

Thank you for your kind help.






Here is my code

CODE
<!DOCTYPE html>
<! ========================================================================== />
<! to debug html - display it, type F12 + CONSOLE  and code console.log("aaa")  to display />
<! ========================================================================== />    
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>I83_Coors.html</title>
    <style>
      html, body {height: 100%; margin: 0; padding: 0;}
      #map {height: 100%;}
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>

<div id="floating-panel">
<input type="button" id="Day01" value="Day01 Hide" style="color:blue" onclick="Day01(this);">
<input type="button" id="Day02" value="Day02 Hide" style="color:blue" onclick="Day02(this);">
<input type="button" id="Day03" value="Day03 Hide" style="color:blue" onclick="Day03(this);">
<input type="button" id="Day04" value="Day04 Hide" style="color:blue" onclick="Day04(this);">


<input type="button" id="DayNumber" value="DayNumber Show" style="color:blue" onclick="DayNumber(this);">
<input type="button" id="Routes" value="Routes Hide" style="color:blue" onclick="Routes(this);">
<input type="button" id="IDandRow" value="ID and Row Show" style="color:blue" onclick="IDandRow(this);">
<input type="button" id="Info" value="Info Show" style="color:blue" onclick="Info(this);">
<input type="button" id="Markers" value="Markers Hide" style="color:blue" onclick="Markers(this);">

<input onclick="addinfos();" type=button value="Display X info (single route only)" style="font-size:10pt;color:white;background-color:green;border:2px solid #336600;padding:6px">

</div>
    <div id="map"></div>
    <script>

function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Centr.
  controlUI.addEventListener('click', function() {
    map.setCenter(Centr);
  });
}
    
function initMap() {
  var Centr = {lat: 32.402723, lng: 35.053641};
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: Centr,
    scaleControl: true,
         scaleControlOptions: {
              position: google.maps.ControlPosition.LEFT_TOP
          },
          fullscreenControl: true,
         mapTypeControl: true,
         mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
          }
  });
  
  addLine();
  }
  function DayNumber(button) {
      if(document.getElementById("DayNumber").value=="DayNumber Show")
              {
    document.getElementById("DayNumber").value="DayNumber Hide";
    document.getElementById("DayNumber").style="font-size:10pt;color:white;background-color:red;border:2px solid #336600;padding:6px"
    BaloonDayinfo1.open(map,PoiDayinfo);
              }
        else {
        document.getElementById("DayNumber").value="DayNumber Show";
        document.getElementById("DayNumber").style="font-size:10pt;color:white;background-color:green;border:2px solid #336600;padding:6px"
        BaloonDayinfo1.close();
        }
  }
  

        
              }
            }      

                          
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=key&signed_in=true&callback=initMap">
  </script>
  </body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
gonen52   How to position button?   May 10 2018, 01:50 PM
pandy   You could for example float the inputs left. You m...   May 10 2018, 03:45 PM
gonen52   You could for example float the inputs left. You ...   May 11 2018, 11:55 AM
pandy   Just add the CSS I posted to your style sheet.   May 11 2018, 05:49 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 09:40 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC