I'm trying to get an div with image background to appear to the right of a text box. I have tried Float = none, left, right, I have tried position and even played with margins but nothing seems to get it to stay.
<div id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat; margin-left: 245px; margin-top: 2px;"></div>
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
How's that work for ya?
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<div id="status" style="display:inline;background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></div>
float left and right try to throw your element as far to one side of the container as possible. If you want the element on the right side of a second element, put it after the second element in your HTML. Also, divs are block elements. Block elements want to be on their own line. Use an inline element (like a span), or set the display css property to inline on a block element you don't want on a new line.
EDIT: Here it is as a span for ya
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<span id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></span>
Just float:right the div and remove the 245px left margin so you aren't pushing the input too far away.
Related
In the image below it shows an image , textbox and a css menu image
My CSS menu is perfect. I finally got it the way I needed it. My problem is that I need the textbox in the center of the nav bar and then I need my image to the left of the textbox
to be all the way to the left. I don’t know how to do that. I have tryed this:
<!-- Advsearch -->
<li class='active'><a href='#Searching'><span>
<form method="get" STYLE="FLOAT:CENTER;" action="/search" id="advsearch">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
And for the image I tried float:left
I made a jsfiddle for you to help me:
Js Fiddle
http://jsfiddle.net/TxeVt/
You can use the
correct { margin: 0 auto;} not { float:center }
and you are using float:center, center is not element float element are available is left, right, none, inherit Ok dude
I have a checkbox and two text fields. When the checkbox is checked, the two textfield appear (via jquery code). I want that the two label "First field" and "Second field" be aligned with the label "MyCheckbox" Or, in some way, that the two textfield label should be indented respect to the level of the checkbox.
This is my html code:
<div>
<input type="checkbox" name="mycheckbox"> MyCheckbox
</div>
<div id="mydiv">
<div><label>First field</label>
<input type="text" name="first_field" value="">
</div>
<div><label>Second field</label>
<input type="text" name="second_field" value="">
</div>
</div>
How could I do it with css?
#mydiv div {
padding-left: 16px;
}
JSFiddle
You could put them inside of the same div and append to the div using jquery. You would access the div like this
$('input[name=mycheckbox]').parent()
and the append like this
$('input[name=mycheckbox]').parent().append($('#mydiv').html());
If you put the first field and second field outside of the div and the div has a default width //width = 100%
It will be put underneath your first checkbox div. So you need to do one of two things...
Use the above jquery to put your code inside of the 100% div
Or specify the first div's width and float the item next to it an
example of this is
////the float is optional
//div{
//width: 50%;
//float:left;
//}
//#mydiv{
//width: 50%;
//float:left;
//}
I have a div that contains a couple of radio buttons. These show/hide a textbox.
<p>Some text</p>
<div>
<div>
<input id="show" name="radioGroup" type="radio" value="1" /><label for="show">Show</label> -
<input id="hide" name="radioGroup" type="radio" value="0" /><label for="hide">Hide</label>
</div>
<div class="myTextBox">
<input type='text'>
</div>
</div>
<p>Some text</p>
When I show/hide the .myTextBox then the text bumps a couple of pixels. This is due to the padding & margin on the textbox.
Without removing these settings (padding/margin) is there a way to eliminate the CSS bump?
See example on jsFiddle http://jsfiddle.net/nTJZN/1/
See here.
What I am doing is basically instead of show() and hide() I'm altering the visibility property.
function ShowHideTextbox()
{
if($("#show").is(":checked"))
$(".myTextBox").css('visibility','visible');
else
$(".myTextBox").css('visibility','hidden');
}
This is because your input box is taller than the text, which causes the line to grow when the input box is shown. By inspecting the element, I determined the line was 28px high when the input box was visible, so applying a line-height of 28px fixes the problem, like so:
div
{
display: inline-block;
line-height: 28px;
}
See http://jsfiddle.net/X4X3U/
I have searched, and this post is closest, but not exactly the same. I am trying to have two spans next to each other, with percentage widths. However, when the window's width is decreased by the user's screen size or window resizing, the labels and input fields separate individually. I would like the label and input to be one unit, so that if the window is decreased, the second span will wrap below the first.
HTML:
<span><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></span>
<span><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></span>
CSS:
#startdate {
width: 30%;
display: inline-block;
}
#enddate {
width: 30%;
display: inline-block;
}
Here is a fiddle. If you want to test the resizing functionality, move the center bar to the right.
Fixed: http://jsfiddle.net/XceSq/1/
<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>
The span element is a textual container and does not support the width requirement you are aiming to achieve. The div element, however, is a layout container which will allow you to contain the two objects within a single block. Using display:inline-block, we're able to make sure that the two containers show up side by side.
Enjoy and good luck!
why is the word BESTSELLER skipping a line... there is nothing in the code telling it to do so? (forgive me -- here is the link http://u.neighborrow.com/)
<div class="input text required">
<label for="ItemItem"></label><input type="text" id="ItemItem" value="" maxlength="255" style="font-size: 25px; width: 200px; margin: 5px 0pt;" name="data[Item][item]">
<input type="submit" value="Search" style="font-size: 22px" />
</div>
<?php echo $form->end(); ?>
Tips: <span style="font-size: 13px; position: relative; top: -2px"> Taking a trip? Want to try something before you buy it? <br > Have a project or event coming up? Want to see who has a copy of that bestseller?</span>
<br />
<?= $form->create('Item', array('action' => 'indextest')); ?>
</div>
I do not know what you mean by "skipping a line". Perhaps a link to the live code would help. But I did notice you have more closing div tags than opening.
EDIT: It appears the surrounding div has a computed line height of 30px. But the subject span has a line height of 18px. So, when the span takes up an entire line, it displays at the 18px line height. But when it only takes up a partial line, the 30px line height is applied to the remainder of that line, and this causes the last line to display at the larger 30px line height. Try setting the 18px line height at the parent div, or set the span to be display: block, so that the larger line height is not displayed in-line.
Try to add display:block to your span or replace the span width any block-level element such as <p> or <div>. In a semantic world you should use a <p> ;)
Also you should try to prevent inline-styles.