Posts Tagged ‘css’
CSS: Aplicar CSS a nuestras tablas
Escrito por Marc | Archivado en Desarrollo web, Tips
Aún existiendo CSS, es imposible dejar de utilizar las tablas, sobre todo cuando hablamos de listados y tenemos la necesidad de introducir contenido tabulado. Para todo esto, de momento practicamente todos seguimos usandolas, mientras no salgns las nuevas especificaciones CSS que nos permite plagiar una estructura de tablas con tags CSS.
Después de mucho buscar y rebuscar he encontrado un listado muy bueno de unos 98 diseños basados en CSS y que se pueden aplicar a listados realizados con tablas.
Aprovechando las características THEAD, TBODY y TFOOTER, podremos dejar nuestras tablas realmente bonitas de una forma rápida y sencilla.
También es muy provechoso para aprender del código y podernos montar así nuestros propios estilos a raíz de lo que nos enseñan estos maravillosos CSS.
Venga, no te costará nada
Data tables and Cascading Style Sheets
Cambiar color de la linea punteada que aparece en las imagenes con links (change outline color)
Escrito por Marc | Archivado en Desarrollo web, Tips
En nuestro CSS hemos de poner;
-
* {outline-color: #ffffff; }
De esta manera cambiaremos el color de esa molesta linea punteada en todos lo que tenga enlaces de nuestra web, pudiendo poner así el color que mas combine en cada caso.
CSS: El retorno de la tablas al desarrollo web
Escrito por Marc | Archivado en Desarrollo web, Tips
Pues si amigos, desde hace unos días se ha estado difundiendo esta información, la he visto en un par o tres de blogs y hasta el momento no he visto oportuno comentar la noticia, una noticia que me parece explendida!
Si amigos, por que todos los que llevamos nuestros añitos en el sector y que pasamos unos ratos memorables con las tablas, intentando montar verdaderas estructuras para maquetar los diseños inmaquetables de nuestros grande amigos con los que vivimos en simbiosis los diseñadores (larga vida!! au au au). Intentando no anidar mas de 2 tablas en una web, viendo como poco a poco iban desapareciendo, siendo enterradas por las capas (DIV's), siendo utilizadas para tareas tan mundanas y básicas como la creación de cuadriculas con contenidos o alineamientos imposibles en horizontal...
Pues si, vuelven las tablas, pero no de la forma en que las conocemos, vuelven adaptadas a los nuevos tiempos, vuelven reconvertidas y reinventadas en CSS para utilizar al gusto y antojo con nuestras capas (DIV's).
Realment hay situaciones que con las tablas era cosa de 5 minutos, pero con las malditas capas, te pasabas un buen rato anidando y alineando con FLOATS a lado y lado...ufff que bien nos va a venir este apaño!!!
Según puedo leer y entender en un par de artículos en inglés (aviso, mi inglés es un poco wat you name :P), Ahora podremos crear una estructura de capas basada en tablas, con sus denominaciones de FILA, COLUMNA, asignando propiedades de CSS2 del tipo:
-
display: table-row;
-
display: table-cell;
Podemos ver que para ello, usamos la propiedad DISPLAY de nuestras capas.
Cabe destacar que esto según he leido por ahí viene dado por la inminente salida de Internet Explorer 8 y su mejorado soporte para dichas propiedades: TABLE, TABLE-ROW, TABLE-CELL
Como se va a usar:
- TABLE: Hace que el elemento se comporte como una tabla.
- TABLE-ROW: Hace que el elemento se comporte como una fila (TR).
- TABLE-CELL: Hace que el elemento se comporte como una celda (TD).
- TABLE-ROW-GROUP: Hace que los elementos se comporten como el cuerpo de una tabla (TBODY).
- TABLE-HEADER-GROUP: Hace que los elementos se comporten como la cabecera de una tabla (THEAD).
- TABLE-FOOTER-GROUP: Hace que los elementos se comporten como el pie de una tabla (TFOOT).
- TABLE-CAPTION: Hace que el elemento se comporte como leyenda.
- TABLE-COLUMN: Hace que los elementos se comporten como columna (COL).
- TABLE-COLUMN-GROUP: Hace que los elementos se comporten como un grupo de columnas (COLGROUP).
Pues no se ve muy complicado no? Vamos a ver un ejemplo (no lo he echo yo, lo he cogido prestado de una de las webs que mas a bajo indico como referencia para saber mas)
Ejemplo práctico:
el HMTL
-
<!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" xml:lang="en" lang="en">
-
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-
<title>CSS Level 2 with table based settings</title>
-
<link href="tables.css" rel="stylesheet" type="text/css" />
-
</head>
-
<div id="wrapper">
-
<div id="header">
-
Header information
-
</div>
-
<div id="main">
-
<div id="nav">
-
Navigation list here
-
</div>
-
<div id="columns">
-
<div id="sidebar">
-
Nifty sidebar
-
</div>
-
-
<div id="content">
-
What would your site be without content
-
</div>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
el CSS
-
body
-
{
-
margin-left: 0px;
-
margin-top: 0px;
-
margin-right: 0px;
-
margin-bottom: 0px;
-
}
-
-
#header
-
{
-
display:block;
-
margin:0px auto;
-
width:870px;
-
padding:15px;
-
background-color:#666;
-
color:#FFF;
-
}
-
/* nothing unusual so far */
-
-
#main
-
{
-
display: table;
-
margin:0px auto;
-
width:900px;
-
}
-
/* display: table to make the main div be treated by browsers as a table */
-
-
#nav
-
{
-
display: table-row;
-
width: 900px;
-
height:50px;
-
line-height:50px;
-
text-indent:15px;
-
background-color:#D6D6D6;
-
color:#333;
-
}
-
-
/* is treated as a table row */
-
-
#sidebar
-
{
-
display: table-cell;
-
width: 185px;
-
height: 500px
-
padding-left:15px;
-
background-color:#FF6633;
-
color:#333;
-
}
-
-
#content
-
{
-
display: table-cell;
-
width: 685px;
-
padding-left:15px;
-
background-color:#77BBDD;
-
color:#333;
-
}
-
-
/* are placed inside the same father element: columns (check out the XHTML), and are treated as table cells */
Aquí tenéis 2 enlaces donde poder leer y aprender un poco mas sobre esta fantástica noticia.
The Return of Table-Based Layout
Everything you know about CSS is wrong
CSS: Centrar nuestra web en el navegador.
Escrito por Marc | Archivado en Desarrollo web, Tips
Continuando con la línea de la última entrada vamos a mostrar un código muy sencillo para conseguir que nuestra web o el contenido que queramos ya sea imagen, texto o contenido del tipo multimedia , lo podamos centrar en el navegador. Utilizando el código que seguidamente explicaremos conseguiremos un centrado horizontal y vertical sea cual sea la resolución de pantalla de los usuarios ya que si redimensionamos el navegador seguirá ajustándose al centro.
La base de este código reside en el posicionamiento absoluto y jugar con los margenes izquierdo y superior negativos. Echando mano de la calculadora tendrémos que sacar unos valores equivalentes a la mitad de las dimensiones del contenido que queremos centrar:
Por ejemplo un contenido de 500 x 450 pixels.
- La mitad del width -250px (margen negativo superior)
- La mitad del height -225px (margen negativo izquierdo)
Pasaremos a ver el código CSS y a comentarlo así quedará mucho mas claro. Tomaremos como base una capa con un width(ancho) de 500 pixels y un height(alto) 450 pixels.
CSS: Columnas con Listas (UL,LI)
Escrito por Marc | Archivado en Desarrollo web, Tips
Una de las cosas que mas me gusta usar de los CSS son las listas (UL, OL) con ellas puedes listar infinidad de contenidos de la forma que desees y lo mejor de todo tabular y espaciar dichos contenidos con una facilidad enorme con un código muy simplificado.
Pero ahora no vamos ha hablar de los listados, si no de como hacer columnas con textos utilizando listas.
Eliminar espacios que aparecen después de un FORM en IE
Escrito por Marc | Archivado en Desarrollo web, Tips
A todos nos ha sucedido, en algún momento.
Maquetamos una página, respetando la métrica y los espaciados, la dejamos totalmente clavada al PSD que nuestro compañero, "el diseñador" nos ha pasado, entonces le ponemos un formulario en la cabecera, donde nuestro compañero "el diseñador" ha visto oportuno colocar una barra minúscula de mas o menos unos 18 pixeles de altura donde hemos de colocar una caja de texto para que los usuarios se puedan suscribir a un newsletter. Procedemos con la intervención y.... zas! Al ver la web en Internet Explorer, te deja un espacio después del tag /FORM donde caben 2 dedos! Y piensas "como lo vea el amigo, la que me cae"....jajaja (risa fría)
Pues para solventar esto, es tan fácil como echar mano de CSS.
El código es lo siguiente:
-
form{
-
margin:0;
-
padding:0;
-
}
fácil, no? De este modo cuando nuestro amigo "El diseñador" venga a ver lo que hemos echo, lo encontrará todo en su sitio.
