html - Why does my border go over my form? -


when make browser window smaller border not stay around form, instead overlap? sentence. how make border stay around the form , have border height adjust length of form padding?

#form_border{      margin: auto;      width: 400px;             border-style: solid;      border-color: black;      border-width: 1px;                  }  #form {              width: 50%;      height: 50%;      margin: auto;      padding-top: 2em;      text-align: center;                        }  #form form{display: block;}  #existing_account{ text-align: center;                     text-decoration: none;                     color: black;  }            input[type=submit] {                      background:white;                      border:1px solid;                      border-color: #292929;                      cursor:pointer;                      border-radius: 5px; }         input[type=submit] {                      background:white;                      border:1px solid;                      border-color: #292929;                      cursor:pointer;                      border-radius: 5px; }
<div id="form_border">      <form id="form" method="post" action="">          <p>username:<br> <input type="text" name="user_name" /> <br></p>          <p>password:<br> <input type="password" name="user_pass"><br></p>          <p>password again:<br> <input type="password" name="user_pass_check"><br></p>          <p>e-mail:<br> <input type="email" name="user_email"><br></p>          <input type="submit" value="sign up" />       </form>          <a id="existing_account" href="sign_in.php">already have account?</a>      </div>

try using code:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <style> #form_border{     margin: auto;     width: 400px;      border-style: solid;     border-color: black;     border-width: 1px; } #form {     width: 50%;     height: 50%;     margin: auto;     padding-top: 2em;     text-align: center; } #form form{     display: block; } #existing_account{      text-align: center;     text-decoration: none;     color: black; } input[type=submit] {     background:white;     border:1px solid;     border-color: #292929;     cursor:pointer;     border-radius: 5px;  }    @media screen , (max-width:399px){     input[type="text"],     input[type="password"],     input[type="email"]{         width:90%;     }     #form_border{         width:98%;     }     #form {         width: 50%;         height: 50%;     } } </style> </head> <body> <div id="form_border">     <form id="form" method="post" action="">         <p>username:<br> <input type="text" name="user_name" /> <br></p>         <p>password:<br> <input type="password" name="user_pass"><br></p>         <p>password again:<br> <input type="password" name="user_pass_check"><br></p>         <p>e-mail:<br> <input type="email" name="user_email"><br></p>         <input type="submit" value="sign up" />      </form>         <a id="existing_account" href="sign_in.php">already have account?</a>     </div> </body> </html>

you observe:

  1. i have introduced media query manage form size screens less 400px in width.
  2. width of form , form-elements has been taken care of in media query.

scope improvements:

  1. restructure html becomes more manageable.

  2. use media queries more efficiently.

  3. use width values more efficiently.

you use jsfiddle.net demo link.

here few more commonly used media query break points may consider including in css

/* smartphones (portrait , landscape) ----------- */ @media screen , (min-device-width : 320px) , (max-device-width : 480px) { /* styles */ }  /* smartphones (landscape) ----------- */ @media screen , (min-width : 321px) { /* styles */ }  /* smartphones (portrait) ----------- */ @media screen , (max-width : 320px) { /* styles */ }  /* ipads (portrait , landscape) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) { /* styles */ }  /* ipads (landscape) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) { /* styles */ }  /* ipads (portrait) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) { /* styles */ } /********** ipad 3 **********/ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ }  @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ } /* desktops , laptops ----------- */ @media screen  , (min-width : 1224px) { /* styles */ }  /* large screens ----------- */ @media screen  , (min-width : 1824px) { /* styles */ }  /* iphone 4 ----------- */ @media screen , (min-device-width : 320px) , (max-device-width : 480px) , (orientation : landscape) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ }  @media screen , (min-device-width : 320px) , (max-device-width : 480px) , (orientation : portrait) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ }  /* iphone 5 ----------- */ @media screen , (min-device-width: 320px) , (max-device-height: 568px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 320px) , (max-device-height: 568px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* iphone 6 ----------- */ @media screen , (min-device-width: 375px) , (max-device-height: 667px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 375px) , (max-device-height: 667px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* iphone 6+ ----------- */ @media screen , (min-device-width: 414px) , (max-device-height: 736px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 414px) , (max-device-height: 736px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* samsung galaxy s3 ----------- */ @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* samsung galaxy s4 ----------- */ @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 3){ /* styles */ }  @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 3){ /* styles */ }  /* samsung galaxy s5 ----------- */ @media screen , (min-device-width: 360px) , (max-device-height: 640px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 3){ /* styles */ }  @media screen , (min-device-width: 360px) , (max-device-height: 640px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 3){ /* styles */ }

-

Comments

Post a Comment

Popular posts from this blog

python - Creating a new virtualenv gives a permissions error -

i'm getting following output when running virtualenv newvenv . traceback (most recent call last): file "/usr/local/bin/virtualenv", line 5, in <module> pkg_resources import load_entry_point file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2727, in <module> add_activation_listener(lambda dist: dist.activate()) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 700, in subscribe callback(dist) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2727, in <lambda> add_activation_listener(lambda dist: dist.activate()) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2227, in activate self.insert_on(path) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2334, in insert_on self.check_version_conflict() file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2373, in check_version_conflict...
Read more

facebook - android ACTION_SEND to share with specific application only -

in android application have 4 buttons facebook , viber , telegram , whatsapp , want share different content based on each button. for example if user clicks on viber button want user action_send share content viber only. i found this explains how facebook , twitter seems it's calling specific class name of application don't know applications wanna use except facebook. all android apps have unique id, first have check if these apps installed in user's device , can pass unique id via intent sharing. according below: unique ids different apps : viber : com.viber.voip telegram : org.telegram.messenger whatsapp : com.whatsapp check if these apps installed , if installed send messages through intent. private void sendmessage(context context,string message, string appids) { final boolean isappinstalled =isappavailable(context, appids); if (isappinstalled) { intent myintent = new intent(intent.action_send); myintent.settype("text/p...
Read more

go - Idiomatic way to handle template errors in golang -

say have html/template following: <html> <body> <p>{{somefunc .somedata}}</p> </body> and somefunc returns error. there idiomatic way deal this? if write directly responsewriter , status code 200 has been written before encounter error. var tmpl *template.template func handler(w http.responsewriter, r *http.request) { err := tmpl.execute(w, data) // "<html><body><p>" has been written... // err? } preferably return status code 400 or such, can't see way if use template.execute directly on responsewriter . there i'm missing? since template engine generates output on-the-fly, parts of template preceding somefunc call sent output. , if output not buffered, (along http 200 status) may sent. you can't that. what can perform check before call template.execute() . in trivial case should enough call somefunc() , check return value. if choose path , return value of somefunc() c...
Read more