There are a number of questions addressing this issue, but none addressing vertical alignment relative to a floated image or block-level element.
...
<td>
<span style="vertical-align: middle">This should be vertically centered relative to the image</span>
<img src="something" style="float: right" />
</td>
...
This does not produce the desired result, since the image is floating. I have tried a lot of things, including adding a after the tag, making the span display as a block level element, and other ways to position the image (aligned to the right of the containing ) without floating it, but have not had success.
UPDATE:
I have been unable to get any of the proposed solutions working. If this can't be done, so be it, but I'm leaving this open until I can be sure it can't. I've created a jsFiddle with the HTML, in hopes that someone can write CSS which demonstrates a solution.
...
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>text here</td>
<td style="text-align: right">image here</td>
</tr>
</table>
</td>
...
The <td> tag is align middle by default
You would need to wrap the span and image in the same <div> and apply the float to the div instead.
...
<td>
<div style="float: right;">
<span style="vertical-align: middle">This should be vertically centered relative to the image</span>
<img src="something" />
</div>
</td>
...
OR
...
<td style="vertical-align: middle;">
<span>This should be vertically centered relative to the image</span>
<img src="something" style="float: right;" />
</td>
...
This can not be done without modifying the given document structure, at least given CSS2.1. I'd still love to see a CSS3 solution, if anyone can provide one.
Related
I have an advanced search form (click "Advanced search") here in Dupal 7 - http://www.ibuild.ph/mtf-rdp-minimal/search/node and contact form here - http://www.ibuild.ph/mtf-rdp-minimal/contact. The search fields are inline, while the contact fields are positioned below the labels.
Is there a way to inline position the fields with the text labels and make the fields aligned vertically with each other without separating the text labels and form fields in two divs?
Using table
You can change width of label by changing width: 100px;
<table style="width: 100%;">
<colgroup>
<col style="width: 100px;">
<col>
<colgroup>
<tr>
<td>Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" /></td>
</tr>
</table>
Using min-width:
<div>
<label style="display: inline-block; min-width: 100px;">Name: </label><input type="text" />
</div>
<div>
<label style="display: inline-block; min-width: 100px;">Address: </label><input type="text" />
</div>
You could do either of these things:
Make a <table> with two columns instead of your <fieldset>.
Put the <label> elements in the first column and <input/> elements in the second column. The table will automatically align the column widths to the largest element in that column.
OR
You could add this to your css:
fieldset.search-advanced label{
min-width:200px;
}
Thanks, Thi Tran and FactoryAidan. Will try customizing Drupal's webform tpl instead. But your answers will definitely come in handy in customizing the template.
Here is the link to the resource I have found - http://cgit.drupalcode.org/webform/tree/THEMING.txt?id=HEAD
<div class="row-fluid">
<table class="s-table table table-bordered table-striped table-hover">
<thead class="p-table-head">
<tbody class="p-table-body">
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<div id="div_2_1_2_1_1_1_10_r9" class="Action_Group CoachView CoachView_show" data- eventid="" data-viewid="Action_Group1" data-config="config_div_2_1_2_1_1_1_10_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action_Group">
<div id="div_2_1_2_1_1_1_10_1_r9" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix">
<div class="l-nodeId" style=" display: none; "></div>
<div class="p-action-group">
<div id="div_2_1_2_1_1_1_10_1_1_r9" class="Action CoachView CoachView_show" data- eventid="boundaryEvent_10" data-viewid="Action3" data-config="config_div_2_1_2_1_1_1_10_1_1_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action" style="background-color: transparent;">
<button id="div_2_1_2_1_1_1_10_1_1_r9-lnk" type="button" style="display: none;">
<a class="p-action-link" href="#action" title="">
<i style="display: none;"></i>
<span style="background-color: transparent;">Select</span>
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have tried with the following different x path expression its works fine in Firefox but in IE browser it is not working?.
//tbody[#class='p-table-body']/tr/td[10]/div/div/div/div/a/span
//table[#class='s-table table table-bordered table-striped table- hover']/tbody/tr[1]/td[10]/div/div/div[2]/div/a/span
//*[#id='div_2_1_2_1_1_1_10_1_1_r9']/a/span
Note : i have tried to execute scripts it is not fail but main issue it is not recognizing
select link of a customer.
Try
//*[#id='div_2_1_2_1_1_1_10_1_1_r9-lnk']/a/span
to click on select
Not sure if it can help, but try selecting just the 'a' element, instead. There's no need to select also the span element, as far as I can understand. E.g.:
By.cssSelector("#div_2_1_2_1_1_1_10_1_1_r9 a.p-action-link")
Also, a couple of recommendations.
Try to avoid xpath selectors, and write css selectors instead. See selenium-docs
While writing a selector, you should not be too strict. "/tr/td[10]/div/div/div/div" is considered bad practice.
See Writing reliable locators for Selenium and WebDriver tests
Try to identify the element by using the text identifier
driver.findElement(By.xpath("//a/span[text()='Select']")).click();
I have this div that is showing the products for an e-commerce site.
I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:
Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png
That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.
Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.
How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?
HTML looks like this :
<div id="products">
<img src="fetch.php?id=4" width="129" height="129" alt="PRC200" />
<h3>PRC200</h3>
<table border="0">
<tr>
<td><h4>100,00 RON</h4></td>
</tr>
<tr>
<td class="out">Indisponibil</td>
</tr>
<form action="" method="post">
<tr>
<td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
</tr>
</form>
<form action="detalii.php" method="get">
<tr>
<td>
<input type="hidden" name="id_produs" value="4" />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</td>
</tr>
</form>
</table>
<p>M-am saturat de atatea litere si numere</p>
</div>
Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.
<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }
</style>
<div id="products">
<div class="product">
<div class="purchasedetails">
<h4>100,00 RON</h4>
<p>Indisponibil</p>
<input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</div>
<div class="productimg"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></div>
<h3>PRC200</h3>
<p class="description">Insert Description Here</p>
<div style="clear:both;"></div>
</div>
</div>
I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>
How can I put <input type="text"/> and <input type="button"/> in one line, like this...
...so that they fit inside their parent (<div> for example), with textbox taking maximal possible width?
Of course, additional divs can be used. tables are allowed but discouraged.
Using a table-based approach, you could:
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><input type="text" style="width:100%"/></td>
<td style="width:60px"><input type="button" style="width:100%"/></td>
</tr>
</table>
The effect is a table that fills its parent width containing a fixed-width button adjacent to a textbox that fills the remaining width.
Of course, out of habit, I would refactor the CSS into an external file.
Edit:
Here's a div-based approach:
It happened to be the case that these div-based approaches worked well enough in IE 7 and IE8, but not Firefox
<div>
<div style="float:right; width:60px">
<input type="button" style="width:100%"/>
</div>
<div>
<input type="text" style="width:100%"/>
</div>
<div style="clear:both"></div>
</div>
And, perhaps, a lighter div-based approach:
<div>
<input type="button" style="float:right; width:60px"/>
<input type="text" style="width:100%"/>
<div style="clear:both"></div>
</div>
I recommend browser-testing div-based approaches.
I can't get this list to align left
<table width="100%">
<tr>
<td align="center">
<asp:Panel ID="Panel1" runat="server" BackColor=White Height="604px"
Width="493px" >
<ul align=left style="left:-60px;background:Black">
<li>Coffee</li>
<li>Milk</li>
</ul>
</asp:Panel>
</td>
</tr>
</table>
I agree with Datoon, if it's non tabular data then it's probably worth while to put this in a regular div. The following will align your text to the left, however.
<ul style="background:Black; text-align:left;">
<li>Coffee</li>
<li>Milk</li>
</ul>
Adding the following CSS rule to the parent <div> will get it to align properly:
div {
text-align: left;
}
You can see it in action here.
I know this might sound weird, but why are you using a table instead of a div? Is this specifically data that is tabular in layout?
Usually you would use a div for none tabular data.
So you could do the following:
<div style="float:left">
Your list items here.
</div>
<div style="float:right">
Some other content here.
</div>
Remember to do the following though after:
<div style="clear:both"></div>