I have a search page that contains a textbox for the search and a link that says "advanced search" similar to google.
I am having trouble centering the textbox AND having 'Advanced Search' to the right of the textbox.
Basically I want the layout to look like googles http://www.google.com/'>See here
This was my shot:
<div style="width:650px; margin-right:auto; margin-left:auto;">
<%= Html.TextBox("SearchBar")%>
</div>
<div style="width:90px; float:right;">
Advanced Search
</div>
Google uses a table to display their search box. The left and right columns have widths of 25% and the center column has a width of 50%. The search box is in the center column and the "Advanced Search" is in the right column. The left column is empty.
Then just center the table. Your search box will be centered and "Advanced Search" will appear on the right.
You can try using a wrapper div with 90px on each side and auto margin that instead.
IE
<div class="wrapper">
<div class="side"></div>
<div class="textbox"><input type="text" id="myinput"></div>
<div class="side"></div>
</div>
Not being a CSS purist, I too would go the table route since I could do that in much less time than trying to get floated DIVs to line up correctly.
You could however use 3 DIVs floated left and sized appropriately to accomplish the same thing.
<div style="width: 25%; float: left;">Your content here.</div>
<div style="width: 50%; float: left;">Your content here.</div>
<div style="width: 25%; float: left;">Your content here.</div>
you can set style to the textbox if apply something like this:
style="position absolute;top:80px;left:90px;"
your are being explicit on where you want the textbox to be displayed so you specify the pixels and it should be inside a layer... it should work for you
input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search" style="position absolute;top:80px;left:90px">
Related
Why is it that the input box always pushes other elements to the next line(Or in some cases the input box pushes itself to the next line, to occupy 100% space)
I want to show an icon before the input box.
______
| icon | --------input box--------
|_____ | |---------------------------|
I tried the below code, but for some reason, <span> doesn't seem to work at all.
<div class="row">
<div class="medium-12 columns">
<span>
</span>
<i class="fi-page-edit"></i>
<span>
<input type="number" id="test"/>
</span>
</div>
</div>
In the above case the "icon" and the "input box" never stay in the same line, the input box pushes itself to the next line.
Why is it so?
Here's a JS fiddle example of a similar case: Foundation- Input box and span tag
P.S. I am trying to avoid putting the icon and the input-box in column like this
<div class="medium-1 columns">
icon
</div>
<div class="medium-11 columns">
<input type="number"/>
</div>
Is there a way to do it using <span>
Thanks in advance.
You should have given some demo.
You need to give some floating or display property to span.
2 ways:
span {
display:inline-block;
vertical-align:middle;
}
or
span {
float:left;
}
input{
float:left;
}
If width for input and span if you want to it aligned.
In my header div, I need to have 2 objects floating to the right, one is a button and the other is a search field.
Both of them is in a div called "pull-right" which just make them float right.
The objects are in these order (from the left to the right)
Searchbox
Button
However since both of them obviously float right, the first element in the code are going to win and take the spot on the right.
So I've placed the button before the searchbox, even though that the searchbox actually comes first. But it's still works.
Is it considered a sloppy way to do it?
Here's the HTML:
<div id="navbar">
<div id="navbar-inner" class="clearfix">
<div class="pull-right">
Sign in
</div>
<div class="pull-right">
<form><input type="search" id="search" placeholder="Search"></form>
</div>
</div>
</div>
and the CSS:
.pull-right {
float: right;
}
You could easily wrap this in another container, and float that one to the right.
HTML:
<div id="floatingContainer">
<input type="text" value="Input" />
<input type="submit" value="submit" />
</div>
CSS:
#floatingContainer { float:right; }
JSFiddle example.
I'm new to Bootstrap and loving it so far but have a couple of simple questions to do with the grid - can't seem to find the answers anywhere...
<div class="container">
<div class="row" style="background-color: #ccc;"> <!-- 1. How do I get this background colour to exclude the left 20px gutter? -->
<div class="span5">
Left Col
<div class="row">
<div class="span5">
<input class="span5" type="text"/> <!-- 2. How do I stop this input from shifting right 20px in IE7? -->
</div>
</div>
</div>
<div class="span7">
Right Col
<div class="input-prepend">
<!-- This lines up correctly, even in IE7 - my star hack will break this -->
<span class="add-on">+</span><input type="text" placeholder="Add..." class="span6">
</div>
</div>
</div>
</div>
Having inspected the bootstrap css I can see that .row starts by pulling back the margin-left by 20px, so that each time a .spanX is created, it has a 20px gutter to the left. This makes sense, but how can I apply style to the whole row (e.g. a background colour) and have this apply to all columns within that row (the span5 and span7 in my example) but without including the left hand 20px gutter?
Secondly, what is the best way to set the widths of elements within a column? In my example I have tried to size a textbox to fill the width of the left hand column by placing it in a nested row with span5. This doesn't work in IE7 - instead it moves to the right by 20px and I lose the right hand gutter.
To see this, check out http://jsfiddle.net/jRcJG/ in IE7 vs good browsers.
The closest I've got is to put together an IE hack to shift the inputs back again, but this causes other problems such as squashing up the input-prepend in the right column:
http://jsfiddle.net/JsBpV/
Unfortunately the project I'm working on must support IE7 so I don't have the luxury of ignoring these users.
Thanks for any help!
A simple but not necessarily elegant solution for #2 is to add an IE star hack inside a class:
input.ie-fix-left, textarea.ie-fix-left {
*margin-left: -20px;
}
which requires you to put a class on each input element that is affected by this problem:
<div class="row">
<div class="span6">
<input type="text" class="span6 ie-fix-left"/>
</div>
</div>
Create a div with .span12 and include another level of row/span with your .span5 and span7
jQuery
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.