I want to keep the field and the icon (question mark) at the same line at any time, even if the width is reduced. (preferably using CSS)
I tried various options such as white-space: nowrap, putting them in the same <div/>, but no success.
EDIT
My HTML markup is similar to the following:
<ul data-role="listview" >
<li data-role="fieldcontain">
<div>
<label for="name">*Email</label>
<input type="text" name="name" id="name" />
<img src="help.png" title="title" alt="help"/>
</div>
</li>
</ul>
I am using HTML5 with jQuery Mobile.
white-space: nowrap has no effect on elements, it just tells the browser not to split plain text nodes.
To achieve what you want, you need to make the div wrapping everything wide enough to display everything in a single line. In the general case, this isn't simple to achieve without JavaScript because CSS has only rudimentary support for aligning several elements.
Solutions:
Make the div so wide that it will always be able to contain the three elements. This is hard because of the label and impossible if you want the input field to grow (= use all available space).
Give the div a right margin which is wide enough to contain the image and then position it absolutely in the empty space. Drawback: It will be hard to align the image vertically.
The solution that works perfectly but no one wants to hear: Use a table because table rows do what you want / need.
You could try several things actually. The most ugly version is the table. Its also the most easiest one.
it would look something like this.
<table>
<tr>
<td><label for="name">*Email</label></td>
<td><input type="text" name="name" id="name" /></td>
<td><img src="help.png" title="title" alt="help"/></td>
</tr>
</table>
Also you could try using the propperty inline-block in your css in the questionmark style propperties. It forces the questionmark to stay on the same line as previous element.
display: inline-block;
hope this helps you.
This isn't pretty, but what happens when you use a non-breaking space?
<input type="text" name="name" id="name"
/> <img src="help.png" title="title" alt="help"/>
Note that I moved the closing bracket to the next line to try to keep some sort of order to the code. Pretty ugly still though.
The benefit is that it is "semantic" in that you're instructing the browser that those two pieces of inline content belong together.
Related
$<input id="" name="" value="V" type="radio"><img id="" src=".../image.gif" alt="" border="0"><input id="" name="" value="V" type="radio"><img id="" src=".../image.gif" alt="" border="0"><input id="" name="" value="V" type="radio"><img id="" src=".../image.gif" alt="" border="0">
$<div class="wrapper">
As you see here i have like 3 lines or more in a php file and when i open it with any browser it shows me 2 on the same line and the last one under'em so how to keep these three pics on the same line .. is this have a relation with the page size ? if bigger it will show them on the same line ? is this true ?
Thanks for reply :)
Apologies in advance if I'm misinterpreting what you're asking, but if you want to display the three images in one line, you can use CSS. In each of your image tags, you can add inline styling by adding the "style" attribute:
<img id="" src=".../image.gif" alt="" style="display: inline; border-width: 0px;" />
If you have text-level (inline) content like input elements, img elements, and text in HTML source, they will appear in the same line if the available width permits that and there is nothing that causes a line break (such as <br>).
For usability and accessibility, there should normally be one input item (an input element and associated label) on one line. This is best achieved using HTML tags that cause such rendering, such as wrapping the item in a div element.
But if you wish to put the content on one line, you can wrap it all inside a div element and set white-space: nowrap on it in CSS (or, somewhat more effectively, wrap it all inside the nonstandard but well-supported nobr element). This may then force horizontal scrollbars, if the content does not fit into the available width.
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
I have always struggled designing css forms, I can never get the input and label side by side. Do you have any words of wisdom that may help me.
I usually use a 10px margin on the bottom but cannot get them aligned
My Common form:
Name:
Email:
Phone:
Message:
text area
I know I'm going to get backlash for this from people who think that the only possible way to do things is with pure CSS, divs, spans, etc. However, your form is tabular. You have a column of titles, and a column of input fields. In this case, because of the tabular layout, a valid solution could be tables.....GASP!
Tables are not valid for page layout...let me repeat that again, tables are not valid for layout. However, you've got an element of a page, you're not doing a full page layout. You can easily use <th> elements to style the labels for the inputs, which is quick and simple. Overall, the table (tabular) solution would be less verbose than many of the CSS layouts given, which from a pure HTML standpoint is a win. It will continue to work and layout properly even when the server gets backed up and can't load the external CSS document. To all those who believe that tables are never ok, let me remind you that this solution will validate with W3 100% of the time provided your table is properly structured. And it's far more cross browser compatible, with no box-model issues in the "crabby" legacy browers. Certainly continue to progressively enhance with CSS as is best practice.
Theory and practice, especially in the web world, are two entirely different things. In theory, all of us should be producing 100% HTML5/CSS3/Semantic/SEO Optimized...blah blah blah. In practice, theory only goes as far as the first customer complaint. Progressive enhancement is key to survival. When a webform breaks in a big corporate setting, money is lost and people get fired. For that reason, the International Bank I recently did work for had requirements that demanded all its webforms were tabular (assembled with tables) It's hard to argue with a portfolio of sites whose users generate the company hundreds of millions of $$$ annually.
<style>
ul.anyclassname{
padding:0;
}
ul.anyclassname li{
list-style-type:none;
clear:left;
}
ul.anyclassname li label{
width:300px;
float:left;
}
.inputs{
float:left;
}
</style>
<form>
<ul class="anyclassname">
<li>
<label>Name:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Email:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Phone:</label>
<div div class="inputs"><input type="text"></div>
</li>
</ul>
</form>
I usually do this:
<div>
<label for="txtname">Name:</label>
<input type="text" id="txtname" name="txtname"/>
</div>
<div>
<label for="txtEmail">Email:</label>
<input type="text" id="txtEmail" name="txtEmail"/>
</div>
<div>
<label for="txtPhone">Phone:</label>
<input type="text" id="txtPhone" name="txtPhone"/>
</div>
etc...
Then with my CSS:
label { width: 100px; display: inline-block; }
Something along those lines. Nothing fancy, but they are side-by-side and with the surrounding div you get a block level element to give you a line return after each pair.
I wrote a complete form in this answer: how can we make forms like this with css & html? . It has the html markups and the css classes you need to start.
The code is also in a fiddle here: http://jsfiddle.net/vSqR3/64/ (Now with the nice addition of the for attribute, thanks Kyle!)
You will find in that link not only how to put one markup next to the other, but how to set sizes and borders for each.
I strongly suggest you to play on the jsfiddle.net website. You'll be able to modify and test immediately all your changes.
Here is a code snippet from my page:
<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php
Those whitespace comments are to get rid of the whitespace on each side of the divider. Is this really the only way of doing this? There has to be a more elegant solution.
One option to consider - use a templating engine if you can. For example, in Smarty, there's a {strip} function that does exactly this:
{* the following will be all run into one line upon output *}
{strip}
<table border='0'>
<tr>
<td>
<a href="{$url}">
<font color="red">This is a test</font>
</a>
</td>
</tr>
</table>
{/strip}
Output:
<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>
You can use the font-size:0 hack. Basically, you set font-size:0 on the parent element, and set the font-size explicitly on the children.
Live demo: http://jsfiddle.net/simevidas/mLZYW/1/
(Presentation without hack: http://jsfiddle.net/simevidas/mLZYW/)
White-space only shows when it is around or next to inline elements, so at least for the forms you don´t need it (if you haven´t set your forms to display:inline...).
Positioning or floating things almost always removes the unwanted white-spaces, so for example if your .vdivider is supposed to be a vertical divider / new line, you can just use display:block on the input before it and remove that element and the comments around it.
Whitespace between elements (including newlines and tabs) cause browsers to insert spaces where there should be none.
The most elegant method that I've seen used to get around this issue is putting the > on the next line, instead of on the same line. This way, it's still legal html, and you can still keep it pretty.
For example:
<input value="Search" type="submit" />
<span class="vdivider"></span>
</form><form action="login_action.php" method="post">
<?php>
would become:
<input value="Search" type="submit"
/><span class="vdivider"></span
></form><form action="login_action.php" method="post"
><?php>
Is it sometimes bad to use <BR/> tags?
I ask because some of the first advice my development team gave me was this: Don't use <BR/> ; instead, use styles. But why? Are there negative outcomes when using <BR/> tags?
The main reason for not using <br> is that it's not semantic. If you want two items in different visual blocks, you probably want them in different logical blocks.
In most cases this means just using different elements, for example <p>Stuff</p><p>Other stuff</p>, and then using CSS to space the blocks out properly.
There are cases where <br> is semantically valid, i.e. cases where the line break is part of the data you're sending. This is really only limited to 2 use cases - poetry and mailing addresses.
I think your development team is refering to <br /> in place of margin spacing. To make empty space between elements, use padding / margin styling via CSS.
Bad use of <br />:
<div>
Content
</div>
<br />
<br />
<br />
<br />
<div>
More content...
</div>
Good use of <br />:
<style>
div {
margin-top:10px;
}
</style>
<div>
Content<br />
Line break
</div>
<div>
More content...
</div>
Generally, <br/> is an indication of poor semantic HTML. The most common case is using <br/> to declare paragraph separations, which there are much better ways to do it semantically. See Bed and BReakfast.
There are occasions where it is the proper tag to use, but it is abused often enough that people adopt a "do not use" mentality as to force better semantic thinking.
What was meant by your team was probably not to use <br>s to split between paragraphs.
For example :
<p>I am a paragraph</p>
<p>I am a second paragraph</p>
is the better way to do that, because you can then easily adjust the spaces between paragraphs through CSS.
Other than that, I can not think of anything speaking against line breaks as such.
Same concept applies to why we don't use tables for layout - use tables for tables and CSS for layout.
Use <br/> for break lines in a block of text and CSS if you want to affect the layout.
Specifying the layout directly makes it difficult adapting the site for different page sizes or fonts for example.
If you do this: <BR/> <BR/>
You will get diffrent layout on different browsers.
Deeper:
If you use <BR/> just for line breaks - ok.
If you use <BR/> as a line spacer - not ok.
I will generally always set appropriate margins and padding on elements using CSS - it's a lot less messy than loads of <br />s all over the place apart from being more semantically correct.
Probably the only time I would use a <br /> in preference to the margins and padding set by CSS, even if it's not strictly technically correct, is if it was an isolated incident where slightly more space was needed. If I'd got quite a large stylesheet and it didn't seem worth setting up an additional style just for that one occurence, I may use a <br /> as a one-off.
Like most things, <br />s aren't a bad thing providing they're used correctly.
I try to write my markup in a way that it's easily readable with CSS disabled. If you're just using BRs to add spacing, it's better to use margins and padding.
<br /> should be used for line breaks only, and not to apply style to a page. For example, if you need extra space between paragraphs, give them a class and apply the extra padding to the paragraphs. Don't spread out your paragraphs with <br /><br ><br />
They are to be used to represent newlines. Nothing more. Not to fill up space like as at the average geocities site. There is however only one case wherein they may be useful for other purposes than putting a newline: to clear the floats.
<br style="clear: both;">
Don't use three or more consecutive <br>s, that's a signal you're using them for stylistic purposes and no, you shouldn't.
Some would say a single <br> is enough and instead of two you should use <p></p>, but there are situations (e.g. screenplays) in which you want to introduce a longer pause without implying a change of topic or a new period starting, like a paragraph usually does.
They're fine, if used appropriately. For instance, you shouldn't use them in lieu of <p> tags or to create spacing between elements. You're probably doing something wrong if you ever have two in a row.
Here's an example how <br> can negatively affect styling (run snippet for visuals)
(note the misaligned button and odd space on the right):
button {
width: 70px;
height: 70px;
}
#arrows {
border: solid thin red;
display: inline-block;
}
#arrows span:first-of-type {
text-align: center;
display: block;
}
#moveUp {
margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type {
display: block;
}
*/
<div id="arrows">
<span>
<button id="moveUp" value="üles">↑</button>
</span>
<button id="moveLeft" value="vasakule">←</button>
<button id="moveDown" value="alla">↓</button>
<button id="moveRight" value="paremale">→</button>
<br> <!-- note the shifted button and odd space on right -->
<span>or move with keyboard arrows</span>
</div>
In HTML (up to HTML 4): use <br>
In HTML 5: <br> is preferred, but <br/> and <br /> is also acceptable
In XHTML: <br /> is preferred. Can also use <br/> or <br></br>
So use of <br> tag is perfectly valid HTML. But use of <br> is not recommended?
Main reason why not to use <br> is because it's not semantic tag & has no content inside. Its use can be avoided like,
<p>some<br>text<p>
can be marked up without <br> as
<p>some</p>
<p>text<p>
If you are using <br> other purpose like top-spacing etc. that can be achieved via CSS margin property.