J'essaie de placer le calculateur d'hypothèque sur le côté droit du site Web pour qu'il rentre dans la boîte (div) qui est censée être autour de lui. Vous pouvez voir qu'il se chevauche.

Page Web: http://www.yourwhiteknight.com/properties/

Comme vous pouvez le voir dans le code ci-dessous, la largeur de la table est définie dans l'attribut table (width = "") et dans le code CSS mais elle n'obéit pas à ces règles. Comment puis-je forcer cette table à être plus petite?

Code:

<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- Javascript function is here but no reference to width -->


<form id="mortgageCalculator">

<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
    <tbody><tr style="background-color: #496b1f; font-size:11px;">
        <td colspan="2" align="CENTER">
        <b><font color="white">Mortgage Calculator</font></b>
        </td>
    </tr>
    <tr>
        <td colspan="2"> 

            <table border="0" cellpadding="1">
                <tbody><tr>
                    <td colspan="2"><b>Mortgage Data:</b>
                    </td>
                </tr><tr>
                    <td align="RIGHT">House Price ($):
                    </td>
                    <td>


    <input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV

Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Down Pymt ($):</td>
                    <td>
                         <input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
                    </td>
                </tr>
                <tr>
                    <td align="right">Principal ($):</td>
                    <td>
                        <input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Annual Int. Rate (%):</td>
                    <td>
                        <input type="TEXT" name="interest" value="8.5" size="5">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Term (Months):</td>
                    <td>
                        <input type="TEXT" name="term" value="120" size="5">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Monthly Pymt:</td>
                    <td>
                        <input type="TEXT" name="monthlyPayment" size="5">
                    </td>
                </tr><tr>
                <td align="RIGHT">Balloon Pymt:</td>
                    <td>
                        <input type="TEXT" name="balloon" size="5">
                    </td>
                </tr>
            </tbody></table>
        </td>
    </tr>
    <tr>
        <td align="CENTER" colspan="2">
            <input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
        </td>
    </tr>
</tbody></table>

</form></div>
0
MattM 22 juil. 2015 à 22:00

2 réponses

Meilleure réponse

Le tableau ne deviendra aussi petit que le contenu qu'il contient. Vos entrées de texte dans la calculatrice sont suffisamment grandes pour limiter la taille du tableau. Définissez une largeur plus petite sur ces entrées, et tout devrait être bon!

1
kthornbloom 22 juil. 2015 à 19:02

Le problème est dans le tableau, avec les entrées là-bas. Vous pouvez ajouter une "largeur: 100%;" aux entrées et le problème est résolu.

Vous pouvez ajouter le css comme ceci:

#mortgageCalculator input {
   width: 100%;
}
0
Clau Hoollman 22 juil. 2015 à 19:20