Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ How to position button?

Posted by: gonen52 May 10 2018, 01:50 PM

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>


Posted by: pandy May 10 2018, 03:45 PM

You could for example float the inputs left. You must also use clear: left to make them come one after the other.

CODE
#floating-panel input   { float: left; clear: left }


But they won't be at the left side of the window as long as you position #floating-panel 25% from the left. If you don't have any special reason to use absolute positioning, don't. There's nothing wrong with it, but you need to know what you are doing or things can go very wrong. Since you say you are basically new to HTML, chances are you won't use it in a constructive way and make things harder for yourself.

Posted by: gonen52 May 11 2018, 11:55 AM

QUOTE(pandy @ May 10 2018, 03:45 PM) *

You could for example float the inputs left. You must also use clear: left to make them come one after the other.

CODE
#floating-panel input   { float: left; clear: left }


But they won't be at the left side of the window as long as you position #floating-panel 25% from the left. If you don't have any special reason to use absolute positioning, don't. There's nothing wrong with it, but you need to know what you are doing or things can go very wrong. Since you say you are basically new to HTML, chances are you won't use it in a constructive way and make things harder for yourself.




thanks !!!!! Could you please fix my sample code so I can see what you mean and will proceed by myself ?


Posted by: pandy May 11 2018, 05:49 PM

Just add the CSS I posted to your style sheet.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)