En CSS, Posicionamiento
A menudo preferimos hacer un logotipo con photoshop (u otra herramienta de diseño) en vez de colocar el texto del mismo con código (X)HTML+CSS.
Un ejemplo de ello es este blog que, como muestro en la imagen a continuación, tiene por cabecera un logotipo hecho con photoshop.
El problema viene cuando queremos que el título de nuestra web sea relevante para los buscadores, por lo que en esta entrada le daremos el toque SEO que necesitamos para que sea así.
Como se trata del título de la web lo colocaremos dentro de las etiquetas H1 para que tenga máxima relevancia, quedando el código de la siguiente forma:
<h1 id="logo"><a title="Dario BF / Diseño web, GNU/Linux, mac, nuevas tecnologías y más" rel="home" href="http://www.dariobf.com/"><span>Dario BF</span></a> <small>Diseño y desarrollo web, GNU/Linux, mac, nuevas tecnologías y más</small></h1>
Como veis, le asignamos un ID (logo) a la etiqueta H1, y el resto lo insertamos normalmente: un span para el titulo del blog y un small para el tagline.
El truco de esto reside en el CSS, que será el siguiente:
#header h1 small,#header h1 a span{
display:none;
}Como veis, lo que hacemos es decir, a través de CSS, que no muestre (display:none) el contenido de las etiquetas span y small (titulo y tagline respectivamente)
Etiquetas: CSS, desarrollo web, posicionamiento, SEO
Comenta ahora! »
En CSS, Diseño y desarrollo web
Se algo caracteriza el diseño de un sitio web es sin duda su tipografía, su fuente.
¿Quien no ha querido alguna vez escribir su sitio con una fuente completamente diferente a la que traen los sistemas operativos por defecto?
Ahora es fácil hacerlo gracias a Google y sus colaboradores, que ponen a nuestro alcance un repositorio de fuentes online de donde podremos cargar las fuentes para nuestro sitio web.
¿Cómo hacerlo?
Podría deciros el código, que lo copiaseis y pegaseis, pero voy a hacer algo mejor, os voy a contar desde dónde se saca dicho código.
Para ello hay que acceder al repositorio de fuentes de Google, ojear las fuentes por encima y seleccionar una (pinchar sobre ella).
En la página que se abrirá hay que seleccionar “Get de code” y ahí teneis los dos códigos a insertar en la plantilla de vuestro sitio.
El primero corresponde a la etiqueta que va entre el <head> y </head> y el segundo se corresponde con el código CSS que va en vuestra hoja de estilos.
Con esto tendreis una fuente completamente diferente a las más utilizadas en la web.
Etiquetas: CSS, desarrollo web, Google
Comenta ahora! »
En CSS, Desarrollo web, Diseño y desarrollo web
Se me planteó una curiosidad para jugar con el overflow de las capas…
¿Y si creo una página con un ancho y alto fijos a modo de presentación en el que tan sólo una capa sea flexible?
Buscando por internet llegué a un hilo de foros del web en el que trataban éste tema, y me he tomado la libertad de terminar un poco el código (para añadirle un ancho a la web y que se autocentre).
El código CSS:
html, body {
height: 100%;
width: 100%;margin: 0;
}
#caja {
display: table;
height: 100%;
width: 100%;
position: relative;
background:#000;
}
.centrado {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
padding: 0 10px;
height: 100%;
background:#FFF;
}
.texto {
position: relative;
top: 0;
display: block;
background-color: #f00;
color: #fff;
width:400px;
height: 300px;
margin-left:auto;
margin-right:auto;
}
Y el código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Centrado Vertical</title>
</head>
<body>
<div id="caja">
<div class="centrado">
<p class="texto">Texto de la página aquí</p>
</div>
</div>
</body>
</html>
Y el resultado sería algo como esto:
(Clic en la imagen para agrandar)
Etiquetas: CSS, desarrollo web, howto
Comenta ahora! »
En CSS, Desarrollo web, Diseño y desarrollo web
A todos en nuestros inicios se nos plantea el mismo problema: ¿Cómo podemos mantener el pie de la página siempre abajo? Pero ésta vez no quiero “abajo del contenido” sino abajo de todo; pegado al borde inferior de mi pantalla en caso que el contenido no rellene la misma, en caso de que la página tenga un largo scroll, etc.
Ésta es la técnica del wrapper, conocida por casi todos los maquetadores CSS, pero que yo tardé en descubrir (lo que tardé en usar google) y quiero compartirla hoy aquí.
Para ésto, creamos las siguientes propiedades CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Como HTML tenemos la siguiente estructura:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
Si necesitais ver un ejemplo revisad la fuente, propone un ejemplo.
Fuente: Ryanfait
Etiquetas: CSS, desarrollo web, tips
Comenta ahora! »
