In a table I have a situation like this:
<td>
<p>1</p>
<p class="obj_2 view"></p><input class="obj_2 modifica" type="text" value=""/>
The textfield appear when I press a button, but the problem is an other one. The textfield appear under the paragraph, but I want it in the same line. So, should I add some Css code or what?
<td>
<p style="float:left">1</p>
<p style="float:left" class="obj_2 view"></p>
<input style="margin-top:15px;" class="obj_2 modifica" type="text" value=""/>
</td>
You can use float:left property for align 2 p elements in a single line
<td>
<p style="float:left;">1<p>
<input type="text" value="" style="float:right;"/>
I have ommited the <p class="obj_2 view"></p>
Related
I have this html code:
<label for="label_name">aome:</label>
<input type="text" id="nome" size="37" maxlength="50" style="vertical-align: middle;"><br />
I need to put to right of the page. Anyone can help me?
You can put it in a <div> with float:right;.
Here's an example:
<div style="float: right;">
<label for="label_name">aome:</label>
<input type="text" id="nome" size="37" maxlength="50" style="vertical-align: middle;">
<br />
</div>
That depents on the elements around it.
.classforlabel, .classforinput{
float:right;
}
However, I may recommend you to put that label and input inside a parent, and add the css above to that parent
Put your elements in a div with align right
<div align='right'>
<label for="label_name">aome:</label>
<input type="text" id="nome" size="37" maxlength="50" style="vertical-align: middle;"><br />
I tried using bootstrap for aligning my text and input box on the same row but it's not working:
<tr id="price_box">
<div class="row">
<th>Price:</th>
<td>
Rs
<input id="price" name="price" type="text" value="">
<span class="pricebox_end">.00</span>
</div>
<br>(Optional - do not include period, comma or cents)
<div id="err_price" style="display: none">
<span class="warning nohistory"></span>
</div>
</td>
</tr>
The above is just a fragment, but I could make a fiddle if it helps. Maybe you know what I should do to make the texts and the input box display on the same row?
Update
The following rendered them on the same row.
<tr id="price_box">
<th>Price:</th>
<td>
<div style="float:left">
Rs
</div>
<input id="price" name="price" type="text" value=""><span class="pricebox_end">.00</span>
<br>(Optional - do not include period, comma or cents)
With the CSS.
#price {
float:left;
}
.pricebox_end {
float:left;
}
I had to keep the table because of complex side effects if I removed the table.
You have malformed HTML with tables and Bootstrap thrown in. I would just use the grid system:
<div class="row">
<div class="col-md-3">
Price:
</div>
<div class="col-md-3">
<input id="price" name="price" type="text" value="" />
</div>
<div class="col-md-3">
Rs
</div>
<div class="col-md-3">
<span class="pricebox_end">.00</span>
</div>
</div>
The grid system is a nice replacement for HTML tables. Bootstrap lets you write less HTML and gives you responsiveness out of the box.
The div <div class="row"> HTML element in your code is not a valid direct child element for <tr> and adds unexpected behaviour.
Further, the <input id="price" .. > element wasn't closed, causing the issue of the elements not being rendered on the same row. You do not need to float your elements.
You can close an input element by doing <input id=price .. /> or <input id=price ../></input>
I've cleaned up your code below.
<tr id="price_box">
<th>Price:</th>
<td>
Rs <input id="price" name="price" type="text" value="" /><span class="pricebox_end">.00</span>
<br />
(Optional - do not include period, comma or cents)
</td>
</tr>
I am new to html, so please try to understand if i am making any silly mistake.
I am trying to create a login window like face book. i have created a login window which looks like following:
Here i have taken a table of 2 rows first row renders 2 text boxes and a login button. second consists of 'remember me' and 'forgor password' link.
Problem is that i want 2nd row of height 12px and text "remember me " to be shown in exact center of check box not as its looking a bit down in above image.
I have written some temporary inline cssto check out look:
following is my code for this section:
<table style="float:left;margin-top:1%">
<tbody>
<tr>
<td style="padding-right: 0px;background:blue;">
<div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
<input type="text" style=" width:110px;text-align:center;"class="inputtext _5aju" id="email" name="email" placeholder="E-mail" tabindex="1" value="" aria-label="Email or Phone">
</div>
</td>
<td style="padding-right: 0px;background:red">
<div class="uiStickyPlaceholderInput">
<input type="password" style=" width:105px;text-align:center;float:right;" class="inputtext _5aju" id="pass" name="pass" placeholder="Password" tabindex="2" value="" aria-label="Password">
</div>
</td>
<td >
<button value="1" class="_42ft _42fu _5ajv selected _42g- btn btn-primary btn-small" id="loginbutton" tabindex="4" type="submit">Log In</button>
</td>
</tr>
<tr height="12" style="background:pink;">
<td height="10">
<span class="_5ajw">
<div>
<label class="_5bb4">
<input id="persist_box" style="height:10px;background:yellow" type="checkbox" name="persistent" value="1" tabindex="3">
<span style="font-size:10px;margin-top:-5px;background:yellow">Remember me</span>
</label>
<input type="hidden" name="default_persistent" value="0">
</div>
</span>
</td>
<td style="margin-top:-1%;">
<a class="_5ajx" rel="nofollow" href="https://www.google.com"
style="font-size:10px;paddig-left:2px;margin-top:-1%;background:yellow;">Forgot your password?</a>
</td>
</tr>
</tbody>
</table>
So,please can any one tell me how to adjust css to achive above mentioned.
thanks in advance. . .
Try vertical-align:middle on the span containing the Remember me text.
On a side note, I would advice you to avoid tables for this kind of layout and achieve the same layout using divs.
Ideally, you shouldn't use a table for layout purposes.
In your example, I would try removing the margins around the checkbox, leaving only the right margin like so:
<input type="hidden" name="default_persistent" value="0" style="margin: 0 5px 0 0;>
That should do the trick.
I have this registration with HTML:
<form class="registerForm" id="registerForm" action="./index_public.php?page=pilot_insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span>Name</span>
</td>
<td><span id="sprytextfield1">
<label>
<input type="text" name="name" id="name" tabindex="1" />
</label>
<span class="textfieldRequiredMsg">*Required</span></span>
</td>
</tr>
<tr>
<td class="style1">E-mail</td>
<td><span id="sprytextfield6">
<label>
<input type="text" name="email" id="email" tabindex="8"/>
</label>
<span class="textfieldRequiredMsg">*Required</span><span class="textfieldInvalidFormatMsg">Formato no válido.</span></span>
</td>
</tr>
</table>
<input class="btn" value=Apply name=apply type="submit" />
</form>
I want put an image next to the registration form. I tryed but I only can put it below the registration form and no next to. HELP!!!
Apply a specific width to your form and float:left and use float:right for the image
Put form and image in div and use "float" css property.
<div style="float:right">
<img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"> </div>
Here is the working demo : http://jsfiddle.net/7uUK8/1/
You can try applying "display:inline-block;" to both the form and the image.
For example:
<form style="display:inline-block;"></form>
<img src="someimage" style="display:inline-block;"/>
Here's a fiddle example with your form and an image side by side: http://jsfiddle.net/VE66w/
Use div or span to make two container in body of the html one is use for form and other is use image. After that apply css according.
Just delete : "Formato no válido."
<div style="float:right"><img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"></div>
If you want, image next to registration field ...
I want to basically create this kind of layout:
What would be the best way to achieve this?
Your HTML:
<div id="login">
<div class="float_left">
Your input here <br/>
Your remember me checkbox and text
</div>
<div class="float_left">
Your second input here <br/>
And then your forget password link
</div>
<div class="float_left">
Login button here
</div>
<br style="clear:both;"/>
</div>
Your CSS:
#login {}
.float_left {float:left;}
Here's the semantically clean way to do it:
The HTML:
<form>
<fieldset>
<input id="username" placeholder="user name">
<label><input id="rememberme" type="checkbox"> Remember me</label>
</fieldset>
<fieldset>
<input id="password" type="password" placeholder="password">
Forgot your password?
</fieldset>
<input type="submit" value="Login">
</form>
The CSS:
fieldset {
display: block;
float: left;
margin-right: 8px;
}
#username, #password {
display: block;
width: 100%;
}
Or something like that. I would use labels instead of placeholders, but there weren't any labels in your mockup, so I didn't want to add extra elements.
The "best way" would be to use either flexible box model (display: box, if you have some specific sizes to give to the blocks so they'll align) or table layout (display: table). Unfortunately, Internet Explorer 6 and 7 have absolutely no support for any of them.
So I'd go with either (as this question is GWT-oriented):
a plain old <table> in an HTMLPanel (and use role=presentation for best accessibility)
FlexTable or Grid widget (which are backed by a table)
Look, I've turned Sam's answer above into UI:Binder template. (Errors are possible, I'm writing XML here by hand.)
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.float_left {float:left;}
</ui:style>
<g:HTMLPanel>
<g:HTMLPanel class='{style.float_left}'>
<g:TextBox ui:field='loginTextBox'/>
<br/>
<g:CheckBox ui:field='rememberMeCheckBox'>Remember me</g:CheckBox>
</g:HTMLPanel>
<g:FlowPanel class='{style.float_left}'>
<g:PasswordTextBox ui:field='passwordTextBox'/>
<br/>
<g:Hyperlink ui:field='passwordRestorationHyperlink'>Forgot your password?</g:Hyperlink>
</g:FlowPanel>
<g:FlowPanel class='{style.float_left}'>
<g:Button ui:field='loginButton' text='Login'>Login</g:Button>
</g:FlowPanel>
<br style="clear:both;"/>
</g:HTMLPanel>
</ui:UiBinder>
And the corresponding Java class. That should go with no surprise - #UiField and uiBinder.createAndBindUi(this) are your friends there.
I know it may sound bad, but I think tables is the best way to go in this case:
<table style="border: none;" cellspacing="0" cellpadding="0">
<tr>
<td>
<input name="login" />
</td>
<td>
<input name="password" type="password" />
</td>
<td>
<input name="login" type="submit" value="Login" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="keepMeLogged">
<label for="keepMeLogged">Keep me logged in</label>
</td>
<td>
Forgot your password?
</td>
<td>
</td>
</tr>
</table>
CSS
input[type=text] { width: 200px; }
span.keep { display: inline-block; width: 200px; }
HTML
<input type="text" /> <input type="text" /> <button>Login</button> <br />
<span class="keep"><input type="checkbox" />Keep me logged in</span>
Forgot your password?
See it live: http://jsfiddle.net/foghina/92E2a/