Problemas frecuentes en CSS

Frecuentemente recibo comentarios o consultas sobre errores o problemas con algún desarrollo web y muchos de ellos hacen referencia al trabajo con CSS. Comentamos aquí algunos de ellos, espero que te puedan resultar de utilidad.

css-edit

Problemas con celdas y anchuras
Supongamos que hemos creado un diseño con una zona central de texto, repartido en 3 bloques de la misma anchura y para crearlo en html, utilizamos un div de 360 px que englobe 3 divs de 100px de ancho:

.boxes-container
    .box xxx
    .box xxx
    .box xxx

y el CSS podría ser así:

.boxes-container{
     float:left;
     width:360px;
     background:#000;
   }
   .box {
      background: none repeat scroll 0 0 #FFFFFF;
      float: left;
       margin: 10px;
       padding: 10px;
       width: 100px;
   }

CSS añadiría el valor padding al ancho del bloque, por lo que cada bloque mediría 140px (100px + 10pxde margin-right + 10px de margin-left + 10px de padding-right) La suma de los 3 bloques sería de 420 px y como el bloque que los delimitaba es de 360 px, los 3 bloques no caben alineados, así que el tercero, saltaría colocándose debajo.

Si usamos la propiedad box-sizing , podemos solucionar este problema, manteniendo el valor dentro del div y la anchura correcta. Así:

*, *:before, *:after {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; 5 }

Otro problema, surge al trabajar con las diferentes partes de la web: Cabecera (header), cuerpo (body), pie (footer)… podemos tener problemas con la posición de alguno de ellos (suele ser con el pie)

La estructura debería ser así:

   #wrapper
   %header
   // content of the header
   #main-content
   // content of the body
   %footer
   // content of the footer

y el css con las clases:

<style media="screen" type="text/css">
     html,
     body {
         margin:0;
         padding:0;
         height:100%;
     }
     #wrapper {
         min-height:100%;
         position:relative;
     }

    #main-content{
         padding:10px;
         padding-bottom:60px;    /* Height of the footer */
     }
     footer {
         position:absolute;
         bottom:0;
         width:100%;
         height:60px;            /* Height of the footer */
     }

     </style>

Con esto, podemos mantener el pie de página (footer) en la parte inferior .

 

: Link


 Google+

Patricia Juberias

Acerca de Patricia Juberias

https://patyjg.wordpress.com

Publicado el 28 enero, 2014 en Creación y diseño web, DISEÑO Y NUEVAS TECNOLOGIAS y etiquetado en , , , , , , , , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: