26/07/2009, 16:18
| |||
| |||
| Me dan una manito... Hola gente, recurro a ustedes porque cada vez que quiero diagramar algo en CSS me vuelvo loco... Depaso consulto, hay algun WYSIWYG que yo dibuje las boxes exactamente donde las quiero y me escriba el código... De esa forma creo que no los molestaré con dudas como estas... La idea es lograr esto...  No importa si los laterales y arriba y abajo ocupan todo, solo que la imagen quede en el centro sería lo importante... Espero que se entienda lo que quiero lograr... Desde ya un millón de gracias a los que me puedan hechar una mano... 
__________________ • elGastronomo • |
|
26/07/2009, 18:10
| |||
| |||
| Respuesta: Me dan una manito...
__________________ Debian Squeeze rules! |
|
27/07/2009, 13:11
| |||
| |||
| Respuesta: Me dan una manito... Gracias, voy a darle una miradita... De momento lo que hice, son 2 divs separados 1 para la seccion de arriba y otro para abajo... Luego uno central, con los divs derecha e izquierda alienados respectivamente, y un div central para el contenido...
__________________ • elGastronomo • |
|
27/07/2009, 16:05
| ||||
| ||||
| Respuesta: Me dan una manito... |
|
27/07/2009, 16:28
| |||
| |||
| Respuesta: Me dan una manito... ¿esa composición es de anchura fija o variable? Comenta ese detalle (aunque realmente es secundario). Solo tienes que posicionar el fondo con la imagen del triangulo rojo via css: 'background-position' Si he sido demasiado conciso, comenta, por favor. Un saludo |
|
28/07/2009, 08:27
| |||
| |||
| Respuesta: Me dan una manito... Hola, si, son medidas fijas... Lo que ves como triangulo rojo, es un "boton" que debe funcionar como submit de un formulario... Lo que no sabía bien, es como crear el contenedor con las 4 zonas alrededor para centrar en ellas los botones... Básicamente hice un div superior y uno inferior independientes Y en el centro hice uno donde a la izq dejé uno, otro a la derecha y finalmente otro en el centro... El centrado vertical de los botones a izq. y derecha lo hice con padding El CSS es así Código HTML: #lab {height: 400px;width: 550px;padding: 0px;margin: 0 auto;}
.center {height: 380px;width: 430px;position: relative;display: block;margin: 0px;padding: 10px;float: left;}
.left {height: 55px;width: 50px;position: relative;display: block;margin: 0px;padding: 175px 0px 0px 0px;float: left;text-align: center;}
.right {height: 55px;width: 50px;position: relative;display: block;margin: 0px;padding: 175px 0px 0px 0px;float: right;text-align: center;}
.top {height: 50px;width: 550px;position: relative;display: block;margin: 0px auto;padding: 0px;text-align: center;}
.bottom {height: 50px;width: 550px;position: relative;display: block;margin: 0px auto;padding: 0px;text-align: center;}
Código HTML: <div class="top">BOTON</div> <div id="lab"> <div class="left">BOTON</div> <div class="center"></div> <div class="right">BOTON</div> </div> <div class="bottom">BOTON</div>
__________________ • elGastronomo • |
|
28/07/2009, 08:32
| |||
| |||
| Respuesta: Me dan una manito... Cita: Llamativo, al menos para mi, eso de usar los margin negativos... Probaré sus ventajas a ver si encuentro el por que hacerlo de esa forma...
Iniciado por jomaruro  Gracias... PD: Lo mio es relativamente similar, lo que nunca nunca me queda claro es el tema de los tipos de Display y cuando usarlos y lo mismo con las Positions 
__________________ • elGastronomo • |
|
28/07/2009, 16:03
| ||||
| ||||
| Respuesta: Me dan una manito... Cita: Échale un vistazo a la Guía de Mikmoro, te aclarará muchas dudas. Concretamente el apartado 3.
Iniciado por American2010 Lo mio es relativamente similar, lo que nunca nunca me queda claro es el tema de los tipos de Display y cuando usarlos y lo mismo con las Positions Saludos.  |
|
29/07/2009, 12:34
| |||
| |||
| Respuesta: Me dan una manito... Gracias... Es que es mi "tarea" pendiente, el dejar de hacer cosas con DIVs y CSS en el aire, y no aprenderlo ben de una vez por todas :P
__________________ • elGastronomo • |
|
29/07/2009, 20:15
| ||||
| ||||
| Respuesta: Me dan una manito... Hola American2010 Con el ánimo de ayudarte a comprender la distribución de cajas, unas en otras y todas respecto al body, he construido el prototipo de pones en tu post y he añadido muchos comentarios en el código fuente que te pueden servir para entender el sistema de ubicación y distribución de elementos (a mi modo de ver). Aquí lo tienes: Cajas para American2010 Comenta algo. Bye |
|
31/07/2009, 12:36
| |||
| |||
| Respuesta: Me dan una manito... Cita: Gracias man... Excelente trabajo, gracias por el tiempo que te tomaste en armarlo y los comentarios en el CF son geniales... Aclaran muchísimo esto de las posiciones y deja muy claro como se hacen estas cosas...
Iniciado por deirdre Hola American2010 Con el ánimo de ayudarte a comprender la distribución de cajas, unas en otras y todas respecto al body, he construido el prototipo de pones en tu post y he añadido muchos comentarios en el código fuente que te pueden servir para entender el sistema de ubicación y distribución de elementos (a mi modo de ver). Aquí lo tienes: Cajas para American2010 Comenta algo. Bye
__________________ • elGastronomo • |
|
31/07/2009, 17:22
| ||||
| ||||
| Respuesta: Me dan una manito... De nada. Es un gusto que se aprecien las cosas que se hacen. En este caso lo importante es que sirva para algo más que copiar y pegar, por eso el poner los comentarios en el código. Hasta la próxima. Bye |
