I asked the same question before, but i made code changes from the past. I still have the same problem of adjusting the div size.
I am trying to design a login page, the screenshot is below.
http://prntscr.com/2pksiq (latest)
Where as i want the output as http://prntscr.com/2pga73 . I am trying to reduce the size of the tags
<div id="logo" class="logo col-xs-2"></div>
<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>
I am new to CSS, please suggest me a way to fix this. I am using twitter bootstrap in my project.
I have the below HTML:
<head>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"></script>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet">
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/styles.css"rel='stylesheet' type='text/css' href='styles.css' />
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<title>Local-Adventures</title>
<div class="visible-xs stop-detail">
<div id="login-form">
<div class="logo col-xs-4"></div>
<div class="page-title green-bg col-xs-8">Local Adventures</div>
Create an Account
Sign In
<input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
<input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">
<input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' ">
<br><br>
<span class='btn btn-lg btn-success btn-block'>Create An Account</span>
<span class='btn btn-lg btn-primary btn-block'>Facebook Login</span>
</div> <!-- end login-form -->
</div>
My CSS is below:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
/*
body {
background: #FFFFFF;
color: #999;
font: 100%/1.5em sans-serif;
margin: 0;
}
*/
a {
color: #2a2a2a;
text-decoration: none;
margin:1px 33;
}
a:hover { color: #88c425; }
fieldset {
border: none;
margin: 0;
}
.btn-success {
border-radius:0px;
background-color: #88c425
}
.btn-success:hover {
background-color: #88c425
}
.btn-primary {
border-radius:0px;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
margin: 0;
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="submit"] { cursor: pointer; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
/* ---------- LOGIN-FORM ---------- */
#login-form {
margin: 50px auto;
width: 300px;
}
#login-form h3 {
background-color: #79a002;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 14px;
padding: 20px;
text-align: center;
text-transform: uppercase;
}
#login-form fieldset {
background: #fff;
border-radius: 0 0 -1px -1px;
padding: 0px;
}
#login-form fieldset:before {
background-color: #fff;
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
#login-form input {
font-size: 14px;
}
#login-form input[type="email"], #login-form input[type="password"] {
border:none; /* clear previous borders */
border-bottom: 1px solid #88c425; /* add bottom border */
padding: 12px 10px;
width: 300px;
}
#login-form input[type="email"] {
border-radius: 3px 3px 0 0;
}
#login-form input[type="password"] {
border-top: none;
border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
background: #1dabb8;
border-radius: 3px;
color: #fff;
float: right;
font-weight: bold;
margin-top: 20px;
padding: 12px 20px;
}
You can use a developer tool to see what is effecting each element. For example in Firefox if you right click on any thing on the page and press inspect element, it will show you what css attributes are applied to it, what tags they are under and even what css document they are in and the line they are on! from there you can go into your css and change it or even change things on the live page itself in the inspect element panel to give yourself a preview of what you want to do.
Another good tool you should learn to use is firebug, try downloading it and practice using it.
Fiddle: http://jsfiddle.net/Varinder/ndcad/
Frameworks like bootstrap are generally agnostic of requirement wider than basic web app or control elements etc
In your case, specific header stylings etc would be a bit of a pain in the neck to acomplish via a framwork.
It's always a good idea to rely on frameworks as little as possible.
Following will put you in right direction:
HTML
<div class="login-form-header">
<div class="logo">
<img src="http://placehold.it/50x50" />
</div>
<h2 class="page-title green-bg">Local Adventures</h2>
</div>
Shying away from using grid classes as they wont fit in here.
CSS
.login-form-header {
overflow:hidden; /* clearfix */
background:#88C425;
}
.logo {
float:left;
}
.page-title {
margin:0;
white-space:nowrap;
text-overflow:ellipsis;
color:white;
line-height:50px; /* height of the logo image to center text verticaly */
margin-left:60px;
}
Related
I am trying to make a login form. The outer box of the form is big and does not fit with the input field. How can I minimize the size of the outer box? I am trying it for the first time. So, I have no idea.
templatemo_style.css: The css part
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 10px 5px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
align-content: center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 80px;
height: 25px;
padding: 3px 22px 0 0;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
margin: 25px auto;
position: relative;
width: 900px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
index.jsp: Html code for the form
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Student Profile</title>
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="index.jsp">
<div class="container">
Username:
<input type="text" placeholder="Enter Username" name="uname" required>
Password:
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</body>
</html>
One way to achieve this is
Change the Html Like this
<div class="container">
<form action="index.jsp">Username:
<input type="text" placeholder="Enter Username" name="uname" required>
Password:
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<div style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
And your css Like this
form {
border: 3px solid #f1f1f1;padding: 10px;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 10px 5px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
align-content: center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 80px;
height: 25px;
padding: 3px 22px 0 0;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
margin: 25px auto;
position: relative;
width: 900px;
}
enter code here
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
the result will be
hope this will do
If you put your <form> tag inside the <div class="container"> tag, the outline only goes around the form.
<body>
<div class="container">
<form action="index.jsp">
Username: ...
You might want to add some padding to make it look nice, too ;)
Also, please don't have a stroke to be able to ask your question. The "It looks like your post is mostly code; please add some more details." warning is there for a reason.
I am a beginner in coding, and I have to create a website for a school project. I tried to resolve the problem myself but it just don't work.
I wanted to add a search bar to my website so I followed a tutorial, and it worked on a blank new html page, but when I copied paste on my html page project I have this lightgray frame that comes around the search bar , where does it come from and what to delete/change ? thank you :)
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 01-mars-2017, 14:52:23
Author : jonathan
*/
/* syling my paragraphs */
div {
font-family:Times New Roman;
}
body {
font-family: Arial;
background-color: white;
}
p {
color: darkgreen;
font-size:30px;
font-family:Arial;
}
.highlight {
color:darkgray;
}
/* styling navigation */
#search {
width: 200px;
padding: 7px;
}
#submit {
padding: 7px;
background: #669999;
color: white;
margin-letf: -5px;
cursor: pointer
}
#submit:hover {
background:#333;
transition: all 0.40s;
}
.header-logo {
display:block;
height:240px;
width:240px;
background:url(images/wolf.png) no-repeat;
text-indent:50%;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
}
nav {
border-bottom:2px solid black;
border-bottom-color: #669999;
}
li{
display:inline-block;
text-align: center;
margin-right:20px;
}
nav a:link, nav a:visited {
color:gray;
font-size:15px;
text-decoration: none;
}
nav a:hover {
background-color: #99ddff;
}
nav a:active {
background-color: yellow
}
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title> HTML by Jo</title>
<meta charset="UTF-8">
<meta name="description" content="I by mistake deleted all the files
so i'm starting all over again">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="wolf.css">
</head>
<body>
<!-- navigation -->
<header>
<h1>
<a class="header-logo" href="http://localhost:8383/Grey%20wolf/index.html"></a>
</h1>
</header>
<nav>
<div style="text-align:center">
<ul>
<li>Login</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul></div>
<form action="https://google.com">
<input type="text" placeholder="Search..." maxlength="20" id="search">
<input type="submit" value="Go!" id="submit">
</form>
</nav>
<!-- the content -->
<div>TODO write content</div>
<p>Here is a paragraph.</p>
<p class="highlight">Another paragraph.</p>
<h3 class="highlight">this is a heading h3</h3>
link to codeacademy
</body>
</html>
Your form has this property set there:
form{
border: 3px solid #f1f1f1;
}
To fix it change it to:
form{
border: 0;
}
or try using the parent element which is the better way to go,
nav form{
border: 0;
}
thanks for your answers it works :)
I tried to modify the different borders but I have actually not seen that one :/
and now I try to add pictures but the browser doesn't show them what should I do ?
I place this before a paragraph :
<img src="images/model1.jpg" alt="model women 1">
<img src="images/model2.jpg" alt="model women 2">
<img src="images/model3.jpg" alt="model women 3">
Have you even taken a look to your CSS? It's fairly commented
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
It appears to be the border of nav. Try the following CSS:
nav {
border-bottom: none;
}
I am trying to design a login page, the screenshot is below.
http://prntscr.com/2pksiq
Where as i want the output as http://prntscr.com/2pga73 . I am trying to reduce the size of the tags
<div id="logo" class="logo col-xs-2"></div>
<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>
I am new to CSS, please suggest me a way to fix this. I am using twitter bootstrap in my project.
I have the below HTML:
<div class="visible-xs stop-detail">
<head>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"></script>
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet">
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/styles.css"rel='stylesheet' type='text/css' href='styles.css' />
<link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet">
</head>
<meta charset="utf-8">
<title>Local-Adventures</title>
<div id="login-form">
<div class="logo col-xs-4"></div>
<div class="page-title green-bg col-xs-8">Local Adventures</div>
Create an Account
Sign In
<input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
<input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">
<input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' ">
<br><br>
<span class='btn btn-lg btn-success btn-block'>Create An Account</span>
<span class='btn btn-lg btn-primary btn-block'>Facebook Login</span>
</div> <!-- end login-form -->
</div>
My CSS is below:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
/*
body {
background: #FFFFFF;
color: #999;
font: 100%/1.5em sans-serif;
margin: 0;
}
*/
a {
color: #2a2a2a;
text-decoration: none;
margin:1px 33;
}
a:hover { color: #88c425; }
fieldset {
border: none;
margin: 0;
}
.btn-success {
border-radius:0px;
background-color: #88c425
}
.btn-success:hover {
background-color: #88c425
}
.btn-primary {
border-radius:0px;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
margin: 0;
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="submit"] { cursor: pointer; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
/* ---------- LOGIN-FORM ---------- */
#login-form {
margin: 50px auto;
width: 300px;
}
#login-form h3 {
background-color: #79a002;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 14px;
padding: 20px;
text-align: center;
text-transform: uppercase;
}
#login-form fieldset {
background: #fff;
border-radius: 0 0 -1px -1px;
padding: 0px;
}
#login-form fieldset:before {
background-color: #fff;
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
#login-form input {
font-size: 14px;
}
#login-form input[type="email"], #login-form input[type="password"] {
border:none; /* clear previous borders */
border-bottom: 1px solid #88c425; /* add bottom border */
padding: 12px 10px;
width: 300px;
}
#login-form input[type="email"] {
border-radius: 3px 3px 0 0;
}
#login-form input[type="password"] {
border-top: none;
border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
background: #1dabb8;
border-radius: 3px;
color: #fff;
float: right;
font-weight: bold;
margin-top: 20px;
padding: 12px 20px;
}
If you use Bootstrap, you had configurate before download it your GRID
It seems do be like a 12 Grid.
you used :
<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>
it should be :
<div id="title" class="page-title green-bg col-xs-4">Local Adventures</div>
you take 8 pieces from a 12 piece cake, so its larger. just take the half and you will get the same width you want for.
And please, if you use a mighty framework like bootstrap, dont overwrite its own classes with ids or something, its bad practise!
Maybe your bootstrap is overriding your css? Try putting important at the end:
#title{
width: 400px !important;
height: 90px !important;
}
I'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
The community is reviewing whether to reopen this question as of 3 days ago.
Improve this question
How do I visually place a button inside an input element as shown below?
The user should be able to interact with the input as normal. The text shouldn't go behind the button, even when it's long. Focus should work correctly. The form should be accessible and work correctly in screen readers. The whole component should be styleable with CSS, and should be able to easily resize to fit the space available.
How do I accomplish this with modern CSS?
The button isn't inside the input. Here:
input[type="text"] {
width: 200px;
height: 20px;
padding-right: 50px;
}
input[type="submit"] {
margin-left: -50px;
height: 20px;
width: 50px;
}
Example: http://jsfiddle.net/s5GVh/
Use a Flexbox, and put the border on the form.
The best way to do this now (2022) is with a flexbox.
Put the border on the containing element (in this case I've used the form, but you could use a div).
Use a flexbox layout to arrange the input and the button side by side. Allow the input to stretch to take up all available space.
Now hide the input by removing its border.
Run the snippet below to see what you get.
form {
/* This bit sets up the horizontal layout */
display:flex;
flex-direction:row;
/* This bit draws the box around it */
border:1px solid grey;
/* I've used padding so you can see the edges of the elements. */
padding:1px;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
/* remove the input focus blue box, it will be in the wrong place. */
input:focus {
outline: none;
}
/* Add the focus effect to the form so it contains the button */
form:focus-within {
outline: 1px solid blue
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}
<form>
<input />
<button>Go</button>
</form>
Why this is good
It will stretch to any width.
The button will always be just as big as it needs to be. It won't stretch if the screen is wide, or shrink if the screen is narrow.
The input text will not go behind the button.
Caveats and Browser Support
There's limited Flexbox support in IE9, so the button will not be on the right of the form. IE9 has not been supported by Microsoft for some years now, so I'm personally quite comfortable with this.
I've used minimal styling here. I've left in the padding to show the edges of things. You can obviously make this look however you want it to look with rounded corners, drop shadows, etc..
.flexContainer {
display: flex;
}
.inputField {
flex: 1;
}
<div class="flexContainer">
<input type="password" class="inputField">
<button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>
</div>
I found a great code for you:
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
CSS
/*Clearing Floats*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover {
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus {
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before {
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
Demo: On fiddle
Source: Speckyboy
This is the cleanest way to do in bootstrap v3.
<div class="form-group">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
</div>
</div>
This can be achieved using inline-block
JS fiddle here
<html>
<body class="body">
<div class="form">
<form class="email-form">
<input type="text" class="input">
Button
</form>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.form {
display: block;
margin: 0 0 15px;
}
.email-form {
display: block;
margin-top: 20px;
margin-left: 20px;
}
.button {
height: 40px;
display: inline-block;
padding: 9px 15px;
background-color: grey;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
}
.input {
display: inline-block;
width: 200px;
height: 40px;
margin-bottom: 0px;
padding: 9px 12px;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
line-height: 1.42857143;
}
</style>