I'm just starting to get the hang of HTML. I can't manage to align this to the right, it's part of a menu. I basically want it to align the search box to the right so it looks like facebook or something like that. Till now I've been using padding but I cannot keep it going any longer.
<li id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div>
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form></li>
Thanks
You have some options:
keep the div(bad way)
add align"right" to the div
on the form and remove the div (better way)
use float:right
text-align: right
And place that on the form and remove the div.
Also I recommend putting styling in a css and not in the html elements.
Personally I wouldn't use a list
<div id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div style="text-align: right;">
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form>
</div>
And I would also suggest you experiment with text-align
Add text-align:right; to your form and remove the unnecessary div.
Note that this will only work for inline elements: text, inputs, anchors, etc. If you want boxes (divs, forms, tables, etc.) to align to the right you need to use float:right; and set a height on the parent of the floated item, or add a clear div bellow the floated item. Also, besides being unnecessary, this second approach would be more complicated to use for you, as a beginner.
Related
I have the a textbox used as a search field as follows that I want to align to the right:
<div class="col-md-6 search-form" style="padding:13px 0;">
<form action="/search" method="post">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
</div>
I tried surrounding it with another div to attempt to do so using text-align as shown below but it didn't align exactly where I want it
.new-search-div {
display: inline-block;
text-align: right;
}
Here's a screenshot of where I am trying to align it...
text-align:right; will only right align text elements.
It appears that your are using bootstrap. You could try giving your form a class of pull-right, which is a bootstrap class for float right.
<form action="/search" method="post" class="pull-right">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
Don't use align:right;, there's no such CSS rule, use float:right; instead.
(The element will be aligned to the right of the parent element, so you might need to apply that on the parent form instead, if you don't see it changing.)
Already tried to give the Input a float: right; ?
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>
For some reason my Submit and Cancel buttons are not being wrapped in the form tag like I expect them to be (based on their position with in the form tag in the HTML) when I have their float property set to right and left respectively. The two buttons are positioned just outside & below the form div to the far right & left sides.
Link to the HTML & embedded CSS
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png
How can I make it so the form div wraps the two buttons so they do not appear outside & below the form div?
Thank you
Adam
Remove .cancels float rule:
.cancel{/* no float */}
*tested on Chrome
Looks like you need to clear the floats. Give this a try.
<form action="#" method="get">
<textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
<input id="buttons" class="submit" type="submit" value="Submit" />
<input id="buttons" class="cancel" type="button" value="Cancel">
<br style="clear: both;" />
</form>
My navbar doesn't line up in IE... how can I fix this without using Javascript...
http://opentech.durhamcollege.ca/~intn2201/brittains/labs/index2.php
Also it has to be able to work on all resolutions.
And it has to validate in strict.
You don't need to put absolute position to every single button, just position:aboslute to the parent element (navbar) and for the forms (no need of a separate style for every form) just put float:left
Put all the buttons inside a div, instead of using position relative on each button.
Then each button should be next to each other.
Put all the buttons inside one div.
You have:
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<div><input type="submit" value="Home" /></div>
</form>
Remove the nested divs. And also you're missing a closing div after your last form close.
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<input type="submit" value="Home" />
</form>
<form class="navbarForm2" method="get" action="lab1noscript.php">
<input type="submit" value="Lab1" />
</form>
</div>
If I have a html form like the following:
<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
Is it possible to align the checkboxes so they are in union, without using a table or css but pure html? Otherwise, which css should be used?
Yup. Surround each label with a <label> tag:
<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">
Then give the label a width:
label {
display: inline-block; /* try "block" instead if this fails in IE */
min-width: 5em;
}
That should pad out the text boxes nicely. As an added bonus, clicking on the label should now place the browser focus into the textbox.
The article Applying CSS to forms has some examples of syling labels to cause inputs to the right to line up along a vertical edge.
That said, it is a convention in user interface design to place labels to the right or radio buttons and checkboxes. If you follow that convention, then they will line up by themselves (since all the checkboxes will share a width).
You could just put your labels and inputs in an unorderded list. In order to get the alignment, the text would have to go on the right of the input/
<ul>
<li>
<label><input /> Some Text</label>
</li>
</ul>
or
<ul>
<li>
<input /><label for="">Some Text</label>
</li>
</ul>
Rich
The simplest way would simply be to align them all to the right. I'm not sure if the "align" attribute works on the form element but you could try that, or wrap your code in a div or p element with align="right").
CSS is a better solution. Put a class on the form then use the CSS rule text-align: right; or simply add style="text-align: right" to the form element directly.
I don't see why you want to do that.
It doesn't meet your no css instruction, but you could use inline styles if you really just want no external css.
Perhaps you could use
CSS (and to a lesser extent- tables) are tools you are looking for.
Edit: Another way you could do this is with ghost pixel images. images that are a 1x1 alpha transparent png and you use the height and width attributes in to tell it how much you want to space. You'd might need some inline css to make sure things clear correctly.