Foros del Web » Creando para Internet » CSS »

Me dan una manito...

Estas en el tema de Me dan una manito... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/07/2009, 17:18
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
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
  #2 (permalink)  
Antiguo 26/07/2009, 19:10
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Me dan una manito...

http://www.cristalab.com/tips/centra...n-css-c46147l/


__________________
Debian Squeeze rules!
  #3 (permalink)  
Antiguo 27/07/2009, 14:11
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
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
  #4 (permalink)  
Antiguo 27/07/2009, 17:05
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Me dan una manito...

Hola:

Échale un vistazo a este ejemplo de la página de Mikmoro (www.araudi.net)

Saludos.

  #5 (permalink)  
Antiguo 27/07/2009, 17:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 28/07/2009, 09:27
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
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;}
Y el esquema es este...

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> 
Reemplace el codigo por la palabra BOTON para que no se haga tan largo...
__________________
elGastronomo
  #7 (permalink)  
Antiguo 28/07/2009, 09:32
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Me dan una manito...

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Échale un vistazo a este ejemplo de la página de Mikmoro (www.araudi.net)

Saludos.

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...

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
  #8 (permalink)  
Antiguo 28/07/2009, 17:03
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Me dan una manito...

Cita:
Iniciado por American2010 Ver Mensaje
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
Échale un vistazo a la Guía de Mikmoro, te aclarará muchas dudas. Concretamente el apartado 3.

Saludos.

  #9 (permalink)  
Antiguo 29/07/2009, 13:34
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 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
  #10 (permalink)  
Antiguo 29/07/2009, 21:15
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
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
  #11 (permalink)  
Antiguo 31/07/2009, 13:36
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Me dan una manito...

Cita:
Iniciado por deirdre Ver Mensaje
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
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...

__________________
elGastronomo
  #12 (permalink)  
Antiguo 31/07/2009, 18:22
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:53.