Foros del Web - Ver Mensaje Individual

furoya · #11 (**permalink**) 28/09/2010, 10:02

Hola todos :

Me llamó la atención el título del tema, pero cuando vi el código de ejemplo y después hablaron de "ser novatos", entendí muchas cosas y seguí por otro lado.

Aunque después me volvió a la cabeza lo de los anchor vacíos y las listas. Y regresé.

Dime de-troit, ¿los enlaces los usas porque son —casi— los únicos elementos en línea que admiten medidas?; entonces sería un buen truco y casi está justificado.

Yo iba a poner tu misma respuesta, kseso?, incluyendo la aclaración de 'details'.
Pero me parece que no es para usar listas, sino tablas.
Las flotaciones son poco manejables, no tienen sentido a menos que tengamos que crear un diseño muy 'raro', y tenemos que saber bien lo que estamos haciendo. Porque si sale mal no podemos venir a un foro a preguntar por qué; si en principio no deberían estar ahí.

Totalmente de acuerdo, rb3m, tantos anidamientos ya me marearon. De hecho, dejo un ejemplo porque ya lo hice, pero no limpio mejor el código porque borrar todas esas capas lleva tiempo y no estoy seguro de si sirven para algo que no está en ese ejemplo, pero sí en la página final.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">
body {
        background-color:#333333;
	font-size: 100%;
}

.subContainer, #container2 {
        width: 900px;
        margin: 0 auto 0 auto; !important
	font-size: 1em;
}

#container2 {
        padding-left: 30px;
        padding-right: 30px;
}

#contentContainer {
        text-align: left;
        background-color:white;
	font-size: 100%;
}

#subContainer {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
 font-size: 1em;}

#top {
        border-bottom-style : dotted;
        border-bottom-width: 2px;
        border-bottom-color : #999999;
        padding-bottom: 20px;
        margin-bottom : 20px;
}

#head {
        width: 780px;
}

#letter {
        position: relative;
        top: 35px;
        left: 27px;
}

#formTexts td {
	vertical-align: top;
}

#formTexts input {
	width: 15em; 
}

#formTexts textarea {
	width: 15em; 
}

#formContent {
        border-right-style: dotted;
        border-right-width: 2px;
        border-right-color: #999999;
        margin-right: 20px;
        padding-right: 20px;

	background: red;
	width: 18em;
}
</style>
</head>

<body>

<div id="container2"> <!-- CONTAINER 2 -->
<div id="contentContainer"> <!-- content -->
<div id="subContainer"> <!-- subContainer -->
<div id="top"> <!-- top -->
<div id="head"> <!-- head -->
<span class="titleText">CONTACTO</span>
 <br/><br/>
                        
<span class="miniTitle">ANTE SUS DUDAS CONSULTENOS</span>
<br/><br/>
                        
<span class="normalText">Este ciclo pretende adem&aacute;s revisar en forma general algunos conceptos clave, las principales fases del proceso de innovaci&oacute;n y los elementos centrales para una gesti&oacute;n de innovaci&oacute;n exitosa.</span>

</div> <!-- /head -->
                    
<div id="letter"> <!-- letter -->
<img src="img/letter.png"/>
</div> <!-- /letter -->
</div> <!-- /top -->
                
<div id="bottomC"> <!-- bottomC -->
<div id="formContent"> <!-- formContent -->
<img src="img/orangeBar.png"/>
<br/>

<table id="formTexts"><tbody> <!-- formTexts -->
<tr><td><span class="formText">Nombre:</span></td>
<td><input type="text" id="nombre"/></td></tr>
<tr><td><span class="formText">Apellido:</span></td>
<td><input type="text" id="apellido"/></td></tr>
<tr><td><span class="formText">Cargo:</span></td>
<td><input type="text" id="cargo"/></td></tr>
<tr><td><span class="formText">E-Mail:</span></td>
<td><input type="text" id="email"/></td></tr>
<tr><td><span class="formText">Tel&eacute;fono:</span></td>
<td><input type="text" id="telefono"/></td></tr>
<tr><td><span class="formText">Consulta:</span></td>
<td><textarea class="formTextArea" id="consulta"></textarea></td></tr>
</tbody></table> <!-- /formTexts -->
                        

</div> <!-- /formContent -->
                    
<div id="details" st yle="clear: both;"> <!-- details -->
DETAILS
</div> <!-- /details -->
</div> <!-- /bottomC -->
</div> <!-- /subContainer -->
</div> <!-- /content -->
</div> <!-- /bottom -->
</div> <!-- /CONTAINER 2 -->
</body>

</html>

Si aparece una diferencia de tamaño entre input's y textarea es porque usan por default fuentes distintas. Con declararle la misma a las dos clases se arregla.