I have three columns in a table. 1st and 3rd column have plenty of rows. 2nd column has only row, but i want this row to be located in middle of table. I am not getting desired result.
<tr>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
<td colspan="2" align="center" valign="middle">
Move
</td>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
</tr>
Attached the image also. Help me where am I going wrong
Use "vertical-align:" instead of "valign:"
style="vertical-align: middle"
http://www.css4you.de/Texteigenschaften/vertical-align.html
Try to add a div or span tag, and mention the width and height in it.
Related
I have a textbox centered on a page. What I would like to have is an error label display to the right of it, if necessary, and keep the textbox centered on the page. The page contains a Panel, which is centering the entire page.
<asp:Panel ID="pnlStart" runat="server" CssClass="center">
...
...
...
<tr>
<td>
<div>
<input type="text" id="pName" name="pName" runat="server" class="pName" style="color:#7A0000;width:33%;"
value="Enter Your Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
<asp:Label ID="pNameValidationLabel" style="width:33%;" name="pName" runat="server" Text="*Please enter your name." class="pName" visible="false"></asp:Label>
</div>
</td>
</tr>
On page load, the textbox is centered properly. but when the visibility of the pNameValidate Label appears, it tries to force both object into the Center.
Is there a way for the textbox to be centered and the label off centered, to the right?
Many thanks for looking.
You can try and add text-align:right; to the style tag in the pName element.
I went with a table and this quickly provided me what I needed...
<tr>
<td>
<table width="100%">
<tr>
<td width="33%"> </td>
<td width="33%">
<div id="shaker">
<input type="text" id="pName" autocomplete="false" clientidmode="Static" name="pName" runat="server" class="pName"
value="Please Enter Your Name Here" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
</div>
</td>
</tr>
</table>
</td>
</tr>
I have an accordion menu, which works fine. However, I would like to have a single wrapping tag to denote the entire accordion content.
Accordion presents a single question (in its tap) and User's response in the accordion content.
Here's what I have:
<div class="questions"> <!-- this div open accordion tab-->
<!-- If I place a tag here, before "QBlock" - accordion stops working -->
<div id="QBlock"> <!-- This is where accordion content begins -->
<table id="QTable">
<tr>
<td width="45" align="left" valign="top" scope="row">
<div id="QNumber">4.2</div>
</td>
<td width="100%" align="left" valign="top">
<div id="QText">text</div>
</td>
</tr></table>
</div>
<div>
<table id="RTable">
<tr>
<td width="100%" align="left" valign="top" style="padding-right:20px">
<div id="Guidance"><p>content</p></div>
</td>
<td width="550" align="left" valign="baseline">
<div id="Response" class="Response">
<label><input type="radio" name="Radio402" value="Y" id="Radio_402Y" onchange='radioChange(this, "402")'>Yes</label>
<label><input type="radio" name="Radio402" value="N" id="Radio_402N" onChange='radioChange(this, "402")'>No</label>
</div>
<span id="responseDetails">
<div id="Observation">
<label for="observation">Observation:</label>
<textarea name="observation" id="Obs402" rows="6" disabled style="width: 530px;" placeholder="Enter text of observation here ..."></textarea></div>
<div id="DueDate">
<label for="DueDate">Due date:<br></label>
<input name="DueDate" type="date" id="DueDate402"/>
</div>
<div id="proposedActions">
<label for="porposedActions">Proposed actions:</label>
<textarea name="proposedActions" id="pa402" rows="6" style="width: 530px;"></textarea>
</div>
</span>
</td>
</tr>
</table>
</div>
</div> <!-- this div closes the accordion tab -->
What I would like to do is to have a structure allowing me to wrap this whole question and place an id to it, something like
<section id="Q001"> ... </section>
which starts right ABOVE "QBlock" and ends before the final tag but accordion seems not to allow any other wrapping . Thanks in advance.
So I am web developer who used to have a kind graphics design person help me out on this sort of browser compatibility hell, but alas he has moved on to greener pastures. The following html looks fine and dandy on chrome, but the table I am using to align my form is sleeping on the job on the bottom in ie and firefox. Should I never use tables? Is the float in the div tags screwing everything up? Any hints or suggestions for improving my html and css would be much appreciated.
Also, the text area text gets a little screwy sometimes in terms of where it is positioned in the box.
Thank you all.
<div style="border-style:solid; border-color:#336699; padding: 5px; margin-left:auto; margin-right:auto; width:600px; height:300px;" id="demoContainer">
<div style="" id="demo">
<div style="" id="demoHeader">
<img src="someimage" />
<span style="font-size:32px;">Demo</span>
</div>
<div style="" id="demoBody">
<form method="get">
<div style="float:left; padding:5px;" id="demoBodyText">
<textarea style="resize:none;" rows="10" cols="30">
Enter demo text here...
</textarea>
</div>
<div style="float:right; padding:5px;" id="demoBodyOptions">
<table style="float:right;">
<tr>
<th>
Option 1:
</th>
<td>
<select style="">
<option>asdf</option>
</select>
</td>
</tr>
<tr>
<th>
Option 2:
</th>
<td>
<select style="align:left;">
<option value="320">Fastest</option>
<option value="260">Faster</option>
<option value="200">Fast</option>
<option value="170" selected="selected">Default</option>
<option value="130">Slow</option>
<option value="110">Slower</option>
<option value="80">Slowest</option>
</select>
</td>
</tr>
<tr>
<th>
Option 3:
</th>
<td>
<select>
<option value="4.2">Highest</option>
<option value="3">Higher</option>
<option value="2">High</option>
<option value="1" selected>Default</option>
<option value="0.8">Low</option>
<option value="0.6">Lower</option>
<option value="0.4">Lowest</option>
</select style="align:left;">
</td>
</tr>
<tr>
<th>
Option 4
</th>
<td>
<select>
<option value="none">None</option>
</select style="align:left;" >
</td>
</tr>
<tr>
<td>
<input type="submit" />
</td>
</tr>
</table>
</div>
</form>
</div>
<div style="clear:both;" id="demoFooter">
Footer
</div>
</div>
</div>
EDIT: Added image in how it displays in my firefox version 10.
If you have a float:right after a float:left this seems pretty normal.
Try to switch the order of the two or give the second one also float:left
Or maybe the padding is the problem?
http://jsfiddle.net/HerrSerker/55cXT/
What are the width of your floated divs #demoBodyText and #demoBodyOptions?
See the fiddle - Is this you are looking for?
Fiddle: http://jsfiddle.net/jKtkq/
Demo: http://jsfiddle.net/jKtkq/embedded/result/
Screen shot: http://img39.imageshack.us/img39/7676/tableissue.jpg
I am making 2 different web application for smart phones, using jQuery mobile and webapp-net.
so far I have the following codes: (its just a part of these codes, since I can not put the whole thing here)
<div data-role="collapsible" data-collapsed="true">
<h3>Eenmalige machtiging </h3>
<div data-role="fieldcontain" >
<form >
<input type="number" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number" autocomplete="off" onBlur="isValidAnum()" onFocus="emptyAnum('anum')"/>
<input type="text" id="bname" placeholder="Beneficiary Name" autocomplete="off" onBlur="isValidBname()" onFocus="emptyBname('bname')"/>
<table>
<tr><td>
Select Your Bank
</td>
<td>
<select name="select-bank" id="select-bank" class="select-bank" data-inline = "true" >
<option value="abn">ABN Amro</option>
<option value="rabo">Rabo Bank</option>
<option value="ing">ING Bank</option>
<option value="overige"> --Overig--</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td>I Agree </td>
<td><input type="checkbox" class = "checkbox" name="cbox" id="cbox2"/></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br/>
<a data-role = "button" type="submit" data-icon = "check" data-theme="b">Pay</a>
</form>
</div>
</div>
</div>
</div>
and:
<button class="form_header" id="last_method"><img src="appimages/directdebit_NL.png" align="middle" /> Eenmalige Machtiging</button>
<div class="form_body">
<fieldset>
<ul>
<li>
<input type="number" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number" autocomplete="off" onBlur="isValidAnum()" onFocus="emptyAnum('anum')"/>
</li>
<li>
<input type="text" id="bname" placeholder="Beneficiary Name" autocomplete="off" onBlur="isValidBname()" onFocus="emptyBname('bname')"/>
</li>
<li>
<table>
<tr><td>
Select Your Bank
</td>
<td>
<select name="select-bank" id="select-bank" class="select-bank" data-inline = "true" >
<option value="abn">ABN Amro</option>
<option value="rabo">Rabo Bank</option>
<option value="ing">ING Bank</option>
<option value="overige"> --Overig--</option>
</select>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td>I Agree </td>
<td><input type="checkbox" class = "checkbox" name="cbox" id="cbox2" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<input type="submit" value="Pay" class="pay_button"/>
</li>
</ul>
</fieldset>
</div>
</div>
</div>
Now I have to create a .vm file using these two codes, in order to do that I need to see what are the difference in html between these two. I tried to make it look alike each other as much as I could, I dont think I can change them any more. I was also trying to work with their css but I didnt change anything.
my question is there a possible way to put these html in a single .vm file??? if you know how to do it please help me, also if you need more info just ask me.
Are you talking about file diff? Where you check the differences in two files and merge them?
There is winmerge http://winmerge.org/
There is examdiff. Do a google search for file comparison or file diff
Consider the following HTML snippet. The desired effect is to have a dropdown be positioned right above a table.
<!-- this is actually in a proper CSS class, not inline-->
<div style="float:left;
min-height:1px;
padding:15px 2% 20px;
position:relative;
width:96%;">
<form method="post">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
The above renders like this:
table and select float right http://www.imagechicken.com/uploads/1253124526051538700.png
Question: How can I write my CSS to achieve positioning like this mockup?
desired http://www.imagechicken.com/uploads/1253124791005327900.png
Add clear: both; to your table's CSS. This will clear the float of the div (with the dropdown) above it.
But why don't you just text-align: right; your div, then you don't have to mess with floats and inline divs. That should work as well.
One way would be to add absolute positioning to both divs.
or
Other way would be to use table. For example:
<table>
<tr><td>
<form method="post">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
</form>
</td></tr>
<tr><td>
<div>
<div style="float:left;
min-height:1px;
padding:15px 2% 20px;
position:relative;
width:96%;">
hello world
</div>
</td></tr>
</table>
or
Add one more div around the div that has float:right. For example:
<form method="post">
<div style="float:left; width:300px">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
<div>
<div style="float:left;
min-height:1px;
padding:15px 2% 20px;
position:relative;
width:96%;">
hello world
</div>
you could make another cell for the table
<table>
<tr>
<td colspan="2">
<div style="float:right;display:inline;">Show Me:
<select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
</td
</tr>
<tr>
<td>table head</td>
<td>table head</td>
</tr>
<tr>
<td>content1</td>
<td>ontent2</td>
</tr>
<tr>
<td>content3</td>
<td>content4</td>
</tr>
</table>
this should work.. or you could use css. but this is the fastest way to do it:-? at least until you make/find some css. you could use float left on both divs