html - Input element and CSS not working -


i've been fighting input element , css. not in design. trying create that:

enter image description here

my input inside form inside

  • :

    <li> <form class="searchform" name="search" action="./index.cfm?p=128" method=post >     <input type="text" name=search value="" style="color: #676767; background-color: #282828; line-height: 18px" size="10" maxlength="40"  placeholder="search">     <input class="search_button" type=submit name="submitbutton1" value="search" id="submitbutton1"> </form></li>

    here css:

        @import url(http://fonts.googleapis.com/css?family=montserrat); body, html {height: 100%; margin: 0; font-size:16px;} body {font-family: arial;} header {width: 100%; background-image: url('img/top-bg.png'); background-repeat: repeat-x; background-color: #dfebf2; position: fixed; height: 70px; z-index:2;} aside {width: 270px; min-height: 100%; position: fixed; background-color: #dfebf2; left: 0; max-height: 100%; overflow-y: auto; /* border-right: 1px solid #bdcada; */} section {top: 70px; left: 270px; position: absolute;} h3 {font-family: 'montserrat', arial; text-transform: uppercase;font-size:15px;} select {width: 230px; height: 34px; border: 1px solid #bdcada; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding-left: 8px; border-radius: 3px;} table, th, td {border: 1px solid #bdcada;}  input.search_button {     color: black;     line-height: 23px;     font-weight: bold;     font-size: 10px;     font-family: 'montserrat', arial;     -webkit-border-radius: 5px;      -moz-border-radius: 5px;      border-radius: 5px;     width: 20em;     height: 2em;  }  .height-112px {height: 112px;} #logo-box {float: left; margin-left: 20px; margin-top:10px; width: 250px;} #mobile-menu-icon, #mobile-profile-icon {display:none;} #top-nav {position: absolute; width: 100%; background-color: #282828; min-height: 42px; top: 70px; color: #fff;} .top-nav-links {list-style-type: none; padding: 0px; margin: 0px; padding-left: 20px; padding-right:20px; line-height: 42px;} .top-nav-links li {font-weight: bold; display: inline; margin-right: 15px; font-size: 10px; text-transform: uppercase; font-family: 'montserrat', arial;} .top-nav-links {color: #676767; text-decoration: none;} .top-nav-links a:hover {color: #fff;} .active-top {color: #fff;} #details-box {padding: 30px 20px 30px 20px; border-bottom: 1px solid #bdcada;} #height-5px {height: 5px;} .details-1 {font-weight: bold; font-size: 14px; color: #1072ad;} .details-2 {font-style: italic; font-size: 12px; color: #9ca6b6; margin-left: 10px;} .details-3 {font-weight: bold; font-size: 12px; color: #000; margin-left: 10px;} #details-box {text-decoration: none;} .logout {font-size: 11px; color: red;} #property-box {padding: 25px 20px 30px 20px;} .blue-nav-title {font-family: 'montserrat', arial; font-weight: bold; font-size: 12px; color: #1072ad; text-transform: uppercase;} .list-title {height: 42px; background-image: url('img/top-bg.png'); padding: 0 20px 0 20px; border-bottom: 1px solid #0b5987; line-height: 42px; font-family: 'montserrat', arial; font-size: 12px; color: #fff; text-transform: uppercase;} .nav-links {list-style-type: none; padding: 0px; margin: 0px;} .nav-links li {font-size: 12px; color: #6e7888; padding-left: 20px; line-height: 50px; border-bottom: 1px solid #bdcada;} .nav-links {text-decoration: none; color: #6e7888;} .nav-links li:before {content: "► "; font-size: 7px; color: #157cb8; vertical-align: top; margin-right: 8px;} .nav-links a:hover {text-decoration: none; color: #000;} .active {background: #fff;} #content {margin-left: 50px; margin-top: 92px;}    table {font-size: 12px; border-collapse: collapse; width: 100%; overflow-y:scroll; height:300px; display:block;} table td, th {padding: 10px;} table tr:hover {background: #f0f6f9;}  .table-b {font-size: 12px; border-collapse: collapse; width: auto; height: auto; display:block;} .table-b td, th {padding: 10px;} .table-b tr:hover {background: #f0f6f9;}  .table-a {font-size: 12px; border-collapse: collapse; width: 100%; } .table-a td, th {padding: 10px;} .table-a tr:hover {background: #f0f6f9;}   form.searchform {display: inline-block;} #login {width: 240px; border: 1px solid #bdcada; border-radius: 3px; padding: 30px; font-size: 12px;} .input {width: 230px; height: 30px; border: 1px solid #bdcada; font-size: 14px; font-weight: bold; margin-top: 5px; margin-bottom: 10px; padding-left: 8px; border-radius: 3px;}  .divtable{   display:table;            width:auto;            background-color:#eee;            border:1px solid  #666666;            border-spacing:5px; } .divrow{   display:table-row;   width:auto;   clear:both;   background-color:#ccc;   } .divcell{   float:left;   display:table-column;            width:100px;          border-left: 2px solid #fff; }   /* columns float left while fit – spacing in there between columns*/ #column {width:48%;float:left;padding-right:20px;}  /*the table fill space of column – column starts @ 50% of screen width 2 can fit */ table {width:100%;margin-bottom:20px}  /* responsive breakpoint – @ 1000px screen, tables no longer fit side side, auto-fit top-to-bottom, make them each full width */ @media screen , (max-width: 1000px) {                 #column {width:100%;}   @media screen , (max-device-width : 768px) {     body, html {width:100%; margin: 0; font-size:14px;}     header {position:initial; height:auto;}     aside {width:100%; position:initial; min-height:initial;}     section {position:initial;}     select {width: 100%; height:auto; padding:8px; font-size: inherit;}      .height-112px {height: auto;}     #logo-box {float: none; margin:0px; width: 100%}     #logo-img {margin: 10px 10px 5px 10px;}     #mobile-menu-icon, #mobile-profile-icon {display:block; float:right; height:45px; width:45px; margin: 12px 12px 5px 0px;}     #top-nav {position: initial; display:none; clear:both; border-bottom: 1px solid #bdcada; background-color: inherit; width: 100%; min-height: inherit;}     .top-nav-links li {display:block; width:100%; font-size: 16px; line-height:36px;}     .top-nav-links li:first-child {padding-top:10px;}     .top-nav-links li:last-child {padding-bottom:10px;}     .top-nav-links {color: #000;}     .active-top {color: #1067a6;}     #details-box {display:none; padding: 20px;}     .details-1, .details-2, .details-3, .logout {font-size: inherit;}     #property-box {padding: 20px;}     .blue-nav-title {font-family: 'montserrat', arial; font-weight: bold; font-size:inherit; color: #1072ad; text-transform: uppercase;}     .list-title {font-size:inherit;}     .list-title:after {content: "+"; font-weight: bold; font-size: 18px; float:right;}     .opened:after {content: "-"; font-weight: bold; font-size: 18px; float:right;}     .nav-links {display: none;}     .nav-links li {font-size: inherit;}     .nav-links li:before {content: "► "; font-size: 11px;}     #content {margin:0; padding:15px;}     table {font-size:inherit;}     table tr.odd {background: #eeeeee;}     table th {font-weight:normal; text-align:left;}     #login {width: 100%; padding:20px; max-width:400px; margin:0 auto; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; font-size: inherit;}     .input {width: 100%; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; font-size: inherit;} }  @media screen , (min-device-width : 200px) , (max-device-width : 319px) {     #mobile-menu-icon, #mobile-profile-icon {display:block; float:right; height:40px; width:40px; margin: 13px 10px 5px 0px;} }  @media screen , (min-device-width : 425px) , (max-device-width : 600px) {     body, html {width:100%; margin: 0; font-size:15px;} }  @media screen , (min-device-width : 600px) , (max-device-width : 768px) {     body, html {width:100%; margin: 0; font-size:16px;}  }

    my search button aligned li. result that:

    enter image description here

    does have idea doing wrong?

    thanks

    • style search button this

    input.search_button {   color: black;    font-weight: bold;   font-size: 10px;   font-family: 'montserrat', arial;   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   border-radius: 2px;  }

    if want style 1 input add id , style id stated

    snippet 

    @import url(http://fonts.googleapis.com/css?family=montserrat);   body,  html {    height: 100%;    margin: 0;    font-size: 16px;  }  body {    font-family: arial;  }  header {    width: 100%;    background-image: url('img/top-bg.png');    background-repeat: repeat-x;    background-color: #dfebf2;    position: fixed;    height: 70px;    z-index: 2;  }  aside {    width: 270px;    min-height: 100%;    position: fixed;    background-color: #dfebf2;    left: 0;    max-height: 100%;    overflow-y: auto;    /* border-right: 1px solid #bdcada; */  }  section {    top: 70px;    left: 270px;    position: absolute;  }  h3 {    font-family: 'montserrat', arial;    text-transform: uppercase;    font-size: 15px;  }  select {    width: 230px;    height: 34px;    border: 1px solid #bdcada;    font-size: 14px;    font-weight: bold;    margin: 10px 0 0 0;    padding-left: 8px;    border-radius: 3px;  }  table,  th,  td {    border: 1px solid #bdcada;  }  input.search_button {    color: black;      font-weight: bold;    font-size: 10px;    font-family: 'montserrat', arial;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 2px;     }  .height-112px {    height: 112px;  }  #logo-box {    float: left;    margin-left: 20px;    margin-top: 10px;    width: 250px;  }    #mobile-menu-icon,  #mobile-profile-icon {    display: none;  }  #top-nav {    position: absolute;    width: 100%;    background-color: #282828;    min-height: 42px;    top: 70px;    color: #fff;  }  .top-nav-links {    list-style-type: none;    padding: 0px;    margin: 0px;    padding-left: 20px;    padding-right: 20px;    line-height: 42px;  }  .top-nav-links li {    font-weight: bold;    display: inline;    margin-right: 15px;    font-size: 10px;    text-transform: uppercase;    font-family: 'montserrat', arial;  }  .top-nav-links {    color: #676767;    text-decoration: none;  }  .top-nav-links a:hover {    color: #fff;  }  .active-top {    color: #fff;  }  #details-box {    padding: 30px 20px 30px 20px;    border-bottom: 1px solid #bdcada;  }  #height-5px {    height: 5px;  }  .details-1 {    font-weight: bold;    font-size: 14px;    color: #1072ad;  }  .details-2 {    font-style: italic;    font-size: 12px;    color: #9ca6b6;    margin-left: 10px;  }  .details-3 {    font-weight: bold;    font-size: 12px;    color: #000;    margin-left: 10px;  }  #details-box {    text-decoration: none;  }  .logout {    font-size: 11px;    color: red;  }  #property-box {    padding: 25px 20px 30px 20px;  }  .blue-nav-title {    font-family: 'montserrat', arial;    font-weight: bold;    font-size: 12px;    color: #1072ad;    text-transform: uppercase;  }  .list-title {    height: 42px;    background-image: url('img/top-bg.png');    padding: 0 20px 0 20px;    border-bottom: 1px solid #0b5987;    line-height: 42px;    font-family: 'montserrat', arial;    font-size: 12px;    color: #fff;    text-transform: uppercase;  }  .nav-links {    list-style-type: none;    padding: 0px;    margin: 0px;  }  .nav-links li {    font-size: 12px;    color: #6e7888;    padding-left: 20px;    line-height: 50px;    border-bottom: 1px solid #bdcada;  }  .nav-links {    text-decoration: none;    color: #6e7888;  }  .nav-links li:before {    content: "► ";    font-size: 7px;    color: #157cb8;    vertical-align: top;    margin-right: 8px;  }  .nav-links a:hover {    text-decoration: none;    color: #000;  }  .active {    background: #fff;  }  #content {    margin-left: 50px;    margin-top: 92px;  }  table {    font-size: 12px;    border-collapse: collapse;    width: 100%;    overflow-y: scroll;    height: 300px;    display: block;  }  table td,  th {    padding: 10px;  }  table tr:hover {    background: #f0f6f9;  }  .table-b {    font-size: 12px;    border-collapse: collapse;    width: auto;    height: auto;    display: block;  }  .table-b td,  th {    padding: 10px;  }  .table-b tr:hover {    background: #f0f6f9;  }  .table-a {    font-size: 12px;    border-collapse: collapse;    width: 100%;  }  .table-a td,  th {    padding: 10px;  }  .table-a tr:hover {    background: #f0f6f9;  }  form.searchform {    display: inline-block;  }  #login {    width: 240px;    border: 1px solid #bdcada;    border-radius: 3px;    padding: 30px;    font-size: 12px;  }  .input {    width: 230px;    height: 30px;    border: 1px solid #bdcada;    font-size: 14px;    font-weight: bold;    margin-top: 5px;    margin-bottom: 10px;    padding-left: 8px;    border-radius: 3px;  }  .divtable {    display: table;    width: auto;    background-color: #eee;    border: 1px solid #666666;    border-spacing: 5px;  }  .divrow {    display: table-row;    width: auto;    clear: both;    background-color: #ccc;  }  .divcell {    float: left;    display: table-column;    width: 100px;    border-left: 2px solid #fff;  }  /* columns float left while fit – spacing in there between columns*/    #column {    width: 48%;    float: left;    padding-right: 20px;  }  /*the table fill space of column – column starts @ 50% of screen width 2 can fit */    table {    width: 100%;    margin-bottom: 20px  }  /* responsive breakpoint – @ 1000px screen, tables no longer fit side side, auto-fit top-to-bottom, make them each full width */    @media screen , (max-width: 1000px) {    #column {      width: 100%;    }    @media screen , (max-device-width: 768px) {      body, html {        width: 100%;        margin: 0;        font-size: 14px;      }      header {        position: initial;        height: auto;      }      aside {        width: 100%;        position: initial;        min-height: initial;      }      section {        position: initial;      }      select {        width: 100%;        height: auto;        padding: 8px;        font-size: inherit;      }      .height-112px {        height: auto;      }      #logo-box {        float: none;        margin: 0px;        width: 100%      }      #logo-img {        margin: 10px 10px 5px 10px;      }      #mobile-menu-icon,      #mobile-profile-icon {        display: block;        float: right;        height: 45px;        width: 45px;        margin: 12px 12px 5px 0px;      }      #top-nav {        position: initial;        display: none;        clear: both;        border-bottom: 1px solid #bdcada;        background-color: inherit;        width: 100%;        min-height: inherit;      }      .top-nav-links li {        display: block;        width: 100%;        font-size: 16px;        line-height: 36px;      }      .top-nav-links li:first-child {        padding-top: 10px;      }      .top-nav-links li:last-child {        padding-bottom: 10px;      }      .top-nav-links {        color: #000;      }      .active-top {        color: #1067a6;      }      #details-box {        display: none;        padding: 20px;      }      .details-1,      .details-2,      .details-3,      .logout {        font-size: inherit;      }      #property-box {        padding: 20px;      }      .blue-nav-title {        font-family: 'montserrat', arial;        font-weight: bold;        font-size: inherit;        color: #1072ad;        text-transform: uppercase;      }      .list-title {        font-size: inherit;      }      .list-title:after {        content: "+";        font-weight: bold;        font-size: 18px;        float: right;      }      .opened:after {        content: "-";        font-weight: bold;        font-size: 18px;        float: right;      }      .nav-links {        display: none;      }      .nav-links li {        font-size: inherit;      }      .nav-links li:before {        content: "► ";        font-size: 11px;      }      #content {        margin: 0;        padding: 15px;      }      table {        font-size: inherit;      }      table tr.odd {        background: #eeeeee;      }      table th {        font-weight: normal;        text-align: left;      }      #login {        width: 100%;        padding: 20px;        max-width: 400px;        margin: 0 auto;        box-sizing: border-box;        -moz-box-sizing: border-box;        -webkit-box-sizing: border-box;        font-size: inherit;      }      .input {        width: 100%;        box-sizing: border-box;        -moz-box-sizing: border-box;        -webkit-box-sizing: border-box;        font-size: inherit;      }    }    @media screen , (min-device-width: 200px) , (max-device-width: 319px) {      #mobile-menu-icon, #mobile-profile-icon {        display: block;        float: right;        height: 40px;        width: 40px;        margin: 13px 10px 5px 0px;      }    }    @media screen , (min-device-width: 425px) , (max-device-width: 600px) {      body, html {        width: 100%;        margin: 0;        font-size: 15px;      }    }    @media screen , (min-device-width: 600px) , (max-device-width: 768px) {      body, html {        width: 100%;        margin: 0;        font-size: 16px;      }    }    body{    background:black}      
    <li>    <form class="searchform" name="search" action="./index.cfm?p=128" method=post>      <input type="text" name=search value="" style="color: #676767; background-color: #282828; line-height: 18px" size="10" maxlength="40" placeholder="search">      <input class="search_button" type=submit name="submitbutton1" value="search" id="submitbutton1">    </form>  </li>


    -

    Comments

    Post a Comment

    Popular posts from this blog

    java - SSE Emitter : Manage timeouts and complete() -

    i writing web app multiple listeners(evcentsource sse clients js) connected server . want store sse emitter per connected listener : can done in memory or other means assigning id each client able achieve far now question ; how send response/event specific client connected web app ? while doing sseemmiters stored either getting completed or timed out. how prevent ? how keep sseemmiter available open infinite time (till client closes) , send events selectively .
    Read more

    jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

    i'm trying implement crud operation using datatableseditor using datatables.but i'm getting error messages: 1)uncaught exception: datatables editor - remote hosting of code not allowed. please see http://editor.datatables.net details on how purchase editor license 2)typeerror: a.editor undefined 3) $.fn.datatable.editor not constructor" what reason? here configuration: <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css"> <link re...
    Read more

    java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -

    i trying convert json java object use of gson in maven, following youtube video guidance - https://www.youtube.com/watch?v=vqgghm9pwe0 , theres error occurs when in main class error - package com.squareup.okhttp3 doesn't exist. code below: java package com.codebeasty.json; import com.squareup.okhttp3.okhttpclient; public class main { private static okhttpclient client = new okhttpclient(); public static void main (string [] args) { } } i put in dependency in pom.xml: <dependencies> <dependency> <groupid>com.squareup.okhttp3</groupid> <artifactid>okhttp</artifactid> <version>3.4.2</version> </dependency> <dependency> <groupid>com.google.code.gson</groupid> <artifactid>gson</artifactid> <version>2.8.0</version> </dependency> </dependencies> i dont understand why doesn't recognize com.squareup. there may need download? have downl...
    Read more