I am using leaflet map in my application & using bootstrap for responsiveness.
I have some buttons bellow that map.
It looks something like this.
But I want to overlap buttons on map like this
Here is my HTML
<div class="span9" style="height:100%">
<div id="map"></div>
<div style="padding-left: 10px;padding-right: 10px">
<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" />
<span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>
</div>
My css for map
html, body, #map, .row-fluid{
height: 100%;
}
#map {
width: 100%;
}
.btnStyle {
background-color: #4D90FE;
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
border: 1px solid #3079ED;
color: #FFFFFF;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width:100%
}
.lblStyle {
color: red;
padding: 4px;
margin-top: 4px;
margin-bottom: 4px;
width: 100%;
font-weight: bold;
}
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>
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
Related
New to Javascript Need to make a calculator by applying HTML CSS and Javascript. With all the buttons placed need to make a calculator app like this by calling the onclick function on each of the button wtih arguments passed into it. Please help to get started with it.
Calculator Current Design:
Here is the HTML and CSS Code:
body {
font-family: 'Open Sans', sans-serif;
background-color: black;
}
#container {
width: 1000px;
height: 550px;
background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)),
url(bgcalc.png);
margin: 20px auto;
}
#calculator {
width: 320px;
height: 520px;
background-color: #eaedef;
margin: 0 auto;
top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#result {
height: 120px;
margin-bottom: 20px;
}
#history {
text-align: right;
height: 20px;
margin: 0 20px;
padding-top: 20px;
font-size: 15px;
color: #919191;
}
#output {
text-align: right;
height: 60px;
margin: 10px 20px;
font-size: 30px;
background-color: #afbec4;
}
#keyboard {
height: 400px;
}
.operator,
.number,
.empty {
width: 67px;
height: 50px;
margin: 6px;
float: left;
border-width: 0;
font-weight: bold;
font-size: 15px;
}
#clear {
background-color: #cb4e4d;
border-radius: 45%;
}
.number,
.empty {
background-color: #5f7d8c;
border-radius: 10px;
color: white;
}
.number,
.operator {
cursor: pointer;
background-color: #5f7d8c;
border-radius: 10px;
color: white;
}
.operator:active,
.number:active {
font-size: 13px;
}
.operator:focus,
.number:focus,
.empty:focus {
outline: 0;
}
button:nth-child(4) {
font-size: 9px;
background-color: #cb4e4d;
border-radius: 10px;
}
button:nth-child(8) {
font-size: 20px;
background-color: #ffa500;
border-radius: 10px;
}
button:nth-child(12) {
font-size: 20px;
background-color: #f08080;
border-radius: 10px;
}
button:nth-child(16) {
font-size: 20px;
background-color: #7d93e0;
border-radius: 10px;
}
button:nth-child(20) {
font-size: 20px;
background-color: #9477af;
border-radius: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<body>
<div id="container">
<div id="calculator">
<div id="result">
<div id="history">
<p id="history-value"></p>
</div>
<div id="output">
<p id="output-value"></p>
</div>
</div>
<div id="keyboard">
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace">+-</button>
<button class="operator" id="%">%</button>
<button class="operator" id="/">Console <br>Log</button>
<button class="number" id="7">7</button>
<button class="number" id="8">8</button>
<button class="number" id="9">9</button>
<button class="operator" id="*">÷</button>
<button class="number" id="4">4</button>
<button class="number" id="5">5</button>
<button class="number" id="6">6</button>
<button class="operator" id="-">×</button>
<button class="number" id="1">1</button>
<button class="number" id="2">2</button>
<button class="number" id="3">3</button>
<button class="operator" id="+">-</button>
<button class="empty" id="empty">0</button>
<button class="number" id="0">.</button>
<button class="empty" id="empty">=</button>
<button class="operator" id="=">+</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
here's what you could go for as a start:
assign an onclick attribute to all of the buttons, and as a parameter pass their value, and add a main input which all the values would be added into:
<input type="text" id="mainInput" readonly>
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace" onclick="addChar("-")">+-</button>
<button class="operator" id="%" onclick="addChar("%")">%</button>
<button class="operator" id="/">Console <br>Log</button>
<button class="number" id="7" onclick="addChar("%")">7</button>
<button class="number" id="8" onclick="addChar("%")">8</button>
<button class="number" id="9" onclick="addChar("%")">9</button>
<button class="operator" id="*" onclick="addChar("%")">÷</button>
<button class="number" id="4" onclick="addChar("%")">4</button>
<button class="number" id="5" onclick="addChar("%")">5</button>
<button class="number" id="6" onclick="addChar("%")">6</button>
<button class="operator" id="-" onclick="addChar("%")">×</button>
<button class="number" id="1" onclick="addChar("1")">1</button>
<button class="number" id="2" onclick="addChar("2")">2</button>
<button class="number" id="3" onclick="addChar("3")">3</button>
<button class="operator" id="+" onclick="addChar("-")">-</button>
<button class="empty" id="empty" onclick="addChar("%")">0</button>
<button class="number" id="0" onclick="addChar(".")">.</button>
<button class="empty" id="empty" onclick="addChar("=")">=</button>
<button class="operator" id="=" onclick="addChar("+")">+</button>
Then in JS, create the onclick function:
function addChar(val) {
document.getElementById("mainInput").value += val
}
All I'm doing here is getting the mainInput's value and adding the the value of the button clicked into it.
This should set you with something to start with, good luck!
Im trying to make a panel with buttons that have the next arrangement side by side in columns:
But I don't know how to this.
Here is my code
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
color: white;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin: 0 auto;
display: inline-block;
}
input[type=submit]:hover {
background-color: #45a049;
display: block;
margin: 0 auto;
}
.container {
border-radius: 5px;
background-color: #23364B;
padding: 20px;
display:inline-block;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* this is for when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
body {
background-color:#23364B;
color: white;
text-align: center;
}
a:link, a:visited {
background-color: #4CAF50;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
float: right;
border: none;
border-radius: 4px;
}
a:hover, a:active {
background-color: #4CAF50;
}
<body>
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="row">
<input type="submit" value="action 1">
</div>
<div class="row">
<input type="submit" value="action 2">
</div>
<div class="row">
<input type="submit" value="action 3">
</div>
<div class="row">
<input type="submit" value="action 4">
</div>
<div class="row">
<input type="submit" value="action 5">
</div>
<div class="row">
<input type="submit" value="action 6">
</div>
</form>
</div>
1
</body>
Im guessing that #media screen, the .col-25 and .col-75 statements on css are messing in, but at the same time I dont see how, since this only acts (I think) in the space assignation inside the text areas,labels and buttons, but not outside this elements.
UPDATE
The statements mentioned in the css has nothing to do.
A div is a block level element, placing a element inside a div will normally move it to next line. In your case , you can use css grid system. and define how many columns you will like to have
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
<h2>Some title</h2>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">key 1</label>
</div>
<div class="col-75">
<input type="text" id="some" name="somethig" placeholder="some text">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">key2</label>
</div>
<div class="col-75">
<input type="text" id="some again" name="more something" placeholder="more text">
</div>
</div>
<div class="button-container">
<input type="submit" value="action 1">
<input type="submit" value="action 2">
<input type="submit" value="action 3">
<input type="submit" value="action 4">
<input type="submit" value="action 5">
<input type="submit" value="action 6">
</div>
</form>
</div>
1
I am new to CSS animations and have very little knowledge with animations specifically. My intention is to have the grey box come down from the top line above the login / register section. At the moment I have only got it fading in. If anybody can help that would be great.
Please run the code in your own browser to see how it's supposed to run.
P.S. The animation runs when the button is clicked.
If anybody can help that would be great.
var regbutton = document.getElementById('Register_Button');
var regpopup = document.getElementById('cover_for_register');
regbutton.onclick = function () {
"use strict";
regpopup.style.display = "block";
}
body{
margin: 0px auto;
}
button, input, p, h1, h2, h3, h4, h5, a{ /* State that these particular elements be "fantasy" */
font-family: Tahoma;
}
#home_container{
margin: 0px auto;
}
#home_left_section{
float: left;
height: 100%;
width: 55%;
background:-webkit-linear-gradient(#2aefff, #ffffff);
}
#home_right_section{
float: right;
height: 100%!important;
width: 45%;
box-shadow: 0px 0px 14px #888;
z-index: 10000;
background-color:aliceblue;
}
#home_right_section h1{
padding-bottom: 25px;
padding-top: 25px;
font-size: 60px;
margin: 0px;
text-align: center;
}
#home_right_section h2{
margin: 0px;
}
#home_right_section hr {
margin: 0px;
}
#login_register_container{
display:inline-block;
width: 100%;
}
#login_container{
text-align: center; /* If border is created, width must be changed */
float: left;
padding-right:50px;
padding-left: 30px;
padding-top: 20px;
margin-right: 0px auto;
background-color: aqua;
}
.login_input_fields{
border-radius:5px;
width: 200px;
padding: 5px;
border: 1px solid #bfbfbf;
font-size: 15px;
}
.register_popup_foot{
}
#register_container{
width: 50%;
float: right;
margin: 0px auto;
text-align:left;
}
#cover_for_register{
display: none;
position:fixed;
height: 52%;
width: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: animateone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes animateone {
from {min-height:200px; opacity:0}
}
#Register_Button{
z-index: 10000;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
width:100px;
height: 50px;
color: white;
text-align: center;
margin-top: 80px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#Register_Button_Container{
width: 50%;
float: right;
margin: 0px auto;
text-align:center;
background-color: aqua;
height: 217px;
}
<html>
<body>
<head>
<title>Home</title>
<link rel="stylesheet" href="PTrainMeCSS.css">
<meta name="viewpoint" content="width=deive-width" />
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</head>
<div id="home_container">
<section id="home_left_section">
<h1></h1>
</section>
<section id="home_right_section">
<h1>GetFit</h1>
<hr />
<h3 id="welcome_text">Here you can find whatever service you may want throughout the fitness industry</h3>
<hr />
<div id="login_register_container">
<section id="login_container">
<h2>Login</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username / E-Mail" /><br /><br />
<input class="login_input_fields" type="password" name="Password" maxlength="20" placeholder="Password" />
<br />
<br />
<input type="submit" value="Login" />
</form>
<footer class="register_popup_foot">
<a class="register_loginform_foot_text" href="Forgot Password.html">Reset Password</a>
<br />
</footer>
</section>
<div id="Register_Button_Container">
<section>
<button id="Register_Button">Register</button>
</section>
</div>
<div id="cover_for_register">
<section id="register_container">
<h2>Register</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username"/>
<br /><br />
<input class="login_input_fields" type="text" name="E-Mail" placeholder="E-Mail"/>
<br /><br />
<input class="login_input_fields" type="password" name="Password" placeholder="Password"/>
<br /><br />
<label>Age:</label>
<br /> <select type="option" name="Age">
<option></option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select><br /><br />
Security Question: <br /><select type="select" name="Security Question">
<option>Please select one.</option>
<option>What was my school teachers first name?</option>
<option>Whats my favourite chip flavour?</option>
<option>What type was my first car?</option>
<option>What was the name of my first school?</option>
<option>What are my parents names?</option>
<option>How many siblings do i have?</option>
<option>What was the address of my first house?</option>
</select><br /> <br />
Answer: <br /> <input type="text" name="Answer">
Why<br /><br />
<input type="submit" value="Submit">
</form>
</section>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</body>
</html>
Here is the quick solution,
make #cover_for_register = z-index highest from others and change your animation to
#-webkit-keyframes animateone {
from { top:-52%;}
to {top: 5%;}//desired margin from top to cover your login page.
}
it will work fine.
Only thing you have to change is as
#-webkit-keyframes animateone {
from { height:0%;}
to {height: 100%;}
}
AND add below point in CSS...
add top:0; position:absolute; to #cover_for_register
add position:relative; #login_register_container
Look at this : https://jsfiddle.net/dkrvl2011/se93orog/10/show/
I am new on html development. I have problem with html for handling web UI . Actually I build a small html based application which is for design a form . In this form three main things, one is Elements on left side , second is properties on right side , In centre there have resizable div, I have problem with that div that div is shifting when resizing it in right side . Down side that is perfect when resizing . I share my code please see it and run it .
What I want? : I want when I resize to right size my properties div also shift on right when width is increasing of resizable div. Please anyone help me who have expertise in html .
.element-div {
width:300px;
box-shadow: 1px 1px 1px 1px grey;
height:auto;
border-radius: 10px;
margin-left:20px;
background-color:#fff;
float:left;
padding-bottom:18px;
}
.test {
margin-top:5px;
margin-left : 40px;
width: 180px;
height: auto;
padding:15px;
margin-bottom: 5px;
border: 1px solid burlywood;
}
#drop {
width: 700px;
height: 650px;
margin-bottom: 30px;
border-radius: 10px;
background-color: #fff;
box-shadow: 1px 1px 2px 2px grey;
}
.dropped {
width: 180px;
height: auto;
padding:15px;
border : 1px solid burlywood;
background-color: none;
}
.button-clone {
background-color: coral;
border: solid 1px;
border-color: crimson;
height:50px;
width:100%;
}
.text-clone {
border : solid 1px;
border-color :cornflowerblue;
height : 25px;
width : 100%;
}
.dropdown-clone {
height : 30px;
width : 100%;
background-color: cornflowerblue;
}
.date {
border : solid 1px ;
border-color: darkgoldenrod;
height:25px;
width:100%;
}
.save-form {
background-color:#B35050;
border: solid 1px;
border-color:#861F03;
height:40px;
width:80px;
float : right;
border-radius : 5px;
}
h1 {
font-family: sans-serif;
color :brown;
}
#properties-ui {
float:right;
margin-top:15px;
margin-right:10px;
min-width:180px;
min-height:100px;
background-color: #AFE1E6;
padding-left:20px;
padding-right: 20px;
padding-bottom: 20px;
border-radius: 10px;
font-family: sans-serif;
box-shadow: 1px 1px 1px 1px grey;
}
#header-properties {
background-color: brown;
color:#fff;
font-family: sans-serif;
margin-top: -33px;
text-align:center;
border-radius: 5px;
box-shadow: 1px 1px 1px 1px grey;
}
#delete , #clear, #save{
background-color:#FF7C7C;
border: solid 1px;
border-color:#ff000a;
color : #fff;
height:40px;
width:80px;
font-family: sans-serif;
border-radius : 5px;
}
#SET {
background-color:#3D7007;
color:#fff;
width:45px;
height:30px;
margin-top:5px;
float:right;
border:1px solid white;
border-radius:6px;;
}
.pre-button {
background-color:#496EF3;
color:#fff;
width:55px;
height:25px;
float:right;
border:1px solid white;
border-radius:6px;;
}
<body style="background-color:ivory;">
<div style="border:7px solid cadetblue;padding:10px;border-radius:20px;">
<div>
<h1>FORM TEST<input type="submit" class="save-form" name="saveForm" id="saveForm" value="Submit" style="float:right;color:#fff;" onclick="formsubmit();"></h1>
</div>
<div style="margin-left:50px;margin-bottom:10px;">
<input type="button" style="background-color:#77B337;border:1px #4E9205;"id="save" name="save" value="Save"/>
<input type="button" style="background-color:#7C9AFF;border:1px #637ED8;" id="clear" name="clear" value="Clear" onclick="clearCanvas();" />
<input type="button" id="delete" name="delete" value="Delete" onclick="delete_Element();"/>
<label style="margin-left:15%;">Selected Table:<input type="text" name="tablename" id="tablename" class="text-clone" style="border-color:green;width:15%;margin-left:2%; " readonly /></label>
</div>
<div id="properties-ui">
<div id="header-properties"><p>Properties</p></div>
<input type="text" id="Name" style="margin-bottom:8px;padding:3px;" placeholder="Name"><br>
<input type="checkbox" id="fieldbox" style="height:15px;width:15px;" name="fieldRequired" />
<label style="font-size:14px;">Field Required</label><br><br>
<input type="text" id="Value" style="margin-bottom:8px;padding:3px;" placeholder="Value"><br>
<input type="color" name="colorpicker" id="bg" style="margin-top:5px;width:20px;" value="#fefefe">
<label style="font-size:14px;">Select Color</label><br><br>
<input type="text" id="addoption" name="addoption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Add Options">
<input type="button" class="pre-button" name="add" id="add" value="Add" onclick="return addoptions();" /><br><br>
<input type="text" id="deloption" name="deloption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Del Options">
<input type="button" class="pre-button" name="Del" id="Del" value="Del" style="background-color:#F95050" onclick="return deloptions();" /><br><br>
<select id="data-column" class="dropdown-clone" style="background-color:rgb(208, 110, 6);margin-bottom:15px;height:25px;color:cornsilk" name="Name"><option value="">Name</option><option value="satinder">Satinder</option></select><br>
<input type="button" name="setproperties" id="SET" value="SET" onclick="return setProperties();"/>
</div>
<div class="element-div">
<h3 style="margin-left:25px;margin-top:10px;color:goldenrod;">ELEMENTS</h3>
<div class="test red square" style="cursor:move;"><input type="text" class="text-clone" name="default" style="cursor:not-allowed"></div>
<div class="test red square" style="cursor:move;"><textarea class="text-clone" name="default" style="cursor:not-allowed" placeholder=" Label here..."></textarea></div>
<div class="test red square" style="cursor:move;"><input type="text" class="date" name="date" style="cursor:not-allowed" id="date" placeholder=" DD-MM-YEAR"></div>
<div class="test red square" style="cursor:move;"><select id="selectbox" class="dropdown-clone" style="cursor:not-allowed" name="1">
<option id="SELECT" value="">SELECT</option>
</select></div>
<div class="test red square" style="cursor:move;" ><input type="button" class="button-clone" value="Button" style="height:50px;cursor:not-allowed;" ></div>
<label style="margin-left : 15%;">Radio Button</label>
<div class="test red square" style="cursor:move;"><input type="radio" style="width:15px; height:15px;cursor:not-allowed;" name="radiobutton" value="default"></div>
<label style="margin-left : 15%;">Checkbox</label>
<div class="test red square" style="cursor:move;"><input type="checkbox" style="width:15px; height:15px;cursor:not-allowed;"></div>
<label style="margin-left : 15%;">Combobox</label>
<div class="test red square" id="combobox" style="cursor:move;"><input type="text" name="example" style="cursor:not-allowed" list="exampleList">
<datalist id="exampleList">
</datalist></div>
</div>
<div id="dd"><div style="margin-left:26%;resize: both;overflow:auto;" id="drop"></div>
</div>
</div>
</body>
I'm having a problem getting the search box to look like I want.
http://i39.tinypic.com/e8u8gn.jpg
My CSS Code:
#searchform {
position: relative;
padding: 5px;
}
HTML Code:
<body class="home">
<div id="container">
<header id="masthead">
<h1><p>Testing</p></h1></header>
<nav class="nav-buttons" id="primary">
<ul>
<li id="search" style="padding-left:400px;">
<form id="searchform" action="http://www.Google.com/" method="get"><label class="screen- reader-text" for="s">
</label><input id="s" type="text" placeholder="Type your search here" name="s" value=""> </input><input id="searchsubmit" type="submit" value="Search"></input></form></li>
</ul>
</nav>
Check this Fiddle
HTML
<div>
<input type="text">
</div>
CSS
div {
background: #e1e1e1;
padding: 20px;
}
input {
padding: 5px 5px;
width: 300px;
height: 30px;
font-size: 16px;
border: 1px solid #ccc;
padding-right: 50px;
background: #fff url(http://png.findicons.com/files/icons/1389/g5_system/16/toolbar_find.png) no-repeat;
background-position: 330px center;
}
input:focus {
border: 1px solid #ccc;
}
CSS
.hey { border:1px solid #efefef; padding:7px; font:normal 14px Tahoma; }
HTML (change into this)
<input id="s" class="hey" type="text" placeholder="Type your search here" name="s" value=""> </input>
<input id="searchsubmit" type="image" src="search.gif"</input></form></li></input>
Enjoy!