html - Ensure Dynamic inputs fill 50% of browser width -


this time i've got problem input boxes. if add 3 of them, they're taking 50% of browser window in width. when add more, stretching on sides. want them fit in 50% of browser window no matter how many of them here. solutions?

page1 (normal)

* {    box-sizing: border-box;  }  h1 {    font-family: verdana, tahoma, sans-serif;    font-size: 150px;    font-style: normal;    font-weight: 400;    line-height: 170px;    letter-spacing: -8px;    border: 10px solid #66004c;  }  input {    margin: auto;    padding: 25px;    font: normal 15px verdana, tahoma, sans-serif;    width: 100%;    border-left: solid 5px #66004c;    border-right: 0;    border-top: 0;    border-bottom: solid 3px #66004c;    background: #cdcdcd;    -webkit-transition: 0.2s linear;    -moz-transition: 0.2s linear;    -ms-transition: 0.2s linear;    -o-transition: 0.2s linear;    transition: 0.2s linear;  }  input:hover,  input:focus {    -webkit-background: #c299b7;    -moz-background: #c299b7;    background: #c299b7;  }
<div style="float: left; position: relative; left: 50%;">    <div style="float: left; position: relative; left: -50%;">      <h1 align="center">log in</h1>      <form action="" method="post">        <input type="text" name="username" placeholder="username">        <input type="password" name="password" placeholder="password">        <input type="submit" value="log in" style="background: #66004c; color: #efefef;">        <br>      </form>      <form action="http://www.reflinks.cba.pl/register.php">        <!--oooooooooooooooooooooooo--------important change--------->        <input type="submit" value="don't have account yet? register!" style="border-bottom: solid 5px #66004c;">      </form>    </div>  </div>

page2 (extra wide)

* {    box-sizing: border-box;  }  h1 {    font-family: verdana, tahoma, sans-serif;    font-size: 150px;    font-style: normal;    font-weight: 400;    line-height: 170px;    letter-spacing: -8px;    border: 10px solid #66004c;  }  input {    margin: auto;    padding: 25px;    font: normal 15px verdana, tahoma, sans-serif;    width: 100%;    border-left: solid 5px #66004c;    border-right: 0;    border-top: 0;    border-bottom: solid 3px #66004c;    background: #cdcdcd;    -webkit-transition: 0.2s linear;    -moz-transition: 0.2s linear;    -ms-transition: 0.2s linear;    -o-transition: 0.2s linear;    transition: 0.2s linear;  }  input:hover,  input:focus {    -webkit-background: #c299b7;    -moz-background: #c299b7;    background: #c299b7;  }
<div style="float: left; position: relative; left: 50%;">    <div style="float: left; position: relative; left: -50%;">      <h1 align="center">register</h1>      <form action="" method="post">        <input type="text" name="username" placeholder="username">        <input type="password" name="reg_password" placeholder="password">        <input type="password" name="reg_password_repeat" placeholder="repeat password">        <input type="email" name="email" placeholder="your email">        <input type="submit" value="register" style="background: #66004c; color: #efefef;">        <br>      </form>      <form action="http://www.reflinks.cba.pl/index.php">        <input type="submit" value="already have account? log in!" style="border-bottom: solid 5px #66004c;">      </form>    </div>  </div>

perhaps may work you:

* {  	box-sizing: border-box;  }  h1 {  	font-family: verdana, tahoma, sans-serif;  	font-size: 150px;  	font-style: normal;  	font-weight: 400;  	line-height: 170px;  	letter-spacing: -8px;  	border: 10px solid #66004c;  }  input {  	margin: auto;  	padding: 25px;  	font: normal 15px verdana, tahoma, sans-serif;  	width: 100%;  	border-left: solid 5px #66004c;  	border-right: 0;  	border-top: 0;  	border-bottom: solid 3px #66004c;  	background: #cdcdcd;  	-webkit-transition: 0.2s linear;  	-moz-transition: 0.2s linear;  	-ms-transition: 0.2s linear;  	-o-transition: 0.2s linear;  	transition: 0.2s linear;  }  input:hover, input:focus {  	-webkit-background: #c299b7;  	-moz-background: #c299b7;  	background: #c299b7;  }
<div style="width: 50%; margin: 0 auto;">  	<h1 align="center">log in</h1>  	<form action="" method="post">  		<input type="text" name="username" placeholder="username">  		<input type="password" name="password" placeholder="password">  		<input type="submit" value="log in" style="background: #66004c; color: #efefef;">  		<br>  	</form>  	<form action="http://www.reflinks.cba.pl/register.php">  		<!--oooooooooooooooooooooooo--------important change--------->  		<input type="submit" value="don't have account yet? register!" style="border-bottom: solid 5px #66004c;">  	</form>  </div>


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more