Foros del Web » Creando para Internet » CSS »

Div v/s contenido

Estas en el tema de Div v/s contenido en el foro de CSS en Foros del Web. Foreros :( he tirado la toalla... traté de todo pero no he logrado conseguirlo (además que no he dormido nada y ya no proceso), les ...
  #1 (permalink)  
Antiguo 13/09/2010, 15:45
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Div v/s contenido

Foreros :( he tirado la toalla... traté de todo pero no he logrado conseguirlo (además que no he dormido nada y ya no proceso), les cuento mi problema con la esperanza de que me puedan ayudar:

Primero que todo voy a mencionar que la parte de código que voy a poner es sólo una parte de contenido de toda la página que estoy armando (parte del medio, donde va el contenido central), así que les pegaré sólo ese fragmento. El problema es que mi div no se ajusta al contenido, es decir, tengo un div contenedor y dentro varios divs, pero el contenido de estos se sale de mi div contenedor, traté aplicando propiedades como height:auto, min-height, max-height... pero lo que quiero hacer es que a medida que más contenido tenga un div, más se agrande, quiero decir, que tenga tamaño dinámico, se entiende? Busqué en google el mismo problema pero nada, quizás es donde no proceso que se me está llendo un detalle, ojalá me puedan ayudar.

Les dejo el código, para esto consideren que el div color blanco es mi div contenedor y bueno, color gris oscuro es sólo el color de fondo del body:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

.subContainer, #container2 {
	width: 900px;
	margin: 0 auto 0 auto; !important
}

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

#contentContainer {
	text-align: left;
	background-color:white;
}

#subContainer {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 30px;
	padding-right: 30px;
}

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

#bottomC {
}

#formContent, #formTexts, #head {
	float: left;
}

#formTexts {
	width: 50px;
	line-height: 26px;
}

#form {
	padding-top: 5px;
}

#formContent {
	border-right-style: dotted;
	border-right-width: 2px;
	border-right-color: #999999;
	margin-right: 20px;
	padding-right: 20px;
}
</style>
</head>

<body>

<div id="container2"> <!-- CONTAINER 2 -->
<div id="contentContainer"> <!-- content -->
<div id="subContainer"> <!-- subContainer -->
<div id="top"> <!-- top -->
<div id="head"> <!-- head -->
<a class="titleText">CONTACTO</a>
 <br/><br/>
                        
<a class="miniTitle">ANTE SUS DUDAS CONSULTENOS</a>
<br/><br/>
                        
<a 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.</a>

</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/>
<div id="formTexts"> <!-- formTexts -->
<a class="formText">Nombre:</a>
<br/>
<a class="formText">Apellido:</a>
<br/>
<a class="formText">Cargo:</a>
<br/>
<a class="formText">E-Mail:</a>
<br/>
<a class="formText">Tel&eacute;fono:</a>
<br/>
<a class="formText">Consulta:</a>
<br/>
</div> <!-- /formTexts -->
                        
<div id="form"> <!-- form -->
<input type="text" name="nombre"/>
<br/>
<input type="text" name="apellido"/>
<br/>
<input type="text" name="cargo"/>
<br/>
<input type="text" name="email"/>
<br/>
<input type="text" name="telefono"/>
<br/>
<textarea class="formTextArea" name="consulta"></textarea>
<br/>
</div> <!-- /form -->
</div> <!-- /formContent -->
                    
<div id="details"> <!-- details -->
DETAILS
</div> <!-- /details -->
</div> <!-- /bottomC -->
</div> <!-- /subContainer -->
</div> <!-- /content -->
</div> <!-- /bottom -->
</div> <!-- /CONTAINER 2 -->
</body>

</html>
(Tenía las clases a nivel de hoja de estilo .css, así que hay algunas clases de texto que no están aquí, no son importantes por ahora)

Saludos y muchas gracias por darse el tiempo de leer, estaré muy agradecido con cualquier tipo de ayuda que me puedan otorgar.

Adiós!

Última edición por de-troit; 13/09/2010 a las 16:17
  #2 (permalink)  
Antiguo 13/09/2010, 16:27
Avatar de Omegakenshin  
Fecha de Ingreso: junio-2010
Ubicación: Costa Rica
Mensajes: 156
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: Div v/s contenido

salu2 compañero, yo soy muy novato tambien en esto pero usualmente para mantener divs asi, simplemente lo ke yo hago es no especificar la altura para el contenedor principal y poner la altura para los subcontenedores,

y para lo ke dices ke se salen pues prueba poner un overflow:hidden; a tu contenedor principal...
salu2 (sorry si no ayudo muxo XP)
  #3 (permalink)  
Antiguo 13/09/2010, 16:32
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Div v/s contenido

No te preocupes, yo también soy novato :)

Bueno, respecto a lo que dices, justamente para que no me ocurra lo que me ocurre lo que hacía era no especificarle altura al div, pero no sé porque ahora (a pesar de no haberle especificado altura) mi contenido se sale :S

Probé poniendo un overflow:hidden pero desaparece la parte que no entra en el div.

Muchas gracias por darte el tiempo de leer, saludos! :)
  #4 (permalink)  
Antiguo 13/09/2010, 16:36
Avatar de Omegakenshin  
Fecha de Ingreso: junio-2010
Ubicación: Costa Rica
Mensajes: 156
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: Div v/s contenido

moderador ELIMINAR ESTE DOBLE POST
  #5 (permalink)  
Antiguo 13/09/2010, 16:43
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Div v/s contenido

doble post?
  #6 (permalink)  
Antiguo 13/09/2010, 17:11
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Div v/s contenido

solo agrega overflow: auto al #subContainer


tiene que quedar algo así:

Código HTML:
#subContainer {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 30px;
	padding-right: 30px;
	overflow:auto;
}



Saludos
  #7 (permalink)  
Antiguo 13/09/2010, 17:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div v/s contenido

¿Podría identificar el texto que desborda y la caja desbordada?

De momento, la sintaxis de los enlaces la tiene mal, faltaría su /href/ y /title/
Así como es una mala praxis conformar esa relación de enlaces /class="formText"/ tal como la tiene y el uso de /br/ para forzar el retorno de carro.
Use una lista /ul-li-a/
  #8 (permalink)  
Antiguo 14/09/2010, 08:22
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Div v/s contenido

Caja desbordada: <div id="contentContainer">
Contenido que desborda: Todo el contenido y divs que estan contenidos dentro del div#contentContainer.

overflow: auto; me coloca un scrollBar en el div =/

Saludos!
  #9 (permalink)  
Antiguo 14/09/2010, 11:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div v/s contenido

añadadiendo en su css
Cita:
#details {clear:both;}
forzará el crecimiento, ya que #formTexts está flotado. Pero desconozco más datos sobre dónde y como quiere posicionar /#details/, así que quizás no sea lo más indicado.
Pero como ya sabe el porqué le ocurre, si no pudiese utilizar esa solucción, siempre puede recurrir a incluir en su html:
Cita:
</div> <!-- /formContent -->
<div class="limpia"></div>
<div id="details"> <!-- details -->
con el css indicado.

Aunque no influye, a ésta caja le tiene una anchura insuficiente (50px)
También tiene una etiqueta de cierre/</div>/ sobrante al final del documento.
  #10 (permalink)  
Antiguo 14/09/2010, 17:55
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Div v/s contenido

¡ugh! Lo que tu página tiene es un caso de divitis aguda. Creo que fácilmente puedes eliminar la mitad de los divs. Y meter las etiqueta de los campos en labels, no a. De hecho puedes hacer esto:

<label>Nombre: <input type="text" name="nombre" /></label>

y eliminas como la mitad de tus problemas sin necesidad de usar float (que por regla general debe dejarse sólo como último recurso).
  #11 (permalink)  
Antiguo 28/09/2010, 11:02
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Div v/s contenido

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.
  #12 (permalink)  
Antiguo 28/09/2010, 12:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div v/s contenido

Veamos si tengo suerte y hoy puedo publicar una respuesta.

Cita:
y eliminas como la mitad de tus problemas sin necesidad de usar float (que por regla general debe dejarse sólo como último recurso).
¡¿0_0?!
Otra afirmación no razonada o documentada, en exceso categórica. Pero no es esa opinión lo que me ha traído por aquí.

Primero lo más obvio, que es manifestar la mala impresión que causa que el solicitante de ayuda no haya dejado constancia de su paso por este tema tras 14 días. Fail.

Segundo y principal:

Furoya, parece que últimamente andamos a la gresca (broma).
¿Una tabla o una lista para un menú (grupo de enlaces)? Bueno, todo depende de cómo se catalogue.
¿Es una información (datos) correlacionados entre ellos y presentados de forma ordenada en una matriz de X por Y elementos? Si se ve así, aceptada la tabla.
Pero más bien creo que son elementos de una relación, carentes en sí mismos de información, por lo que deberían ir en el tag creado para ese menester: una lista (ul/li/a/)

Otra cosa distinta sería que esos enlaces fuesen el contenido (información) principal y razón de ser de la página. Pensemos en una "granja de enlaces" a páginas de una determinada temática. Ahí quizás si habría más campo para contemplar el uso de una tabla.

Y retomo mi preámbulo. ¿Float sí o no?
Mientras la familia de ie no admita el uso de los valores avanzados o más complejos de /display/ (ya sea /inline-block/ o/table/ con sus asociados, etc), será imprescindible el uso de /float/ para poder poner adyacentes dos elementos de bloque. Y totalmente lícito y nada punible o demonizable su utilización.

Creo.

Otra cosa muy distinta es encontrarse con efectos no previstos en su uso debido al desconocimiento de las particularidades asociadas a cada uno de los varios valores de cada propiedad. Pero para ello está el aprendizaje.
  #13 (permalink)  
Antiguo 04/10/2010, 16:38
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Div v/s contenido

Exactamente. "Depende de cómo se catalogue".

La propiedad float fue creada para hacer un efecto muy de diagramación gráfica : que un texto "rodee" una imagen y que se vaya acomodando en toda su altura, a pesar de que ambos sean "in line". Pero es un comportamiento forzado, no es natural en el flujo de la página que muestra el navegador, por eso no nos sorprende que en alguna situación termine en un salto, un desfasaje o un desborde.
El W3C desalienta el cambio de valor por default en display; más exactamente, si un elemento es block no se lo debería convertir a inline y viceversa. Lo que se cambia es el elemento.
Sí, ya sé, entre lo que recomiende el Consortium y lo que hagamos nosotros puede haber un abismo. Pero en este caso la única razón que se me ocurre para que valusk haya reemplazado los (digamos por ejemplo) span por div, y después simule una condición "in line" con float es el encolumnado de los campos.
Si realmente los hubiese acomodado "en línea", ya no podría igualar los anchos (o sí, pero usando un truco muy resistido).

Lo que no llego a entender es lo de las listas. Supongo que te estás refiriendo más bien a las listas de definición y no a las ordenadas, desordenadas y mucho menos a las anclas; aunque estamos en la misma, porque su estructura es más o menos ésta :

Código:
Definición término 1.
	Descripción de definición 1.1. 
	Descripción de definición 1.2. 
	Descripción de definición 1.3. 

Definición término 2.
	Descripción de definición 2.1. 
	Descripción de definición 2.2. 

Definición término 3.
	Descripción de definición 3.1. 
	Descripción de definición 3.2. 
	Descripción de definición 3.3.
En cambio la tabla tiene esta estructura :

Código:
Encabezado fila 1.	DATO A.1.
Encabezado fila 2.	DATO A.2.
Encabezado fila 3.	DATO A.3.
Puede confundir un poco que los table head estén a la izquierda y no arriba, pero claramente el efecto que busca nuestro desvanecido amigo es hacer una tabla :

Código:
Nombre  :	[campo A1]
Apellido:	[campo A2]
Cargo   :	[campo A3]
E-Mail  :	[campo A4]
Teléfono:	[campo A5]
Consulta:	[campo A6]
Por supuesto, nosotros sabemos que la metemos ahí para maquetar, pero como el contenido realmente está tabulado, la podemos usar con una amplia sonrisa sobradora mientras los fundamentalistas del diseño HTML se tragan sus litros de bilis.

Si hay un texto que la rodea desde la derecha, entonces vale el float: left para toda la tabla. De otra forma, no tiene sentido.
  #14 (permalink)  
Antiguo 19/10/2010, 11:42
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Div v/s contenido

Bueno, bueno, bueno...
Me la paso criticando a a los que postean sin leer el tema, y resulta que nosotros estamos haciendo lo mismo.

Ya entendí de donde viene lo de

Cita:
¿Una tabla o una lista para un menú (grupo de enlaces)?
Lo que pasa es que no le di importancia, porque a pesar del silencio ante mi pregunta, tuve por descontado que el uso de anclas no fue para 'saltar' a ningún lado sino porque la etiqueta anchor (<a>) es una de las pocas in line que acepta width. Está ahí para simular un encolumnado; como en una tabla. Por cuestiones de doctype o de versión de navegador, ya probé que ahora tampoco los enlaces permiten un cambio de ancho, pero igual estoy seguro de que no es una lista de links, y semanticamente no deberían ser más que span; aunque el "truco" para darles ancho es un poco engorroso : usa los span anidados con una imagen espaciadora o un margen superpuesto y la posición ...

Bah. ¿qué voy a explicar?. El que lo conoce no lo necesita; y al que no, le va a servir más un ejemplo

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<html>
<head>
<style type="text/css">
body {font:100% sans-serif; }
p {float:left; width:12em; font-size:1.4em; background-color:red; 
margin:0; }
#formulario {background-color:silver; height:auto; font:1em 
sans-serif; }
#formulario input, textarea {font:0.8em sans-serif; width:6em; 
border:0; background-color:transparent; }
</style>
</head>
<body>
<h2><tt>span</tt> con ancho fijo sin usar tablas.</h2>

<div id="formulario">

<p>

<span style="background: yellow; font-size:1em;"> 
Nombre:</span>
<span style="background: lime; position: absolute; 
left:6.68em; "><input></span>
</span><br>

<span style="background: yellow; position: relative; font-size:1em;">
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" 
style="height:1px; width: 6.4em; margin:0; " alt="Relleno"><span 
style="position: absolute; left:0">Apellido:</span><input 
style="background:lime; ">
</span><br>

<span style="background: yellow; position: relative; 
font-size:1em;"><img 
src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" 
style="height:1px; width: 6.4em; visibility:hidden; " alt="Relleno"><span style="position: absolute; 
left:0">Cargo:</span><input style="background:lime; ">
</span><br>

<span style="background: yellow; position: relative; 
font-size:1em;"><img src="data:image/bmp;base64,
Qk1CAAAAAAAAAD4AAAAoAAAAAQAAAAEAAAABAAEAAAAAAAQAAABhDwAAYQ
8AAAAAAAAAAAAAAAAAAP///wAAAAAA" alt="" 
style="height:1px; width: 6.4em; "><span 
style="position: absolute; left:0">E-Mail:</span><input 
style="background:lime; ">
</span><br>

<input value="Teléfono:" style="background: yellow; font-size:1em; 
width:6.4em; " readonly="readonly"><input 
style="background:lime; "><br>

<span style="background: yellow; font-size:1em; white-space:pre; 
">Consulta: 	</span><input style="background:lime; "></span><br>

</p>

<b>"Detail" de relleno.<br>
<br>
A partir de acá hay un párrafo largo, porque la idea es que en algún 
momento la altura de este grupo de líneas supere a la del formulario 
que está a la izquierda y se note cómo el texto envuelve a la capa 
con los datos que está flotando justo antes con los campos para 
llenar. Por supuesto que se puede cambiar el tamaño de la ventana 
para ver el efecto en el mismo navegador sin necesidad de meter tanto 
"relleno"; pero ya que el espacio es gratis aprovecho para escribir 
un poco más.<br>
El ancho del campo "Nombre" está fijado sólo con CSS, dando una 
posición absoluta al <tt>input</tt> dentro de un <tt>span</tt> que 
también contiene al encabezado. También podría usarse un margen.<br>
El campo "Apellido" tiene como relleno espaciador una imagen real 
(<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" 
alt="Cuadro semitransparente.">) de <tt>6.4em</tt> de ancho por 
<tt>1px</tt> de alto. Lo mejor es que sea transparente, aunque en el 
ejemplo usé una semitransparente para que se pudiese ver.<br>
El campo "Cargo" tienen la misma imagen, pero muestra como se puede 
usar hasta una *.jpg, si le damos <tt>visibility: hidden</tt>"; 
aunque si se quita el CSS la imagen se ve como una línea de más.<br>
El campo "E-Mail" usa un método para <u>Mozilla</u> que evita la 
aparición del <tt>alt</tt> como texto si no encuentra la imagen en el 
disco o el servidor, y es el de meter el código de una imagen en 
el mismo código fuente de la página. Usando a <u>Firefox</u> en 
<i>quirk mode</i> (o simplemente eliminando la línea 
<tt>"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"</tt>) 
las imágenes que no se cargan aparecen como un 
elemento con el ancho y alto  que tengan declarados, pero en verdad 
hay que usar el <i>doctype</i>. En el ejemplo no oculte el relleno 
para que se pueda apreciar mejor (es la línea negra).<br>
El campo "Teléfono" usa 2 <tt>input</tt>, uno para el encabezado —que 
no es editable y se ve como texto— y el otro para ongresar los datos. 
Como este elemento acepta valores de ancho, podemos usarlo para 
"espaciar" hasta el elemento siguiente.<br>
El último campo "Consulta" también es puro CSS, y aprovecha el estilo 
tipo <tt>pre</tt>(formated) para "rellenar" con espacios y/o 
tabulaciones, lo que simula el encolumnado como si fuese una tabla. 
El problema es que no hay mucho control sobre las medidas y puede 
verse desajustado si, como en este caso, se lo combina con otros 
métodos o con columnas de diferente cantidad de caracteres.</b>
</div>
</body>
</html>
Antiguamente se usaban imágenes con src="0.0"; y por supuesto, en IE sigue funcionando, el problema apareció cuando otros navegadores empezaron a reemplazar las que no encontraban con el texto del alt sin ninguna diferenciación con el texto del documento.
Entonces hubo que empezar a poner una "transparente.gif" o similar (asegurándose de que el navegador la encontrara).

Aunque después de mucho rezongar en éste y en otros foros, las últimas versiones de Chrome y Opera ya muestran un elemento con atributos que asemejan a la imagen para mostrar un texto alternativo. Firefox todavía no, porsu... :-/ .

Hay, está claro, más formas de lograr el efecto. Una que no puse, porque no creo que sea muy compatible, es la de aprovechar que hay sólo dos "columnas" y que la segunda seguro va a tener ancho fijo porque son cajas de formulario. Se puede meter cada "fila" en un párrafo, y justificarlo por palabra (inter-word). Si cada "header" es una cadena sin espacio, y éste aparece sólo para separarlo del campo editable, entonces el justificado va a mandar el texto a la izquierda y el campo a la derecha.
No lo probé, pero en algún navegador debería funcionar.

Lo de inline-block que mencionaste también es práctico, kseso?. En IE anda desde el 6.x, en los demás no sé. Lo que no recomiendo es meter estilos de tabla con CSS, porque para eso ya está el HTML. Es un criterio elemental : algunos predican usar solamente una de las propiedades; pero hay que usar todas, o ninguna, porque de otra forma sería como poner una td sin una table. Y si lo que estamos haciendo no es una tabla, no deberíamos usar ni etiquetas ni propiedades de tabla. No se puede ser 'coherente' a medias con la semántica. Es un tema del que ya se habló, y dejo algún enlace al final.

Otra manera es usar -moz-column. O quizá una fuente 'monospace' en un pre, así podemos controlar exactamente la posición de cada columna.
Para eso también existen caracteres unicode de "ancho fijo", pero si del lado cliente no hay instalada una fuente que llegue del 65281 al 65373 no los va a poder leer.


Lo que quiero decir con todo esto es que hay chorosientos fil piriyones de maneras de hacer el efecto. Y hay que conocerlas todas, para después elegir la que mejor se adapte a nuestro diseño.



Y déjense de romper con las flotaciones. ¿Sí?.


Centrar datos, tablas, textos,... en la vertical

Dando el formato de tabla con div

problema con la etiqueta <span>

TAB en HTML

¿El diseño sin tablas tiene futuro?

Etiquetas: contenido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:55.