Positionnement CSS: Pourquoi ne pas l'attribut width de travail pour ces divs?
Je suis en train d'élaborer un nouveau code HTML/CSS de l'écran. J'ai deux champs:
- Cellulaire Personnel
- De Courriel Personnelle
Les deux sont contrôlées par la même classe CSS( eci_text), les deux sont dans un div. La mise en valeurs de largeur pour que la classe ne semble pas avoir d'effet sur la div. Pourquoi et que puis-je faire à ce sujet? Je voudrais que les champs de texte à côté de chacune des 2 chaînes au-dessus de la ligne jusqu'à la verticale ( c'est pourquoi je veux ajuster la largeur de la eci_text divs )
Merci beaucoup à l'avance
Steve
<!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=ISO-8859-1">
<title>Acme Emergency Page</title>
<style TYPE="text/css">
body
{
background-color:white;
}
#container
{
margin-left:auto;
margin-right:auto;
text-align:center;
width: 99%;
font-family:Arial,Helvetica;
font-size:10pt;
}
#eci_container
{
margin-left:auto;
margin-right:auto;
width:500px;
text-align:center;
}
.paragrah_left
{
text-align:left;
}
.eci_textfield_container
{
text-align:left;
}
.eci_text
{
text-align:left;
display:inline;
width:150px;
}
.eci_textfield
{
text-align:left;
display:inline;
}
.eci_checkbox
{
margin-left:40px;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<!-- Content: Start div content: Main content area -->
<div id="content">
<h2>ACME Emergency Contact Information </h2>
<!-- Start: ECI Container -->
<div id = "eci_container">
<p class = "paragrah_left">
This voluntary information will only be used by the ACME Emergency
Fruit & Vegetable System (FAV) to tell you about emergencies when they
arise, whether you are at work or not.
</p>
<div class = "eci_textfield_container">
<div class = "eci_text">
Personal Cell*:
</div>
<div class = "eci_textfield">
<input type = "text" name= "personal_cell_phone_number">
</div>
</div>
<div class = "eci_checkbox">
<input type = "checkbox" name = "checkBoxVisiblePersonalCellPhoneNumber">
Make my personal cell phone number visible to Mark Zuckerberg's staff
</div>
<div class = "eci_checkbox">
<input type = "checkbox" name = "checkBoxUsePersonalCellPhoneNumberForAlerts">
Use this number for ENS SMS text alerts
</div>
<p class = "paragrah_left">
If you do not want your personal cell phone used, please call
</p>
<div class = "eci_textfield_container">
<div class = "eci_text">
Personal Email*:
</div>
<div class = "eci_textfield">
<input type = "text" name= "personal_email">
</div>
</div>
<p class = "paragrah_left">
If you do not want your personal email used please call
</p>
<!-- End: ECI Container -->
</div>
<!-- Content: Close div id ="content" -->
</div>
</body>
</html>
- Qui divs est le problème?
- Il serait plus facile pour nous de vous aider si nous n'avions pas de regarder l'ensemble de votre forme pour résoudre le problème. Pouvez-vous supprimer le supplément de balisage et les feuilles de style CSS comme les paragraphes, les conteneurs et les cases à cocher?
Vous devez vous connecter pour publier un commentaire.
Avez-vous essayé display:block, et flottant à gauche?
Utiliser une liste et des étiquettes au lieu de DIVs. Les DIVs ne veulent rien dire. Des listes et des étiquettes sont une bonne partie de l'utilisation de la sémantique HTML.
Voir: http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=406
... etc...
La largeur est appliqué à deux divs qui englobent les étiquettes de champ. Si vous utilisez l'extension Firebug de Firefox, vous pouvez inspecter l'élément et de voir que l'étiquette est la largeur (150px) que vous avez spécifié dans votre CSS. Quel navigateur êtes-vous en train de voir cette question?
Aussi, pour les étiquettes de champ, vous devriez être en utilisant la balise.