Entrada Etiquetada ‘css’

Borde redondeado con xhtml y css

Como me ha parecido curioso lo que hay que hacer para poder hacer un recuadro con esquinas redondeadas, escribo esta entrada.
De entrada parece que no existe forma de indicárselo directamente al navegador en el css y que el navegador dibuje los bordes redondeados de un marco con un radio determinado, cosa que no entiendo con la cantidad de páginas que hay con bordes redondeados.

La única forma que parece existir es usando pequeñas imágenes tanto para las cuatro esquinas como para los cuatro laterales del recuadro.

En teoría esto se puede hacer de dos formas usando tablas o con xhtml y css, pero parece ser que el uso de tablas no es bueno para maquetar las páginas porque es muy rígido y no funciona bien con contenido dinámico entre otras muchas razones que dan los diseñadores web, se podría decir que cada vez que alguien maqueta con tablas El Monstruo de Espagueti Volador mata un gatito. Así que la forma correcta de hacerlo es mediante el uso de xhtml y css.

El primer paso entonces es crear las imágenes, en este caso las esquinas tienen un tamaño de 8×8 pixeles, y los laterales 8×1 (están ampliados a 8×8 para que sea vea algo):

Esquina superior izquierda Lateral superior Esquina superior derecha
Lateral izquierdo Lateral derecho
Esquina inferior izquierda Lateral inferior Esquina inferior derecha

El código xhtml sería algo semejante a esto:


<div id="recuadro">
<div class="recuadro_arriba">
<div class="recuadro_esquina_superior_izquierda"> </div>
<div class="recuadro_esquina_superior_derecha"> </div>
</div>
<div class="recuadro_contenido">
<div class="recuadro_lateral_derecho">
Contenido
</div>
</div>
<div class="recuadro_abajo">
<div class="recuadro_esquina_inferior_izquierda"> </div>
<div class="recuadro_esquina_inferior derecha"> </div>
</div>
</div>

El código css sería algo como esto:


.recuadro { background:color_del_fondo_del_recuadro }
.recuadro_lateral_derecho { padding:8px 8px;background:url(imagenes/lateral_derecho.jpg) right repeat-y;}
.recuadro_contenido { background:color_de_fondo_del_recuadro url(imagenes/lateral:izquierdo.jpg) repeat-y;}
.recuadro_arriba{ height:8px;background:url(imagenes/lateral_superior.jpg);position:relative;}
.recuadro_esquina_superior_izquierda, .recuadro_esquina_superior_derecha, .recuadro_esquina_inferior_izquierda, .recuadro_esquina_inferior_derecha{ width:8px;height:8px;line-height:1px;font-size:1px;}
.recuadro_esquina_superior_izquierda{ float:left;background:url(imagenes/esquina_superior_izquierda.jpg);}
.recuadro_esquina_superior_derecha{ float:right;margin-right:0px;background:url(imagenes/esquina_superior_derecha);}
.recuadro_lateral_inferior{ width:100%;height:8px;line-height:0px;font-size:1px;background:url(imagenes/lateral_inferior.jpg) repeat-x bottom;height:8px}
.recuadro_esquina_inferior_izquierda{ float:left;background:url(imagenes/esquina_inferior_izquierda.jpg);}
.recuadro_esquina_inferior_derecha{ float:right;margin-right:0px;margin-down:0px;background:url(imagenes/esquina_inferior_derecha.jpg);}

El resultado:
Bordes redondeados
Se agradecen correcciones

Personalizando el Blog

Rodillo pontando

Llevo unos días trasteando con la plantilla que elegí para el blog, intentando dejar la apariencia a mi gusto, la verdad que yo había pensado que me resultaría mas fácil, pero se me resisten algunos cambios. Parece ser que tendré que aprender o al menos familiarizarme mas con Xhtml y CSS para poder hacerlo. Así que dejaré la plantilla mas o menos como está ahora hasta que entienda bien como funciona el asunto.

Me ha dado la sensación que esto del diseño web es mas difícil de lo que debería ser, como si estuviese artificialmente diseñado para que sea complicado, incluso a veces produciendo resultados impredecibles. Supongo que esta sensación será debido a que no conozco bien como funcionan las cosas. Lo de separar la página en columnas “flotantes” me tiene bastante intrigado, no encuentro explicación a la forma en que se comportan.

Supongo que esto de la complicación es debido a que el lenguaje html no ha sido diseñado tal como es sino que ha ido evolucionando con el tiempo y adoptando tecnologías de unos y de otros, y sobre todo a eso que la gente suele llamar “la guerra de los navegadores”

En cuanto a blogger en si, parece bastante sencillo y cómodo de usar aunque hay algunas cosas que no me gustan.
Una de ellas es que se tenga que ir a otra página para escribir un comentario y no se pueda hacer desde la propia página de la entrada, he visto en alguna página que se puede cambiar eso, pero no he conseguido cambiarlo,… seguiré intentándolo.
Otra es que no se pueda tener ninguna otra página secundaria donde poner algunas cosas como los datos de contacto, enlaces, la licencia, etc. Solo existe la portada con los ultimas entradas y las entradas una por una y nada más, aunque claro esta puedo escribir lo que quiera en una entrada y enlazarla, pero no me parece lo ideal.
También he intentado hacer una sección en la que los artilugios se añadan en horizontal en vez de en vertical con la opcion growth=”horizontal” y parece no funcionar.