Taking HTML and changing to CSS to override plugin - html

I have the code for HTML and the developer of the plugin said to create a file which I have to change some of the wording the customer sees. I found the code in HTML (via firebug) and put it in the form but its not working so I am think I need to change more of it into CSS. This is what I have so far but again it didn't change anything.
I just want the wording to change instead of unlimited content just unlimited etc.
Thank you for any help.
<div class="fee-options-for-category">
<table class="fee-options">
<thead>
<tr>
</thead>
<tbody>
<tr class="fee-option fee-id-1">
<td class="fee-selection">
<input id="wpbdp-fees-radio-1" type="radio" data-canrecur="0" checked="checked" value="1" name="fees[91]">
</td>
<td class="fee-label">
<label for="wpbdp-fees-radio-1">Basic Listing</label>
</td>
<td class="fee-amount"> — </td>
<td class="fee-duration"> Unlimited </td>
<td class="fee-images"> 0 </td>
</tr>
<tr class="fee-description fee-id-1">
<td></td>
<td colspan="4">✓ put as much a you want.</td>
</tr>
<tr class="fee-option fee-id-2">
<td class="fee-selection">
<input id="wpbdp-fees-radio-2" type="radio" data-canrecur="1" value="2" name="fees[91]">
</td>
<td class="fee-label">
<label for="wpbdp-fees-radio-2">Featured Listing</label>
</td>
<td class="fee-amount"> $ 12.95 </td>
<td class="fee-duration"> 365 days </td>
<td class="fee-images"> 5 </td>
</tr>
<tr class="fee-description fee-id-2">
<td></td>
<td colspan="4">
✓ Unlimited content .
<br>
✓ Ratings support.
<br>
✓ Ability to attach files to your listing.
</td>
</tr>
</tbody>
</table>
</div>
thank you in advance
Susan

Related

indentation in a web document <td></td>

I'm working on a form in my application and trying to clean up the code that was put in place before me. HEre's something I'm coming across that seems like bad practice and I am having a hard time trying to abbreviate it and clean it up.
Here's the code...
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="6%"></td> <---- I want to get rid of this!
<td width="45%">
<asp:CheckBox ID="chkBHRAExpiresDischarge" runat="server" onclick="RadioControl(this);" Text="Upon my discharge from treatment" />
</td>
<td>
<asp:CheckBox ID="chkBHRAExpiresReceiptOfInfo" runat="server" onclick="RadioControl(this);" Text="Upon receipt of the requested information" />
</td>
</tr>
<tr>
<td></td> <------- Have to keep adding this for every checkBox
<asp:Checkbox ID=.............."
</tr>
So what I'm trying to get rid of the the initial indentation, mainly ....
<td width="6%"></td>
Because this is in place, i have to do a
<td></td>
before every single row otherwise the indentation dissapears. Is there any way to fix this so that all my checkboxes are indented?
You can use colspan="2" on the checkbox cells and put padding-left: 6% as a style. Here's a JS fiddle. I added a row above your first row to show the column spacing, modified the first row use this change, and left the second row intact.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
edit: Also, I recommend validating your HTML. You can wrap your code snippet up with a doctype and the other necessary items to get identify errors and warnings at https://validator.w3.org.
<!DOCTYPE html><html><head><title>Title is Required!</title></head><body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
</body><html>
Not sure if you'll find this acceptable, but you could keep the <td width="6%"></td> and give it a huge rowspan value. So like this:
<td width="6%" rowspan="999999"></td>
Then you can omit the empty <td></td> for the first 999999 rows. Most likely you have fewer rows than that; or if not, just make the rowspan even higher. The table will not become longer just because of the huge rowspan value.
Of course this all breaks down if you also have rows where the indent should not be applied; a fix for that could be to calculate the exact rowspan value in advance.

SharePoint 2010 MasterPage Footer - Custom Table

Good Morning,
Little bit of help f possible. I have customised my SharePoint masterpage with a footer. This footer has a table in it which is split up into columns.
Within one of the columns I have added 3 custom search boxes, a sharepoint 2010 hit counter webpart and some text and a logo.
However when I publish this page not all of these elements are displayed. I know the page loads them as I can see them when I view the source code for the page so I am guessing they are hiding under the first element.
Enclosed is the code I am using within this table. If anyone is able to offer some advice I would be graetful.
<table width="350" border="0" cellspacing="0" cellpadding="1">
<div>
<tr>
<td style="height: 22px">
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</div>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<span lang="en-gb">
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="True" SinceDate="10/11/2014 10:00:00" ChromeType="TitleAndBorder" Template="<div style="height: 20px; width:200px;background-color:#fead30; Segoe UI;font-family: arial; font-size: 14px; color:#2e3e3f;padding:6px"><strong>{hits}</font></strong> Page hits since {since}<br>" ID="g_a2b9d6ba_62b2_41b5_8536_21e1972eab00" WebPart="true" __WebPartId="{a2b9d6ba-62b2-41b5-8536-21e1972eab00}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></span>
</td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<span lang="en-gb"> Created by <strong>
<a href="mailto:%20ray.spiteri#bbmmjv.com" class="style4">Ray
Spiteri</a></strong> and <strong>
Tim Quadling</strong></span></td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<img alt="" valign="bottom" align="left" src="http://bbmmtoday.bbmmjv.com/SiteAssets/bbmm%20logo.png" width="286" height="26" /></td>
</tr>
<tr>
<td>
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="False" SinceDate="10/11/2014 09:00:00" ChromeType="None" Template="Page Hits: {hits}" ID="g_5e6becd0_a22c_4549_8b43_f9a7c860a639" WebPart="true" __WebPartId="{5e6becd0-a22c-4549-8b43-f9a7c860a639}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></td>
</tr>
</table></td>
</tr>
</table>
There are three suspicious things in your HTML:
element after the element with ending between
and Unpair and
Two elements in the end while only 1 opening
All these HTML errors mean that it's on browser how it is rendered. And mostly it's rendered "wrong". Because it's incorrect.

HTML table td's not properly alignt

I'm having an weird problem. I've got an table with an input and some text. Only problem is that 1 row is shorter than the others.
I've moved the row down, but that also didn't work. I've also compared them with the other rows, but i can't find the difference.
An image says more than thousands words they say, so here's an screen pick from the live testing area:
Also, here's an JSFiddle of the relevant code.
And here's the code also:
<table class="radio">
<tbody>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="pickup.pickup0" id="shipping_method_pickup" />
</td>
<td colspann="3"><b>Hello</b>
</td>
<td style="text-align: right;">
<label for="pickup.pickup1">0,00</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weight.weight_5" id="weight.weight_5" checked="checked" />
</td>
<td colspan="3"><b>Verzending op gewicht</b>
</td>
<td style="text-align: right;">
<label for="weight.weight_5">2,20</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="weighttat.weighttat_5" id="weighttat.weighttat_5" />
</td>
<td colspan="3"><b>Verzending via Post.nl</b>
</td>
<td style="text-align: right;">
<label for="weighttat.weighttat_5">6,75</label>
</td>
</tr>
<tr class="highlight">
<td>
<input type="radio" name="shipping_method" value="dhlpickup.dhlpickup_5" id="dhlpickup.dhlpickup_5" />
</td>
<td colspan="3"><b>Verzenden via DHL Afhaalservice ( Kies hier een DHL afhaalpunt </b>
</td>
<td style="text-align: right;">
<label for="dhlpickup.dhlpickup_5">4,50</label>
</td>
</tr>
</tbody>
</table>
You have a small spelling error
An extra n in colspann
Your first row's attribute colspan is wrong, change:
<td colspann="3"><b>Hello</b>
with:
<td colspan="3"><b>Hello</b>
Here is the fiddle updated: http://jsfiddle.net/D5fJa/1/
More info about colspan attribute: http://www.w3schools.com/tags/att_td_colspan.asp

I don't understand how to add a table inside a div

I have a very simple table and I would like to understand what is incorrect with using this . I have entered a styling of color: red; just to visualize where the will work correctly.
<table>
<tr>
<td colspan=2>
<div id="transportation_table" >
<tr>
<td align="right"> Flights (round trip) </td>
<td align="right"> <input type="text" size="10" id="flights" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Oversized baggage fee (skis) </td>
<td align="right"> <input type="text" size="10" id="oversized" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Taxi to airport, shuttle to resort (X2) </td>
<td align="right"> <input type="text" size="10" id="shuttle" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
</div>
</td>
</tr>
</table>
You are not declaring a table inside of your div. Tr elements belong inside of tables.
See: http://dev.w3.org/html5/markup/tr.html
That is likely the big error you are seeing.

Hiding text and use Radio button to view it

I am trying to have some content show/appear if a certain radio button (YES) is selected. I have provided the text I have in HTML form. I believe this should be a very simple code but I am VERY rusty on my HTML. This is all within a table. If the YES radio is chosen, I would like the 3 Quantity portions to appears but if not then I would like them hidden. I hope this helps...
<tbody>
<td class="style1" colspan="2">
<strong>Room Setup<br>
<tr>
<span class="style2"><em>Complete where applicable</em></span>
</strong>
</td>
<td style="width: 255px;">
*Is a Room Setup Required?
</td>
<td style="width: 202px;">
<input name="roomsetup" value="yes" type="radio">
Yes<br>
<input name="roomsetup" value="no" type="radio"> No
</td>
</tr>
<tr>
<td style="width: 255px; height: 14px;">
</td>
<td style="width: 202px; height: 14px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="roomchairs" value="yes" type="checkbox"> Chairs Needed<br>
<input name="roomchairsquantity" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktables" value="yes" type="checkbox"> Tables Needed<br>
<input name="roomquantitytable" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktableclothes" value="yes" type="checkbox"> Tableclothes
Needed<br>
<input name="roomquantitycloth" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
</td>
<td style="width: 202px;">
</td>
</tr>
There are about two ways you can do this.
(1) Using PHP
<?php
if($_POST["RADIOBOX NAME"] =="OPTION YOU WANT TO SELECT") {
echo "WHAT YOU WANT TO SAY";
//USE THE ECHO AS MUCH AS NEEDED
}
?>
(2) I think that there is a JavaScript for this, however, I am not familiar with JavaScript.
You'll need some javascript for that. If you can use something like jQuery, this is really easy to do, and it's easy to find brazillions tutorial on Internet.
For exemple this one or this one