image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

Texto en columnas - con capas

Volver al foro | Responder | Añadir nuevo tema


De: maria
Fecha: 30/05/2005
Mensaje:

hola, es la primera vez que escribo y estoy empezando con el tema de css.

Mi consulta es la siguiente, tengo una capa y dentro de ella quiero escribir unos datos que van alineados en 4 columnas :

Nombre    Direccion   Telefono   Mail

Necesito saber como hacer para que los datos queden alineados en columnas.

Les agradezco mucho

Saludos

mvirginia0102@gmail.com




Quizás le interese
De: jbosch(vosk)
Util para: 2 personas

Fecha: 31/05/2005
Mensaje:

creo que puedes usar tablas para hacerlo sin necesidad de complicar el codigo; que css sea mas actual no implica que sea mejor en todos los casos (vamos, creo yo), a la vez que amplias el numero de navegadores que mostraran el codigo. de todas formas aquí va un ejemplo:

<html><head></head><body onResize="location.reload();">
<div id="d" style="border-style:solid;border-width:1">
<script>
TLLETRA=12;
FLLETRA="Verdana";
var IND=1;
var anch=document.getElementById('d').offsetWidth;
if(navigator.appName.indexOf('Netscape')==0) {anch-=4;var NSN;IND=5;}

var cab=new Array('Nombre','Dirección','Teléfono','Mail');
var pos=new Array;

var aDisp=anch/cab.length;
var pPar=15;
for(var q=0;q<cab.length;q++)
 {
 pos[q]=pPar;
 pPar+=aDisp;
 }

var py=document.getElementById('d').offsetTop;
for(var q=0;q<cab.length;q++)
 {
 document.write("<span id='c"+q+"' style='position:absolute;top:"+py+";left:"+pos[q]+";z-index:1;width:"+aDisp+"'><b>"+cab[q]+"</b></span>");
 }

var nom=new Array('Nom0 Ap10 Ap20','Nom1 Ap11 Ap21','Nom2 Ap12 Ap22');
var dir=new Array('c/dir0, nº0','c/dir1, nº1','c/dir2, nº2');
var tel=new Array('nnn nnn nnn','nnn nnn nnn','nnn nnn nnn');
var cel=new Array('usuario0aserv.loc','usuario1aserv.loc','usuario2aserv.loc');
var rec=new Array(nom,dir,tel,cel);

var elem,tx,txAnt,alt;
for(var q=0;q<rec.length;q++)
 {
 elem="c"+q;
 for(var w=0;w<nom.length;w++)
  {
  tx=rec[q][w];
  txAnt=document.getElementById(elem).innerHTML;
  document.getElementById(elem).innerHTML+="<br>0";
  alt=document.getElementById(elem).offsetHeight;
  document.getElementById(elem).innerHTML=txAnt;
  document.getElementById(elem).innerHTML+="<br><a href='mailto:"+cel[q]+"' title='"+tx+"' style='font-size:"+TLLETRA+";font-family:"+FLLETRA+"'>"+tx+"</a>";
  fixa(elem,txAnt,alt,tx,cel[q]);
  }
 }

var alt=document.getElementById('c0').offsetHeight+5;
document.getElementById('d').style.height=alt;

function fixa(e,ta,a,tn,em)
{
var txOrg=tn;
var tx=tn;
var ret=0;
while(document.getElementById(e).offsetHeight>a)
 {
 tx=tx.substring(0,tx.length-IND);
 document.getElementById(elem).innerHTML=ta;
 document.getElementById(elem).innerHTML+="<br><a href='mailto:"+em+"' title='"+txOrg+"' style='font-size:"+TLLETRA+";font-family:"+FLLETRA+"'>"+tx+"</a>";
 ret=1;
 }
if(ret==1)
 {
 tx=tx.substring(0,tx.length-3);
 tx+="...";
 document.getElementById(elem).innerHTML=ta;
 document.getElementById(elem).innerHTML+="<br><a href='mailto:"+em+"' title='"+txOrg+"' style='font-size:"+TLLETRA+";font-family:"+FLLETRA+"'>"+tx+"</a>";
 }
}
</script>
</div>
</body></html>

el funcionamiento es muy simple. primero está el contenedor de la lista (un div) y luego el script que rellena a lista. antes que nada, en el script defino algunas variables que usaré mas adelante (no es necesario definirlas al principio, pero bueno). luego se definen las posiciones de las columnas; para ello me valgo de que el div tiende a ocupar toda la anchura disponible en la página, junto con el número de columnas que quiero poner. la cabecera está declarada en un array ('cab'), cuya longitud es el numero de columnas, luego la anchura disponible para cada columna será de 'anchura_contenedor / numero_columnas' (en una pantalla de 800px de ancho con 4 columnas me sale de 195px por columna; esto se debe a que el div ocupa el ancho disponible pero dejando un margen de 10px por lado; observa aquí la correccion de la anchura recogida para navegadores nsn -> estos indican 4px de mas). calculo las posiciones y las guardo en un array ('pos'); observa que previamente he definido otra variable ('pPar') que indica la posicion a partir de la que hacer el cálculo de la siguiente posicion (la forma correcta se hace recogiendo el valor de la posicion horizontal del contenedor -mediante offsetLeft- y añadirle el nº depíxeles que se quieren usar como margen izquierdo de la primera columna; el resto de columnas se alinean respecto a la primera). el siguiente paso es simplemente crear la cabecera (con posicionamiento absoluto y suando las posiciones calculadas anteriormente; otra cosa usada aquí es la posicion vertical inicial: como ha de estar dentro del contenedor, la forma de hacerlo es recoger la posicion vertical del contenedor -mediante offsetTop- y sumarle el nº de píxeles para el margen vertical de la cabecera, que en este ejemlo es 0). el siguiente paso es crear el contenido. primero pongo los datos en arrays (no es necesario agrupar los arrays por datos de columnas, puedes hacerlo de otras formas) y finalmente agrupo los anteriores arrays en uno solo (para crear una especie de array doble, donde el primer parametro hace referencia al array que contiene y el segundo parametro hace referencia al nº del elemento del array que contiene). despues simplemente recorriendo el array saco cada valor, lo formateo un poco (anclage, css <- aquí uso las variables definidas inicialmente). para cada escritura de datos uso la funcion 'fixa(...);', de momento me la salto. por último lo que hago es adaptar la altura del contenedor a la altura real de lo que contiene (observa que al posicionar de forma absoluta el contenido de un elemento, este responde como si estuviera vacío -solo a efectos de tamaños-, por lo que el borde inferior se sobrepone al supoerior). luego simplemente recojo la altura de la primera columna (podria coger la dela segunda, tercera, ...) y la asigno a la altura del contenedor (ademas le doy un margen de 5 pixels; en caso que elmargen suporior de la cabecera fuera mayor que 0 -no es el caso del ejemplo- deberías usar es margen junto con la altura de las columnas como altura minima para el contenedor). ahora ya estan situados todos los elementos en columnas.

este método puedes usarlo sacando datos de tu servidor simplemente llenando los arrays de datos antes de enviar la página. a modo de complemento, puedes usar 'location.reload();' en el evento 'onResize' del body para crear el efecto de redimensionamiento de las columnas (solo si no cargas datos de una bd, que luego sería demasiado lento) al restaurar la ventana (pero para ventanas muy pequeñas la cosa no funciona). la funcion que queda por ver ('fixa(...);') se debe a que al usar un texto demasiado largo, la anchura limitada de la columna obliga a crear un cambio de linea que no se va a aplicar a las otras columnas de la misma fila; para corregir este efecto puedes usar varios métodos, el mas sencillo es el que he usado en el ejemplo y que consiste en eliminar caractéres de la cadena de texto hasta que quepa en una sola línea. para ello recojo el texto previo a la escritura del nuevo dato (a modo de backup), creo una fila nueva (de una linea de altura, es importante), mido la nueva altura de la columna, sobreescribo el texto backup, anñado los datos y ejecuto la funcion; esta se encarga de: a partir de la altura esperada (la primera medida de la altura de la columna) comparo la nueva altura de la columna despuesde haber insertado los datos correspondientes; si esta altura es mayor significa que los datos ocupan mas de una linea, luego elimino un caracter y vuelvo a comprobarlo (al final, solo en caso que haya eliminado algun caracter, sobreescribo los tres últimos por '...', para que se vea que ha sido cortado). que aparezcan datos cortados no debe representar ningun problema desde que se puede usar el atributo 'title' donde copio el texto entero.

puede que haya otra forma mas sencilla de hacerlo con css y sin usar tablas, pero no se me ocurre ninguna.

jbosch(vosk)





De: oscar
Util para: 0 personas

Fecha: 15/06/2005
Mensaje:

se puede capturar fotografias de un celular con rayo infrarojo asi una pc



De: ivan lopez
Util para: 0 personas

Fecha: 16/08/2005
Mensaje:

como puedo con css,  como puedo usar tipografia que se decarguen en la maquina del usuario, ejemplo uso para mi pagina "univers" pero que pasa otra maquina no la tiene y quiero que mi pagina se visualice con esa tipografia, hay manera de hacerlo con css




De: ZeroKilled
Util para: 0 personas

Fecha: 19/08/2005
Mensaje:

No se que navegadores lo soportan, pero lei que se hace de esta manera:

font-family:url('la url de la tipografia');





De: jbosch(vosk)
Util para: 0 personas

Fecha: 19/08/2005
Mensaje:

en msiev4.5 funcionaba lo siguiente (un ejemplo):

<html><head><style>
@font-face
{
font-family:f_a;src:url(url_fuente);
}
</stile></head><body>
<span style="font-family:f_a;">
En tipografia f_a</span>
</body></html>

'f_a' es un nombre arbitrario a modo de identificador de tu fuente, y 'url_fuente' es la ruta a tu fuente colgada en el servidor. debes poner atencion en no nombrarla como alguna fuente predefinida ya que el navegador tiene preferencia por esas.

hace mucho que no lo uso por lo que no tengo ni idea si aun funciona; deberías buscar mas informacion para verificar que tipos de fuentes soportan, antes solo ttf, pero lei en algun sitio algo acerca de problemas de seguridad en los msie.

jbosch(vosk)





De: Leoncio Tineo
Util para: 0 personas

Fecha: 22/08/2005
Mensaje:

hice un estilo css en dreamweaver y realice un menu con efecto rollover con el estilo y cuando lo publico no funciona que hago....



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.