Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Mejor manera de hacer esto con CSS

Estas en el tema de Mejor manera de hacer esto con CSS en el foro de CSS en Foros del Web. Hola amigos. Quiero hacer esta imagen en CSS El menu ya lo tengo. La parte que tengo duda es "Lo que buscas a tu alcanze. ...
  #1 (permalink)  
Antiguo 04/12/2013, 17:58
Avatar de indie_rok  
Fecha de Ingreso: mayo-2013
Ubicación: Top of the world.
Mensajes: 85
Antigüedad: 10 años, 10 meses
Puntos: 0
Pregunta Mejor manera de hacer esto con CSS

Hola amigos.

Quiero hacer esta imagen en CSS



El menu ya lo tengo. La parte que tengo duda es "Lo que buscas a tu alcanze.

Se me ocurren 2 maneras de hacer esto.

1.

Código CSS:
Ver original
  1. .mensaje
  2. {
  3.        padding:30% 0 0 55%
  4. }
2.

Código CSS:
Ver original
  1. .mensaje
  2. {
  3.       position:relative;
  4.       top:30%;
  5.       left:55%
  6. }

Padding vs position relative.

Cual es mejor?

Tendran idea?

Saludos

Última edición por pzin; 05/12/2013 a las 01:59 Razón: formato código / imagen
  #2 (permalink)  
Antiguo 04/12/2013, 19:46
Avatar de EmpireFX  
Fecha de Ingreso: marzo-2008
Ubicación: in da house
Mensajes: 60
Antigüedad: 16 años, 1 mes
Puntos: 3
Respuesta: Mejor manera de hacer esto con CSS

No se si soy yo... pero no veo la imagen, si utilizas padding tenes que tener en cuenta la estructura html de como lo armaste sino se puede deformar todo, si esta dentro de un div el mensaje utilizaria position:absolute y margin-left - right -top -buttom para posicionar el mensaje donde desee... usar top, right, left, buttom comprende las dimensiones del alto y ancho de la ventana.

Mas para leer: http://www.mclibre.org/consultar/ama..._absoluto.html
  #3 (permalink)  
Antiguo 05/12/2013, 01:52
Avatar de Verkia  
Fecha de Ingreso: noviembre-2013
Ubicación: Alicante
Mensajes: 26
Antigüedad: 10 años, 5 meses
Puntos: 2
Respuesta: Mejor manera de hacer esto con CSS

Como dice EmpireFX yo también utilizaria position:absolute; y recuerda para usar position:absolute en un div, el div padre tiene que tener la propiedad position:relative;

Código CSS:
Ver original
  1. .div_padre_de_mensaje {
  2.    position:relative;
  3. }
  4.  
  5. .mensaje{
  6.    position:absolute;
  7.    right:0;
  8.    top:30%;
  9. }

Última edición por pzin; 05/12/2013 a las 01:59 Razón: formato código
  #4 (permalink)  
Antiguo 05/12/2013, 10:24
Avatar de indie_rok  
Fecha de Ingreso: mayo-2013
Ubicación: Top of the world.
Mensajes: 85
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Mejor manera de hacer esto con CSS

Muchas gracias. lo Hago con absolute.

Saludo

Etiquetas: imagenes, manera
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 23:23.