I have the following code:
<div class="ans_chk">
<input id="Answer_Response[3]" name="Answer.Response[3]" value="False" type="checkbox"
</div>
<div style="font-weight: bold;" class="ans_opt" id="ans_opt_3">D)</div>
<div style="font-weight: 600;" class="ans_txt" id="ans_txt_3">xxx</div>
<div class="ans_exp" id="ans_exp_3"> - If message.</div>
But it's a problem because ans_exp_3 always goes to a new line if there are more than a certain number of characters.
Is there a way that I can make ans_exp_3 just tag along behind the text of ans_txt_3 ?
How about CSS to stop it wrapping.
.ans_exp {
white-space:nowrap;
}
Or if you want the ans_exp_3 to be rendered next to the #ans_txt_3 you could float the #and_txt_3 with:
.ans_txt {
float:left;
}
See demo.
Related
I run into a css issue.
I have a form, and inside it I want to show a label and some info in each line.
The html for the form is:
<form class="form_dialog">
</br>
<label>Status: </label>
<span><img src="images/check.png" alt="check mark" width="16" height="16"/></span>
</br></br>
<label>Type: </label>
<span>V1</span>
</br></br>
<label>Description: </label>
<div class="sp">16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</div>
</form>
The css for all the tags are:
form.form_dialog {float: left; clear: left;}
.form_dialog div {float:left; clear:left}
.form_dialog label {
display: block; float: left;
width: 12.0em; min-height: 2.0em; text-align: right;
}
.form_dialog span {
margin-left: 3.0em;
}
div.sp {
display:inline;
margin-left:3em;
margin-right:3em;
width:70%;
}
My prob here is that for the description info, I want to keep the text lines indented(each line starts from the same position) as well as inline with label. But cannot achieve it.
Any one can help on this? Thanks.
You are creating a table. You could use a table, or use two seperate elements, placed side by side inside of a containing .
<div class="container">
<div class="formContainer">
</div>
<div class="textContainer">
</div>
</div>
Then float each container and align your text using CSS.
Agreed with Trendy, also, since you starting using span tag, you should just use the span
<span>16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</span>
Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
OK, so my title is terrible. Anyway-
I'm trying to style a simple "product info" template. The CMS I use is drawing in dynamic product information from tags. Looks like this- the divs are styled so they line up as two columns:
<div class="specslabel">
<strong>
{rs_size_lbl} <br />
{rs_material_lbl} <br />
{rs_application_lbl} <br />
{rs_fitting_system_lbl}
</strong>
</div>
<div class="specs">
{rs_size} <br />
{rs_material} <br />
{rs_application} <br />
{rs_fitting_system}
</div>
It all works fine when all those tags are pulling in information properly. However, sometimes one of those fields (it draws from a CSV file) is empty. The tags are smart and won't show the {_lbl} (field label) content if there is no content in the according field. Then there is a blank line, obviously because of the line break.
If I don't use line breaks, the "_lbl" tags all stack up (since the labels are generally short text). Is there another way to style this so that when no content is drawn in, there is no line break- but when there is content, there is a line break?
Rewrite your HTML to put the label with the item.
<div><span class="specslabel">{rs_size_lbl}</span><span class="specs">{rs_size}</span></div>
<div><span class="specslabel">{rs_material_lbl}</span><span class="specs">{rs_material}</span></div>
<div><span class="specslabel">{rs_application_lbl}</span><span class="specs">{rs_application}</span></div>
<div><span class="specslabel">{rs_fitting_system_lbl}</span><span class="specs">{rs_fitting_system}</span></div>
Then, define your CSS as
.specslabel {
display: inline-block;
width: 45%;
}
.specs {
}
What will happen is, when neither the label nor the data gets anything, your html for that line item will be rendered as <div></div>, which has no height by default. Thus the blank space will be collapsed when there is nothing in the div to show.
I'd recommend altering your markup to something like this:
<div class="specs">
<div class="spec">
<span class="label">{rs_size_lbl}</span>
<span class="data">{rs_size}</span>
</div>
<div class="spec">
<span class="label">{rs_material_lbl}</span>
<span class="data">{rs_material}</span>
</div>
<div class="spec">
<span class="label">{rs_application_lbl}</span>
<span class="data">{rs_application}</span>
</div>
<div class="spec">
<span class="label">{rs_fitting_system_lbl}</span>
<span class="data">{rs_fitting_system}</span>
</div>
</div>
Then style span.label and span.data to have a fixed width so they align properly. If they're empty, they should be invisible.
If you format it in the following manner there'd be no issues:
<style>
strong span { float:left; clear:left; }
</style>
<strong>
<span>{rs_size_lbl}</span>
<span>{rs_material_lbl}</span>
<span>{rs_application_lbl}</span>
<span>{rs_fitting_system_lbl}</span>
</strong>
Otherwise, you'd need to alter the server script to output the <br/> appropriately ...
I am trying to position some stuff in 3 columns. The first column has an icon, 2nd column has text, and the 3rd column has an image.
I wish to do this without using the Table tag. Using CSS I have gotten the first 2 columns placed correctly, here is an image:
On the right, I need to add another image, without disturbing the text on the left.
This is my HTML code (stripped down to the basics):
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<p>
Here is my text ...
</p>
<br />
<img src="Images/Icon-2.png" />
<span class="content-title">My Title 2</span>
<p>
Here is my text ...
</p>
<br />
And the CSS that emulates the table layout:
.content-title
{
font-size: 26px;
font-family: Helvetica,Arial,sans-serif;
color: #363636;
top: -28px;
position:relative;
left:+10px;
font-weight: bold;
}
#content-benefits p
{
margin-left:80px;
top:-30px;
position:relative;
width:325px;
}
My issue is, that I can't figure out how to place my image on the right, without making it's position:absolute;, but if I do that, I have to (AFAIK) use JavaScript to place the images relatively to their corresponding paragraphs.
If you want another image add it to the HTML before the rest of the "section" and then float it right with:
img {
float: right;
}
On another note, why aren't you using heading tags to display your headings?
You could use the css display:table to make it apear using a table take a look at the docs for this found here
Place the image after the titles span end tag
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<img src="Images/icon-1.png" />
<p>
Here is my text ...
</p>
<br />
if i properly understand your layout i would do this
<img style="float:left; width:80px" src="image/icon-1.png"/>
<div style="width:405px">
<img style="float:right; width:80px"/>
<div style="float:left; width:325px">
<span/>
<p>
...
</p>
</div>
</div>
you wont need the other positioning you used
if you cannot change the markup,
than put width to the span and p and float:left, and put float:right and width to img
putting float automatically converts the element to display:inline-block which mean that it no longer distributes to the free page width, but takes the minimal allowed space (set by width) and stays rectangular. This way it becomes something like a column.
I'd like to ensure that there's never a line break between a radio button and the start of its adjacent label. However, I want text within the label to be allowed to wrap. Is this possible? You can see my failed attempts by rendering the following HTML:
<html>
<head>
<style type="text/css">
.box {
border: solid gray 2px;
width: 200px;
margin: 5px;
}
.chopped {
overflow: hidden;
}
</style>
</head>
<body>
The boxes need to be fixed-width, so long content needs to be wrapped, as seen in the first box below. And if someone tries to post a ridiculously long string without any spaces, we need it to be truncated, rather than extend beyond the edge of the box -- the problem is visible in the second box:
<div class="box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
So I add "overflow: hidden", and things are somewhat better, but I still don't like how the second box has a line break between the radio button and its label:
<div class="chopped box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="chopped box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
If I add <nobr>, the radio buttons are next to their labels, and so the unspaced string now looks perfect. However, this breaks the first string (the one with spaces), since it no longer wraps:
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</nobr>
</div>
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</nobr>
</div>
</body>
</html>
First, move the radio buttons inside your labels. This adds the nice feature that you can select the radio buttons by clicking the text. Then add a span around the text.
<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This is a really long string with no spaces</span>
</label>
</div>
<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This_is_a_really_long_string_with_no_spaces</span>
</label>
</div>
Second, add the following style to your css:
label {
white-space:nowrap;
}
.wrappable {
white-space:normal;
}
The white-space style on the label prevents the linebreak between the radio button and the text, and the span around the text allows it to wrap just within the text.
have you tried white-space:nowrap; inside your .chopped definition?
If you don't mind the less-neat markup, you can get what you want by simply eliminating the white space between the <input> and <label> text.
<div class="chopped box">
<label><input type="radio"/>This is a really long string with no spaces</label>
</div>
<div class="chopped box">
<label><input type="radio"/>This_is_a_really_long_string_with_no_spaces</label>
</div>
(<label>s placed around <input>s per JacobM's suggestion.)
If you want a bit of room between the <input> and the first character of the label, use a non-breaking space ( ) entity.
The solution provided by JacobM is for this special case ofcourse the best solution. But this problem goes beyond just some radio buttons with their labels. My solution in general:
In line text blabla <span style="white-space: normal;"><element /></span> blabla
Thus as a solution for this specific case, the result would be:
<label>
<span style="white-space: normal;">
<input type="radio" />
</span>
This_is_a_really_long_string_with_no_spaces
</label>
PS: My situation was an <input /> element inline in wrapping text. The problem was that it would break the line after the element instead of the text at the end of the line. It was really hard to search for this problem using a searchengine, I hope this helps others out.
Sometimes you can't move the tags around because the output is generated beyond your control. So if you can't move the checkbox / radio button into the label you might want to go with:
.box {
white-space: nowrap;
}
.box label {
white-space: normal;
}