Comunidad de diseño web y desarrollo en internet online

Separaciones adaptables

Citar            
MensajeEscrito el 02 Abr 2013 11:00 pm
Buenas, soy un novato extremo en cuanto a CSS y HTML y estoy empezando a sacarle a los programadores la parte del trabajo que me tocaría a mi, así que no os desesperéis si me cuesta un poco pillar las cosas.

La duda que me come ahora mismo es la de las separaciones, por ejemplo, en la misma web de cristalab (y en casi absolutamente todas) el contenido se adapta si ampliamos o encogemos el navegador. Las separaciones son las mismas en ambos lados y los botones laterales se mantienen en los lados reajustando su posición.

No tengo ni idea de como hacerlo. Lo conseguí en la página de lanzamiento de mi propia web: hoytampoco.com

Pero por arte de magia se me colocaron centrados en la web y no en el lateral izquierdo inferior como yo quería. Cómo se consigue maquetar estas cosas?

Espero haberme explicado bien, un saludete

Por eklo

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 03 Abr 2013 08:32 am
Hola...

Para que la web esté siempre centrada horizontalmente tienes que crear un div que contenga todas secciones de la web y ese div centrarlo. Algo así:

Código HTML :

<body>
   <div id="mainWrapper">
      <header></header>
      <nav></nav>   
      <article></article>
   </div>
</body>

Código CSS :

mainWrapper {
      width: 960px ;
      margin: 0 auto ;
      }

Para centrarlo, das un ancho al div mainWrapper y luego con margin auto se centra horizontalmente. Como has hecho en tu web, con un poco de suerte... :cool:

Código CSS :

   margin: 5em auto auto;   //top,  right y left, bottom
   margin-left: auto;  //otra vez auto a margin-left, no hace falta
   margin-right: auto;  //otra vez auto a margin-right, no hace falta

Para colocar elementos en el lateral izquierdo inferior tienes que utilizar las propiedades css display y top, bottom, left o right. A lo mejor te cuesta un poco al principio, pero en cuanto hagas unas cuantas pruebas...

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 04 Abr 2013 06:02 pm
Mil gracias Walden, lo pongo en práctica y te cuento. :)

Por eklo

1 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.