Foros del Web » Creando para Internet » Diseño web »

como hacer un efecto como este? y ayudacon divs

Estas en el tema de como hacer un efecto como este? y ayudacon divs en el foro de Diseño web en Foros del Web. 1) Quiero hacer algo similar a esto: http://www.haceclick.com.uy el efecto del logo que sobre sale y la foto del hombre. Como se hace para que ...
  #1 (permalink)  
Antiguo 30/10/2009, 12:17
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 3 meses
Puntos: 0
como hacer un efecto como este? y ayudacon divs

1) Quiero hacer algo similar a esto: http://www.haceclick.com.uy
el efecto del logo que sobre sale y la foto del hombre.
Como se hace para que sobresalga del resto del diseño?

2) Alguien podria hacerme un codigo css para centrar capas y explicarme como funciona y como aplicarlo?

Agradezco sus respuestas
  #2 (permalink)  
Antiguo 30/10/2009, 12:22
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: como hacer un efecto como este? y ayudacon divs

esos es un div estratégicamente posicionado, las piernas del hombre es un div con posición relativa, el resto del cuerpo pertenece a la imágen principal de la tabla que encabeza la pagina
  #3 (permalink)  
Antiguo 30/10/2009, 12:59
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como hacer un efecto como este? y ayudacon divs

Cita:
las piernas del hombre es un div con posición relativa, el resto del cuerpo pertenece a la imágen principal de la tabla que encabeza la pagina
Prueba a visualizar esa web en Explorer 6 y verás que no es el mejor método de conseguir este efecto. Las piernas no coinciden con el resto del cuerpo.

Lo mejor es dejar de usar tablas y trabajar con <divs>. Entonces usas la imágen completa (con piernas y todo) y la posicionas absolutamente donde te convenga.
__________________
}8[/
  #4 (permalink)  
Antiguo 30/10/2009, 19:02
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: como hacer un efecto como este? y ayudacon divs

Aha, y como hago para hacer que las divs queden centradas en el navegador? sé que es con css, pero no sé como y no entiendo los codigos que rondan por internet.

saludos y gracias
  #5 (permalink)  
Antiguo 01/11/2009, 05:32
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como hacer un efecto como este? y ayudacon divs

Supongo que te refieres a centrar todo el contenedor de la web, como en el ejemplo que nos dabas ¿no? Pues lo incluyes todo en una división (por ejemplo: div id="wrapper"), le pones la anchura que quieras y luego le das estas reglas a esa división:

#wrapper {
margin-left: auto;
margin-right: auto;
}

O, incluso más corto:

margin:0 auto;
__________________
}8[/
  #6 (permalink)  
Antiguo 01/11/2009, 11:35
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: como hacer un efecto como este? y ayudacon divs

a que te referis con incluir todo en una division?
como lo hago?

te agradezco mucho las respuestas, me podes facilitar la maquetacion de aqui en adelante!

saludos
  #7 (permalink)  
Antiguo 01/11/2009, 13:15
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: como hacer un efecto como este? y ayudacon divs

Hola:

Creo que estás un poco verde en todo esto del diseño web, así que ¿Porqué no te das una vuelta por www.librosweb.es y te lees los manuales de XHTML y CSS?

Saludos.

  #8 (permalink)  
Antiguo 02/11/2009, 05:23
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como hacer un efecto como este? y ayudacon divs

Completamente de acuerdo con el último post. Te podemos pasar un código entero para que lo copies y pegues en tu web pero no te va a solucionar nada si no entiendes conceptos básicos.

Esos tutoriales tienen muy buena pinta.
__________________
}8[/
  #9 (permalink)  
Antiguo 02/11/2009, 08:17
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: como hacer un efecto como este? y ayudacon divs

es que entiendo css, se que con css se le asigna una propiedad que le da margenes automaticos al div, eso lo se.
el problema que tengo es que no puedo montar una div por ensima de otra con contenido para maquetar, y tampoco se crear ese div "contenedor" y meter el contenido dentro de ella.
Podrian explicarme eso? lenguages demasiado tecnicos abstenerse, muchas gracias por las respuestas.
  #10 (permalink)  
Antiguo 02/11/2009, 08:21
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como hacer un efecto como este? y ayudacon divs

<div id="contenedor">
aquí todo tu contenido incluyendo divs o lo que quieras
</div>

Pero esto es muy muy básico. De verdad te recomiendo leerte esos tutoriales.

Vuelve aquí si tienes algún problema.
__________________
}8[/
  #11 (permalink)  
Antiguo 02/11/2009, 09:24
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: como hacer un efecto como este? y ayudacon divs

Miren esto es lo que tengo de codigo:

Código HTML:
<html>
<head>
<title>Club Atletico Stockolmo</title>
<META NAME="Title" CONTENT="Stockolmo">
<META NAME="Author" CONTENT="Bruno Bradach">
<META NAME="Subject" CONTENT="Stockolmo">
<META NAME="Description" CONTENT="Stockolmo">
<META NAME="Keywords" CONTENT="Stockolmo,club,atletico,basquetbol,musculacion,sala,de,aparatos,gimnasia,gimnasio,boxeo,basket,basquet,basketball,prado,formativas">
<META NAME="Generator" CONTENT="Dreamweaver">
<META NAME="Language" CONTENT="Spanish">
<META NAME="Revisit" CONTENT="1 day">
<META NAME="Distribution" CONTENT="Global">
<META NAME="Robots" CONTENT="All">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#contenedor {
    width: 800px;
	margin: 0 auto;
	}
	
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 185px;
	top: 15px;
}
#apDiv2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 1px;
	top: 278px;
	float: left;
}
#apDiv3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 385px;
	top: 293px;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="contenedor">
  <div id="apDiv1">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','278','src','encabezado','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','encabezado' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="278">
      <param name="movie" value="encabezado.swf">
      <param name="quality" value="high">
      <embed src="encabezado.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="278"></embed>
    </object>
  </noscript></div>

</div>
</body>


</html> 
Que es lo que hago mal?
  #12 (permalink)  
Antiguo 02/11/2009, 11:15
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como hacer un efecto como este? y ayudacon divs

¿Qué es lo que no funciona? ¿Podrías enviarnos una dirección donde ver la web o unas capturas de pantalla en su defecto?
__________________
}8[/
  #13 (permalink)  
Antiguo 02/11/2009, 12:09
 
Fecha de Ingreso: julio-2005
Mensajes: 304
Antigüedad: 12 años, 5 meses
Puntos: 4
Respuesta: como hacer un efecto como este? y ayudacon divs

Para la ceación del efecto si trabajas con photoshop, no trabajes sobre el fondo sino que creas una capa nueva y elimina el fondo, y cuando vayas a guardar lo guardas en fomato .gif o .png pero con transparencia. La imagen tendrás que dividirla por que la parte central está como fondo para que el texto, el buscador, etc. te salga encima. Le estableces la imagen de fondo al <body>, así al ser la imágenes tranparente se verá el fondo y parecerá que están sobre saliendo.
  #14 (permalink)  
Antiguo 02/11/2009, 16:59
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: como hacer un efecto como este? y ayudacon divs

Hola:

Cita:
Iniciado por brunob23 Ver Mensaje
es que entiendo css, se que con css se le asigna una propiedad que le da margenes automaticos al div, eso lo se.
el problema que tengo es que no puedo montar una div por ensima de otra con contenido para maquetar, y tampoco se crear ese div "contenedor" y meter el contenido dentro de ella.
Podrian explicarme eso? lenguages demasiado tecnicos abstenerse, muchas gracias por las respuestas.
Creo que a todos nos ha quedado muy, pero que muy claro hasta donde llegan tus conocimientos tanto de HTML como de CSS. Léete los manuales que te he dicho y hazte un favor a tí mismo.

Lo único que siento es que tratando los temas que tratan son un poco técnicos.

Saludos.

  #15 (permalink)  
Antiguo 04/11/2009, 12:36
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: como hacer un efecto como este? y ayudacon divs

Listo, tema solucionado, el problema era que yo usaba divs PA (lease capas) en lugar de etiquetas div.

Muchas gracias por la ayuda de todos.
  #16 (permalink)  
Antiguo 05/11/2009, 18:04
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: como hacer un efecto como este? y ayudacon divs

Hola:

Te sigues cubriendo de gloria, brunob23 y "demostrando" tus conocimientos de CSS.

Cita:
Iniciado por brunob23 Ver Mensaje
Listo, tema solucionado, el problema era que yo usaba divs PA (lease capas) en lugar de etiquetas div.
¿Qué diferencia hay entre las etiquetas div y los div PA (léase capas)? Pues que los div PA son div con Position:Absolute. ¡Vaya, son lo mismo! Además que debe ser invento de DW porque cada vez que he leido algo sobre div PA era diseñando o con problemas con DW.

Saludos.

  #17 (permalink)  
Antiguo 06/11/2009, 11:31
Avatar de brunob23  
Fecha de Ingreso: agosto-2009
Mensajes: 77
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: como hacer un efecto como este? y ayudacon divs

entonces por que no puedo centrar la web? ni poner un div dentro de otro?
  #18 (permalink)  
Antiguo 07/11/2009, 07:09
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: como hacer un efecto como este? y ayudacon divs

Hola:

Te vuelvo a repetir lo que te he dicho aqui en el #7. Tú haz lo que te parezca pero no esperes que te hagan el trabajo, has sido tú el que ha dicho que sabía CSS.

Y si quieres entender bien como funciona el posicionamiento, al principio del foro de CSS, encontrarás el aporte que hizo Mikmoro llamado: Pequeña guía de migración a XHTML+CSS.

Saludos.

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 20:37.