I'm trying to insert a search field in my header (black zone) but doesn't work. I want the search field inline with "SimpleCMS"...
See this screenshot to understand:
I want it on the same line as the header text...
There's my HTML code:
<div id="header"><h1><?php echo($header_text); ?></h1>
<div style="float: right;">
<form action="search.php" method="get">
<input type="text" name="q" id="q" value="Search..." />
<input type="submit" value="Search" />
</form>
</div>
</div>
And my CSS:
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
}
The problem is that you use a <h1> element. This will span over the whole width (see here) of the top so that every other element will be placed below it. Use a <span> instead and style it according to your needs. Using position-absolute as alpaca lips nao suggests might work as well.
Update: Use position: absolute;
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
position: relative;
}
#header div form {
position: absolute;
top: 75px;
right: 25px;
}
Related
please have a look at this simple jsfiddle:
--> JSFiddle
html:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
css:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
}
#I1,
#I2 {
background-color: orange;
float: left;
}
#I3,
#I4 {
background-color: yellow;
float: right;
}
what I want is the red border (= form width) auto-adjust to the width of the two top inputs (+ padding, of course).
I would then expect, that the second line inputs appear right-aligned below the first, so "above right" would be exactly above "below right", and "below left" beeing right left of it, like so:
11111111111111111111 2222222
4444444 3333333
Can this be done without tables?
Thx, Armin.
It most certainly can be done without tables :). You could set, for form:
form {
display: inline-block;
padding: ...;
}
This will prevent the form from expanding to the entire width of the screen. It will be as wide as the elements inside it, or, if you manually define its width, as wide as specified.
If you would like no elements to appear on either side of the form within the form's containing element, you can wrap it in a div or other block level element:
<div>
<form>
<!-- Rest of content -->
</form>
</div>
In order to remove the spacing above and below each p, as per your comment, remove their margin-top and margin-bottom, as they have a margin by default:
p {
margin-bottom: 0;
margin-top: 0;
}
I've organized and cleaned-up your code. The way to make the div adjust to its content is by using display: inline-block. I've also fixed the padding issue so now the entire content is padded equally to 5px.
JsFiddle
HTML:
<form>
<p>
<input id="I1" value="above left" size="40" />
<input id="I2" value="above right" size="10" />
</p>
<p>
<input id="I3" value="below right" size="10" />
<input id="I4" value="below left" size="20" />
</p>
</form>
CSS:
.border {
border: 3px solid red;
padding: 5px;
display: inline-block;
}
#I1 {
background-color: orange;
}
#I2 {
background-color: yellow;
}
.top-block,
.bottom-block {
width: 100%;
}
I have update this answer. Probably this is what you need, but there are other options but I don't think is the scope of this question.
CSS Code:
form {
overflow: hidden;
border: 3px solid red;
padding: 5px;
width: 400px; // limites de form size
}
#I1,
#I2 {
position: absolute;
background-color: orange;
}
#I3,
#I4 {
position: absolute;
background-color: yellow;
}
p {
display: block;
border: 1px solid blue;
position: relative;
height: 2em;
}
#I1,
#I4 {
right: 25%;
}
#I2,
#I3 {
right: 0;
}
See here the full code: https://jsfiddle.net/uv8yrrav/18/
hope this helps!
i'm editing an AngularJS project and i want to add a backdrop (like Bootstrap Modal) over the main DIV when users click on search input box.
Here is the HTML code:
<div class="main-box">
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
As you can see the white box appears when users click on the search icon and now i want to add a backdrop over the main DIV, except on the white box.
Here is the LESS code:
.search-function {
margin-left: 30%;
}
.search-form {
padding-left: 15%;
padding-right: 15%;
position: relative;
z-index: 0;
.search-input {
color: #2b84a6 !important;
background-color: #fff !important;
font-weight: 300;
font-size: 16px;
}
}
How can i reach this?
Something like this
<div class="main-box">
<div class="backdrop" ng-if="showForm"></div>
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
And add the CSS as
.backdrop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.5;
}
Here's a very complete article about different methods of achieving what you need
CSS Overlay Techniques
I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned on the left of the device Id text field. I've tried setting the display attributes for the text field, as well as the two buttons but it didn't work. I tried setting the float properties, which also didn't work. I was looking at grids I could possibly use from Purecss.io, but I'm not sure if that would fix the problem. I've tried using vertical-align attribute, still no dough.
I'm using a plain bootstrap theme. My HTML skills are pretty basic coming from Java. Anyone know what I can do here?
Here is my main container:
<div class="container">
<!-- Main content here -->
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> <br/>
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
Here are my styles
#main {
vertical-align: middle;
}
#status{
text-align: center;
background-color: #FFFFFF;
padding: 10px;
margin-top: 25px;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#deviceID {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainbutton {
display: block;
margin-left: auto;
margin-right: auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
Here is a preview image: (Having trouble uploading it directly)
http://tinypic.com/view.php?pic=1z499gw&s=8
EDIT:
I somewhat fixed this by applying "float:right" on the first whole form, the text area and the button. There is still a huge horizontal between the two.
#main {
float:right;
}
#main {
text-align: center;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#mainbutton {
display: block;
margin: 35px auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
input[type="submit"], #deviceID {
display: inline;
vertical-align: middle;
margin-top: 35px;
}
.left{
float: left;
text-align: left;
}
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea>
<input type="submit" value="Upload Image" name="submit">
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form class="left" action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</form>
</div>
i think this is what you are asking for.
i rearranged your html a little and added a couple of css rules.
by setting the display on the device id field and the upload button to inline instead of block i got them to be on the same line.
i used vertical-align to... well... align them. and gave them a margin-top.
then floated your second form to the left.
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.
The 'required' text is showing up to the left of the input box. Similar problem in Opera except is displays on the next line (creates a line break). Looks as expected in FF3.1 and chrome. Any suggestions? Eventually I would like to use the display:none attribute on the 'required' span and show this span as necessary with javascript.
<html>
<head>
<title></title>
<style type="text/css">
<!--
input.missing { background-color: #FFFF77; }
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
// float: right;
width: 235px;
text-align: left;
padding-right: 0px;
padding-left: 45px;
}
div.spacer {
clear: both;
}
.container{
width: 425px;
background-color: #ccc;
border: 1px dotted #333;
padding: 5px 5px 5px 5px;
margin: 0px auto;
}
.error{
color: #ff0000;
}
.required{
color: #ff0000;
float: right;
// display:none;
// display:inline;
}
-->
</style>
</head>
<body>
<div id="contact_form">
<form action="/jr/index.php" method="POST" id="contact">
<div id="top_message" style="width: 360px; margin: 10px auto;">
Enter Your Information Below</div>
<div class="container">
<div class="row">
<span class="label">Name:</span>
<span class="formw"><input size="30" maxlength="30" name="name" id="name" value=""></span>
</div>
<div class="row">
<span class="label">Email:</span>
<span class="formw"><input size="30" maxlength="30" name="email" id="email" value=""></span>
<span id="email_error" class="required">(required)</span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="formw">
<input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span>
</div>
<div class="spacer">
</div>
</div>
<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>
</form>
</div>
</body>
</html>
IE really makes me hate web dev sometimes.
You probably should start by adding the proper DocType tag at the top of your file.
EDIT:
After looking at your code, it appears you are not using your floats properly. First off - // does NOT comment out lines in a CSS file. You need to wrap it in /* and */ to comment it out. So your SPAN.formw style is floating to the right, which is before your SPAN.required, which also floats right. Since you're using SPAN tags, you really don't need to float anything here. If you remove all of those it should just fall into place for you.
Which doctype are you using ? A strict one may prevent that kind of problem... Also, I usually start my CSS design with a reset file to get rid of all those kind of annoyances : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Using double slash "//" is not valid CSS commenting. So this float right rule:
div.row span.formw { // float: right;
Is being applied.
Use:
/* comment */
When commenting CSS.
Put a float:left on the formW class
Float all the boxes in the row to the left, instead of mixing floating and inline elements:
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: left;
width: 235px;
padding-left: 45px;
}
.required{
float: left;
color: #ff0000;
// display:none;
}
jriggs, since IE8 is still not completely stable, for some projects you can have IE8 revert to IE7 rendering rules. One of the benefits is that this doesn't give the user the compatibility view button on the right of the location bar.
For more info and specifics see
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx