$<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.
Related
I have a grid of images, which the user can select by clicking anywhere on them, similar to selecting images in a photos app like Google Photos:
Are there any accessibility issues with the following markup / can it be improved in any way?
<label for="image-checkbox-1">
<span class="labelText">Select Image 1</span>
<input type="checkbox" id="image-checkbox-1">
<img src="image.jpg" alt="image description" />
</label>
Note that the text is hidden by CSS using font-size:0, but this is not really part of the question, I'm more concerned with whether or not wrapping an image inside a checkbox label is good practice or not.
That practice should be ok.
As per Accessible Name and Description Computation 1.2, the <label>’s contents become the <input>’s name.
While computing the name
contents of alt attributes get included in the name computation
hidden elements get excluded (the span)
So when focusing your checkbox, a screen reader would announce
image description, checkbox, unchecked
Could you do something better?
Remove your for attribute, as it’s redundant with wrapping the input inside the label
Remove the <span> entirely, as font-size: 0 also hides it from screen readers. So it’s simply hidden from everybody
Provide width and height attributes for the images, so that the browser can reserve the correct space while images are still being loaded
<label>
<input type="checkbox">
<img src="image.jpg" alt="image description" width="100" height="200" />
</label>
If you do want to provide extra text for assistive technology, but not include it in the image alt text, you should use a tested CSS class like visually-hidden.
I have discover a way to have an input and label elements as an accordion viewer.
To center vertically my elements I use the label as if it was a div, that is, giving it display:table and create a div inside it.
So I have :
<div>
<input id='myid'>
<label for ='myid' style='display table'>
<div style='display:table-cell'>
<img ....... >
thetextforthelabel
</div>
</label>
</div>
Ok, this works fine.
My question is: am I doing something 'forbiden' ?
Can I use the label tag as a container ?
I know that it can be not orthodox .. but It works for me...
Your code is invalid.
The problem is that div elements can only be used
Where flow content is expected.
However, the content model of label elements is
Phrasing content, but with no descendant labelable elements
unless it is the element's labeled control, and no descendant
label elements.
Anyways, it will probably work, because (unlike e.g. p elements) the end tag of label elements can't be omitted:
Neither tag is omissable
However, I'm not sure of the advantage of having a table element with a single cell. Consider using the following instead:
<div>
<input id='myid'>
<label for='myid' style='display:block'>
<img ....... >
thetextforthelabel
</label>
</div>
Yes, it is forbidden by the formal rules of HTML. And yes, it works, and the parsing rules of HTML mean that it must work. So this is different from, say, the rule that says that a p element must not contain a div element; that rule is enforced by the parsing process (the p element is implicitly closed when <div> is encountered).
On the other hand, if the content is just an image and text, you don’t need a div element but can use span. In rendering, it does not matter (with the usual CSS caveats) which one you select, since their only difference in rendering is with the default display value, and you are assigning a display value anyway.
<div>
<input id='myid'>
<label for ='myid' style='display table'>
<span style='display:table-cell'>
<img src="http://lorempixel.com/100/50" alt="(an image)">
thetextforthelabel
</span>
</label>
</div>
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.
I have checkbox insde a link. In all browsers except Chrome, when clicking on the checkbox you follow the link (instead of just having the checkbox become selected).
How do I avoid this behaviour?
Demo (hover over one of the product images to see the checkbox):
http://livedemo07571.prestatrend.com/category.php?id_category=9
And here’s the code in question:
<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link">
<img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" />
<span class="new">New</span>
<div class="right_block large">
<h3 class="large">Crew Neck Jumper</h3>
<span class="product_arrow"></span>
<p class="availability_container"><span class="availability">Available</span></p>
<span class="slash">/</span>
<p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p>
<p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p>
</div>
</a>
This isn't valid HTML (see report). The way to avoid this is, quite simply, to include only text or images inside an anchor tag, and move the checkbox outside. You could use some jQuery to add a click event to the box which would navigate to the next page.
If you want for-sure don't want to move it outside the <a> then you'd have to have an onclick="return false;" and add a listener with jQuery that toggles it when its clicked. I'm not sure if this would work in all browsers, and your best option is just to do it a standards friendly way.
I think this happen because you have the Div (block element) is inside the A (inline element) tag and by default the event will bubble up soon as you click the checkbox.
Even if HTML 5 has made the exception for the A tag and now allow a block element to be nested within that inline element. To get that working the same accross all browser you'll have to wait they all support the html 5 features
1) try with a different doctype
2) build the div outside the A has the link is not required to be executed
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>