CODEWITHSUNDEEP
htmlcssforms
Jessica
Jessica

Reputation: 119

Align text and input issues with CSS

Would like term and faculty to look like student name and clinical site with text in top left and input in bottom right.

This wants me to add more information about the code but I have nothing more to say about it.

This is displayed on a webpage, We are having problems getting the alignment of term and faculty to look like student name and clinical site

<?php
include ($_SESSION['Root_Path_Full'].'roles/student/scripts/studentqueries.php');
function drawStudentLabel($currentUser, $userinfo) {
echo ('<table id="user_label" border="1">
            <tr>
            <th>Student name: <input class="u_label" readonly                 type="text" value="'.$userinfo['FullName'].'" name="student_name"/></th>
                <th>Term: <input class="u_label" readonly value="'.$userinfo['TermID'].'" type="text" name="term"/></th><br>
                <th>
                    <b>KEY: </b>
                    <a href="../../main/KeyFull.php" target="_blank" class=\'help\' title="Consistently exceeds expected performance">S+</a>/   <a href="KeyFull.php" target="_blank" class=\'help\' title="Performs as expected">S</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Needs improvement">NI</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Unsafe or Vastly Deficient">U</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Not applicable">NA</a> 
                    /   <a href="KeyFull.php" target="_blank" class=\'help\' title="Not Observed by clinical instructor">NO</a> 
                </th></tr>
            <tr>
                <th>Faculty:<input class="u_label" readonly value="'.$userinfo['Instructor'].'" type="text" name="faculty"/></th>
                <th>Clinical Site(s): <input class="u_label" type="text" name="clinical site"/></th>
                <th>- Click on a rating for full explanation</th>
            </tr>
            <tr>');
$result = getStudentAvailClinicals($currentUser);
echo "<td><label>Available Clinicals: </label></td>";
echo "<td ><select id='clinical_id' name='clinicalids'>";
while($row = $result->fetch_assoc()) {if (isset($clinicalids) && ($clinicalids == $row['ClinicalID'])) {
        echo '<option value="'.$row['ClinicalID'].'" selected>'.$row['ClinicalID'].'</option>';
    } else {
        echo '<option value="'.$row['ClinicalID'].'">'.$row['ClinicalID'].'</option>';
    }
}   
echo "</select></td>";  
echo '<td><input type="submit" name="activate" value="Activate" onclick="reloadForQuestions();"/></td></tr></table>';

}

CSS

#user_label {
text-align: left;
background-color: #FFFFCC;
float: right;
}

.u_label {
float: right;
text-align: center;
}

#keys {
background-color: #CFCFFF;
text-align: center;
}

#keys td:hover {
background-color: white;
}

#clinical_id {
width: 50%;
text-align: center;
}

Upvotes: 0

Views: 342

Answers (2)

ralph.m
ralph.m

Reputation: 14345

It would be better to wrap the text in <label> tags and set the label to display: block;. That will give you want you and and result in better markup to boot:

<label for="term">Term:</label> 
<input class="u_label" id="term" type="text" name="term"/>

EDIT: OK, beaten to it, but I'll leave it up because of the mention of for / id.

Upvotes: 0

Manish Sharma
Manish Sharma

Reputation: 1720

wrap your text in label like this

<th>
   <label>Student name:</label>
   <input class="u_label" type="text" />
</th>

and add this css

label{ display:block;}

check your solution here

http://jsfiddle.net/acVCk/

Upvotes: 2

Related Questions