i want to fix the header so it will be there even if i scrolled down
i tried to use position:fixed
<header style="margin-bottom: 1cm; position: fixed; ">
<div style="float:left;" align="left">Instagram User Explorer</div>
<div align="center">
<form name="contact" id="contact" method="get">
Search : <input type="text" name="keyword" id="keyword"/>
<input type="button" value="search!" name="submit" id="submit"/>
</form>
</div>
</header>
but the textfield and button wnt down i dont know why
and what i want is to be in the same line
<header style="margin-bottom: 1cm;">
<div style="float:left;" align="left">Instagram User Explorer</div>
<div align="center">
<form name="contact" id="contact" method="get">
Search : <input type="text" name="keyword" id="keyword"/>
<input type="button" value="search!" name="submit" id="submit"/>
</form>
</div>
</header>
like this :
how to do it ?
Fiddle is here
you need to do a little more work with css to get that effect, the background is just added for visibility in the fiddle. your body needs a margin that can clear the fixed header as well, as seen in .body class below
.header {
height: 50px;
position:fixed;
width: 100%;
background: #ddd;
top: 0;
}
.body {
margin-top: 70px;
}
<header style="margin-bottom: 1cm;">
<div style="float:left;">Instagram User Explorer</div>
<div style="float:right;">
<form name="contact" id="contact" method="get">
Search : <input type="text" name="keyword" id="keyword"/>
<input type="button" value="search!" name="submit" id="submit"/>
</form>
</div>
</header>
Related
I want to align this:
HTML view
to this but on the center of website:
Desired result
but It goes to left margin instead:
The reality
How can I make this one to be on the center of website?
I have tried using some combinations and different attributes but the result did not change.
.container{
text-align: center;
position:relative;
}
.inputArea{
margin: auto;
display: flow;
}
.deleteArea{
margin:auto;
display:inline-block;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
What should I change in my code to achieve the desired result?
Do you intend to achieve something like this? One option could be to use css grid...
.container{
text-align: center;
position: relative;
}
.inputArea form {
margin: auto;
display: inline-grid;
grid-template-columns: auto auto auto minmax(0px, 100px);
text-align: left;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<div><input type="submit" th:id="addWord" value="add" /></div>
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<div><input type="submit" th:id="deleteWord" value="delete" /></div>
</form>
</div>
</div>
Here is another way to do it. Have you tried this?
.container {
width: 100%;
}
.container-inner {
margin: 0 auto;
display: table;
}
<div class="container">
<div class="container-inner">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
</div>
I have a bootstrap form with the following css code in it. I have tried to close up the blank spaces in the form by adding margin:0 attribute but still the spaces between the element is there.
css form code
<div class="row-fluid">
<form style="width: 90%; height: 100%; margin-top:1px;" method="post"novalidate="novalidate" class="form well">
<div class="row-fluid">
<div>
<label for="complaints">Message *</label>
<textarea style="width:100%;" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input style="width:100%; background-color:#da291c;" class="btn btn-primary" name="commit" type="submit" value="Send">
</div>
</form>
</div>
this is the picture of the above form
My challenge is to close the gaps on the areas pointed with arrows.
I am using this version of bootstrap
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
You can remove the margin-bottom that bootstrap adds to the class .control-group
.row-fluid div.control-group, div.form-actions {
margin-bottom: 0px;
}
div.my-form{
padding-bottom: 0px;
margin-top:0px;
padding-top:0px;
}
.control-group input,.control-group textarea{
margin-bottom: 0px;
}
form.form{
padding-bottom: 0;
padding-top:0;
}
UPDATED jsfiddle with your code
You can use this code:
input[type=text], .txtarea{
margin-bottom: 10px;
}
In bootstrap already they keep on the margin property always. we can overwrite that to solve your problem.
you need to add one class like this:
.splclass{
margin:0 !important;
padding:0 !important;
}
Add additionally in the form inline style like this:
<form style="width: 90%; height: 100%; margin-top:1px; padding-top:5px;" method="post"novalidate="novalidate" class="form well ">
i think it will helpful
Well if you don't want any space in between, you definitely don't want any margin. Move the CSS to it's own file:
.send {
width:100%;
background-color:#da291c;
}
.message {
width:100%;
}
.form {
width: 90%;
height: 100%;
margin: 0;
}
and html:
<div class="row-fluid">
<form class="form" method="post" novalidate="novalidate" class="form well">
<div class="row-fluid">
<div class="control-group span12">
<label for="name">Name *</label>
<input ng-model="name" name="name" type="text" class="input-block-level" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="email">Email *</label>
<input name="email" placeholder="" type="email" class="input-block-level" ng-model="email"ng-change="id=email" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="complaints">Message *</label>
<textarea class="message" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary send" name="commit" type="submit" value="Send">
</div>
</form>
</div>
and you can see the fiddle here: https://jsfiddle.net/6j98311j/
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row
I have this search button that is really giving me a hard time. I am trying to get it to line up properly with the search input area and when I finally got it to work in Firefox, it decided to get all weird in Chrome. Its like something is pushing the button down when viewed in Chrome.
Here is my HTML:
<div id="searchCon">
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div>
<label class="screen-reader-text" for="s">Search Our Site:</label>
<input type="text" value="" name="s" id="s">
<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; float: right;">
</div>
</form>
</div>
Here is my CSS:
#searchCon {
float: right;
display: inline-block;
height:37px;
padding: 0px 10px 10px 280px;
color:#2a2a2a;
}
I have been reading tons of forums, articles, etc and cannot get this little button to work properly in Chrome.
Please help me out!
Try this:
HTML:
<div id="searchCon">
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div style="float:left">
<label class="screen-reader-text" for="s">Search Our Site:</label>
<input type="text" value="" name="s" id="s" />
</div>
<div style="float:right;padding-top:2px">
<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; " />
</div>
</form>
</div>
CSS:
#searchCon {
float: right;
display: inline-block;
height:37px;
padding: 0px 10px 10px 0px;
color:#2a2a2a;
}
Can someone help to change this to incorporate an image called BUTTON1.JPG instead of the standard submit button?
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<div class="style7">
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</div>
</form>
Use an image type input:
<input type="image" src="/Button1.jpg" border="0" alt="Submit" />
The full HTML:
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<div class="style7">
<input type='text' id='userInput' name='userInput' value=''>
<input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />
</div>
</form>
Why not:
<button type="submit">
<img src="mybutton.jpg" />
</button>
Use CSS :
input[type=submit] {
background:url("BUTTON1.jpg");
}
For HTML :
<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">
Just remove the border and add a background image in css
Example:
$("#form").on('submit', function() {
alert($("#submit-icon").val());
});
#submit-icon {
background-image: url("https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455__340.jpg"); /* Change url to wanted image */
background-size: cover;
border: none;
width: 32px;
height: 32px;
cursor: pointer;
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="submit" id="submit-icon" value="test">
</form>
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<div class="style7">
<input type='text' id='userInput' name='userInput' value=''>
<img src="BUTTON1.JPG" onclick="document.forms['formName'].submit();">
</div>
</form>
HTML:
<button type="submit" name="submit" class="button">
<img src="images/free.png" />
</button>
CSS:
.button { }