Align text and input issues with CSS

Question

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;
}

Well the only thing I spot is that its related wit hthe width of the text. You should give it a max-width so it breaks rule and goes further one lin down — DiederikEEn
– DiederikEEn, Commented May 2, 2013 at 12:55
Can you set that under .u_label as max-width: auto? or do i need to put a pixel in there? — Jessica
– Jessica, Commented May 2, 2013 at 13:12

Manish Sharma · Accepted Answer · 2013-05-02 13:06:02Z

2

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/

answered May 2, 2013 at 13:06

Manish Sharma

1,72014 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jessica Over a year ago

That's how you use that site Thanks guys!

ralph.m · Accepted Answer · 2013-05-02 13:08:49Z

0

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.

answered May 2, 2013 at 13:08

ralph.m

14.4k4 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

Align text and input issues with CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related