como hacer un efecto como este? y ayudacon divs

brunob23 · #1 (**permalink**) 30/10/2009, 11:17

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

maycolalvarez · #2 (**permalink**) 30/10/2009, 11:22

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

gorkreg · #3 (**permalink**) 30/10/2009, 11:59

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.

brunob23 · #4 (**permalink**) 30/10/2009, 18:02

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

gorkreg · #5 (**permalink**) 01/11/2009, 05:32

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;

brunob23 · #6 (**permalink**) 01/11/2009, 11:35

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

jomaruro · #7 (**permalink**) 01/11/2009, 13:15

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.

gorkreg · #8 (**permalink**) 02/11/2009, 05:23

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.

brunob23 · #9 (**permalink**) 02/11/2009, 08:17

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.

gorkreg · #10 (**permalink**) 02/11/2009, 08:21

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

brunob23 · #11 (**permalink**) 02/11/2009, 09:24

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?

gorkreg · #12 (**permalink**) 02/11/2009, 11:15

¿Qué es lo que no funciona? ¿Podrías enviarnos una dirección donde ver la web o unas capturas de pantalla en su defecto?

lynxstyle · #13 (**permalink**) 02/11/2009, 12:09

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.

jomaruro · #14 (**permalink**) 02/11/2009, 16:59

Hola:

Cita:

Iniciado por brunob23

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.

brunob23 · #15 (**permalink**) 04/11/2009, 12:36

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.

jomaruro · #16 (**permalink**) 05/11/2009, 18:04

Hola:

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

Cita:

Iniciado por brunob23

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.

brunob23 · #17 (**permalink**) 06/11/2009, 11:31

entonces por que no puedo centrar la web? ni poner un div dentro de otro?

jomaruro · #18 (**permalink**) 07/11/2009, 07:09

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.