Alignement DIV/Formulaire

D'abord permettez-moi de commencer en disant que je ne suis pas développeur web. Je travaille plus sur des choses embarquées. Je suis complètement ignorant des normes de design Web ou des pratiques courantes. Toute aide avec être très apprécié.Alignement DIV/Formulaire

Ce que je suis en train d'accomplir

Pour faire un formulaire avec plusieurs rangées de cases/bas de goutte/textboxes qui est incroyablement simple et intuitive. Il doit être compatible avec IE 6+. Tous les autres navigateurs ne sont pas obligatoires (il s'agit d'une solution interne qui ne sera affichée que sur IE).

La chose que j'ai essayé d'accomplir est de créer une autre colonne de cases à cocher qui s'alignent comme l'ensemble actuel.

Voici ce qu'il ressemble actuellement dans IE

Mon code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<style type="text/css"> 
.right_div_check_boxes { width:70%;float:right;} <!-- 75% --> 
.left_div_input_boxes {width:15%;float:left;} <!--15%--> 

</style> 




<div class="left_div_input_boxes" style="position:relative"> 

    <form> 
    <label>Submitted by (First Name)</label> 
    <input type="text" style="width:150px" name="firstname" /><br> 
    <label>Submitted by (Last Name)</label><br> 
    <input type="text" name="lastname"/> 
    <label>Employee Number</label><br> 
    <input type="text" name="employnum"/> 


    <form> 
    <label>What</label> 
    <select style="width:150px" name="observer"> 
    <option value="other">TEST</option> 
    <option value="other">TEST</option> 
    <option value="other">TEST</option> 
    </select> 


    <label>Who</label> 
    <form action=""> 
    <select style="width:150px" name="who"> 
    <option value="other">TEST</option> 
    <option value="other">TEST</option> 
    <option value="other">TEST</option> 
    </select> 




    <label>Operation Code</label> 
    <select style="width:150px" name="opcode"> 
         <option value="other">TEST</option> 
         <option value="other">TEST</option> 
        </select> 



        <label>Center</label> 
        <select style="width:150px" name="cost"> 

         <option value="Zone 1"> Zone 1 </option> 
         <option value="Zone 2"> Zone 2 </option> 
         <option value="Zone 3"> Zone 3 </option> 
        </select> 
        </form> 

</div> 


<div class="right_div_check_boxes" style="position:relative"> 
<label>Dangers</label> 
<form> 

<input type="checkbox" name="vehicle" value="Bike" />Line of Fire<br /> 
<input type="checkbox" name="vehicle" value="Car" />Respirtory Protection<br /> 
<input type="checkbox" name="vehicle" value="Car" />Ears/Hearing Protection<br /> 
<input type="checkbox" name="vehicle" value="Car" />Eye/Face Protection<br /> 
</div> 
<br /> 



</head> 
<body> 

</body> 
</html>

Source

2011-08-18 danieloi

Pouvons-nous avoir un lien vers une page par exemple, ou une capture d'écran ce que vous avez/ce que vous voulez réaliser? – Bojangles

Pourquoi déclarez-vous style = "position: relative" en ligne plutôt que dans le css avec le reste du style? – yoozer8

Utilisez une table au lieu d'un div. Si vous avez besoin d'ajouter plus de lignes, c'est au moins aussi simple que d'ajouter plus de lignes dans ce contexte. Ajouter une autre colonne de cases à cocher est aussi facile. Ajoutez simplement une autre colonne à la table.

Source

2011-08-18 15:04:40 yoozer8

Voici ce que vous voulez faire. Enveloppez la forme de la colonne de gauche dans une div avec cette classe:

.left_column { 
float:left; 
width:50%; 

}

Et la colonne de droite avec un div avec cette classe:

.right_column { 
    float:right; 
    width:50%; 

    }

Source

2011-08-18 15:08:16

Alignement DIV/Formulaire

Répondre

Questions connexes