How to put buttons on the leaflet map

I hope i understood you right and it helps. Here is the fiddle: http://jsfiddle.net/g3JrG/4/

HTML:

<div class="span9" style="height:100%">
    <div id="map-wrapper">
        <div id="map"></div>
        <div id="button-wrapper">
            <input type="button" id="Btn1" value="Btn1" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" class="btnStyle span3" />
         </div> 
    </div>
    <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>

CSS:

#map-wrapper {
    width: 100%;
    height: 500px;
    position: relative;
    border: 1px solid black;
}

#map {
    width: 100%;
    height: 100%;
    background-color: green;
}

#button-wrapper {
    position: absolute;
    bottom: 10px;
    width: 100%;
    border: 1px solid red;
}

TJL

I hope i understood your question right. You want to show three buttons inside the map and map should have rounded corners as well as the buttons should also have rounded corners. Hope this helps.

Try this:

HTML:

<div class="span9" style="height:100%">
    <div id="map">
        <div style="padding-left: 10px;padding-right: 10px; position:absolute; bottom:-10px; width:100%;">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
        </div> 
    </div>
    <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>

CSS:

html, body, #map, .row-fluid{
    height: 100%;
}

#map {
    width: 100%;
    border-radius: 15px;
    border:solid 1px black;
}


.btnStyle {
    cursor:pointer;
    background-color: #4D90FE; 
    border-radius: 15px;
    background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); 
    border: 1px solid #3079ED; 
    color: #FFFFFF;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width:28%
}

.lblStyle {
    color: red;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width: 100%;
    font-weight: bold;
}

Fiddle

Leaflet.js provides the following classes:

leaflet-bottom
leaflet-top
leaflet-left
leaflet-right

Generic HTML example:

    <div id="divmap"> <!--leaflet map wrapper div -->
        <div id="map" > <!--leaflet map div -->
            <div class="leaflet-bottom leaflet-left">
                <div id="marker-legend">  <!-- here the legend -->
                </div>
            </div>          
        </div>
    </div>

Adapting the previous HTML to your particular question:

 <div class="span9" style="height:100%">
    <div id="map">
        <div class="leaflet-bottom leaflet-left">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3 leaflet-control" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3 leaflet-control" />
            <span id="studentsCount" class="lblStyle span3 leaflet-control"> Ikke rutesat: </span>
        </div>
    </div>
</div>