on this page: http://growthbay.ch/
I have a small email field plus subscribe button embedded, but I would like to show the subscribe button right next to the email input field with a bit of a margin to the left of the subscribe button.
I am using this code:
<label><strong>Get the latest jobs in your inbox!</strong></label>
<input style="width:auto !important" type="email" name="EMAIL" placeholder="your#email.com" required />
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe" />
What am I doing wrong?
thanks folks!
Sandro
Try display: inline-block; instead of display:block from your css
I believe you missed display: inline-block on the email field. Just add it, and it should work!
Also (albeit not related to your problem), you did not apply styles to the "Subscribe" button in the correct way: what you have is
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe"/>
while it should be:
<input style="display: inline-block; position: relative; margin-left: 5px; vertical-align: top;" type="submit" value="Subscribe"/>
In general, however, I recommend using external CSS and referencing your element with classes.
Let me know if it worked!
Related
I have a basic HTML page with two input fields, one text and one button. When the textfield has the focus I want the button to be hidden. I have it working fine providing I do not add any more HTML code (which I wish to do) between the two input tags.
I know I could do this with jQuery but ideally I would prefer a CSS based solution.
<style>
input[type="text"]:focus + input[name="submitButton"]{
visibility: hidden;
}
</style>
<input type="text" />
<input type="submit" name="submitButton" />
If I add the additional two statements between the two tags it fails to work.
<input type="text" />
<br/><br/>
<input type="submit" name="submitButton" />
I know I could use jQuery but i would prefer a CSS solution.
Thanks.
man... i solved your problem
HTML
<input type="text" />
<br/><br/>
<input type="submit" class="btn" name="submitButton" />
CSS
input[type=text]:focus ~ input[type=submit]
{
visibility:hidden;
}
vote if it helps
Target the submit button with a class... dont give input[name,=""]
.
Instead give classname... i think + selector is the problem.. it is searching for immediate adjacent input tags..and it fails to fetch becoz of br tag inbetween....
So target with classname
You can keep your CSS and add the line break spacing for the text field in CSS. See an example without having to use<br> tags.
input[type="text"]:focus+input[name="submitButton"] {
visibility: hidden;
}
input[type="text"] {
display: block;
margin-bottom: 15px;
}
<input type="text" />
<input type="submit" name="submitButton" />
I have HTML tag in my JSP page like this:
<form action="updateaddr" method="post">
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
Then below the form tag, I am trying to put button that would redirect to another page.
<a href="personal?id=${id}">
<button>返回</button>
</a>
I want to place this button next to
<input type="submit" value="注册"/>
Currently it is placed below this when running Tomcat.
I appreicate if someone could help me.
http://jsfiddle.net/isherwood/w9SGz
Just put the link inside the form.
...
<input type="submit" value="注册" />
<a href="personal?id=${id}">
<button>返回</button>
</a>
</form
UPDATE: You'd need to give the button a type to prevent oddness: http://jsfiddle.net/isherwood/w9SGz/2
Jukka is correct that this could be considered invalid markup, and I know for a fact that some browsers don't like it. I agree that styling a link as a button is a better approach. However, that wasn't the question.
If you don't want to do that, negative margins may help, though it's a bit finicky and fragile:
http://jsfiddle.net/isherwood/w9SGz/1
#myButton {
margin-left: 50px;
margin-top: -26px;
display: block;
}
You could use JavaScript and place it within the form element:
<input type="submit" value="注册"/>
<button onclick="window.location.href='personal?id=${id}'">返回</button>
</form>
This works fairly consistently across browsers that have JavaScript enabled
I have a form that should look like this one: http://jsfiddle.net/g6kQK/
but if I inspect the generated code this is what I get: http://jsfiddle.net/bxA5X/
The problem seems to be with
display: block;
float: left;
but if delete those attributes nothing changes in my form.
What is the default property for input type=text in html?
What should I set it to make it aligned with the text?
Thanks.
Remove the width from the .cardno div, and move the input element to the outside.
<label>card no</label>
<div class="cardno">04</div>
<input type="text" name="codcard" maxlength="11"/>
Updated Fiddle: http://jsfiddle.net/bxA5X/8/
Just remove diplay:block property form.usersetting input[name="codcard"]
here is what i got you the answer hope this is what you want... just see this fiddle
<form id="change_customer_data" class="usersetting" action="/">
<label>telephone</label>
<input type="text" name="tel" /><br>
<label>email</label>
<input type="text" name="email"><br>
<label>card no:</label>
04<input type="text" name="codcard" maxlength="11"/>
http://jsfiddle.net/bxA5X/8/
I'm trying to remove the margin between the search bar and the "Go!" button at the top of this page: http://beta.linksku.com/
I've tried removing all styles and adding margin:0;padding:0;border:none;, but there is still a margin between the two elements. I cannot replicate this problem on JSFiddle, but it occurs in all browsers on my website.
This is how elements function as inline-block.
Normally when you use inline-block elements, you often use them inside a paragraph, so the space between the letters must be consistent. inline-block elements apply to this rule too.
If you want to remove the space completely, you can float the elements.
float: left;
You can also remove the whitespace from your template document. Like so:
<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />
The space you're seeing is the default padding applied to inline elements. Simplest hack? Set font-size: 0 on the form, then reset the actual font-size on the input and button.
Magic.
form {
font-size: 0;
}
form input {
font-size: 12px;
Why does this occur? The browser interprets the whitespace between the inputs as a textual space, and renders accordingly. You can also smush all your elements together on one line, but that's ugly code soup.
That whitespace is relative to your font-size. You can remove it by adding font-size:0 on the container of your inputs, in this case a form, like so:
form {
font-size: 0;
}
Using chrome on the Mac, I can get rid of the space if I edit the form node as HTML in the Developer tools, and remove the space between the two closing tags so:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2">
<input type="submit" value="Go!" class="btn">
</form>
becomes:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn">
</form>
One way is to remove space, but if you're not willing to have an unreadable one-line mess, you can use HTML comment:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><!--
!--><input type="submit" value="Go!" class="btn">
</form>
Can someone explain how I can modify the second input id shown below so that it is not visible on the page and also does not take up any space on the page?
<section>
<label for="muni">Municipality</label>
<div>
<input id="county_select" type="text" />
<input id="county_no" type="text" value="" disabled="disabled" style="visibility:hidden" />
</div>
</section>
Currently, this second input id takes up space on my form and I don't want it to take up any space. Thank you.
Use display: none;, as shown:
<input id="county_no" type="text" value="" disabled="disabled" style="display: none;" />
Reference:
The CSS display property.
display:none in stead of visibility:hidden
Use the style="display:none;" instead of visibility:hidden
visibility:hidden leaves space.
You can style the input using CSS, targeting it via its id tag.
In your .css file:
#county_no {
display: none;
}
Styling HTML inline should be avoided.