¿Como lograr esto?

neoarcangel · #1 (**permalink**) 19/01/2010, 12:51

Hola, llevo un tiempo aprendiendo a manejar los css y aunque entiendo parte de como se ha hecho esta pagina, sigo sin entender como demonios han conseguido poner la flor en esta pagina

http://www.csszengarden.com/?cssfile=100/100.css

No se si es una capa que la han colocado como han querido o no se como lo han hecho.

Asi como tampoco entiendo como han conseguido poner los peces en esta pagina donde han querido.

http://www.csszengarden.com/?cssfile=210/210.css

Yo uso para programar mis paginas el notepad++, me gustaria saber si para hacer esto se puede hacer con este programa o necesito un dreamweaver o derivados para poder hacerlo.

Gracias.

Carlangueitor · #2 (**permalink**) 19/01/2010, 12:58

El primer ejemplo está hecho poniendo un h1 con el texto oculto (visibility:hidden) y la capa con posición absoluta. Muy similar el segundo ejemplo.

Te recomiendo que descargues las extensiones Firebug y WebDeveloper si usas firefox, tu ayudarán a ver mejor el código.

Y si, con Notepad++ es más que suficiente, por lo menos ese es el que uso.

Saludos

alexk · #3 (**permalink**) 19/01/2010, 13:18

investiga sobre CSS positions

LuisdaviD · #4 (**permalink**) 19/01/2010, 15:40

Para el primer ejemplo puedes revisar esta parte del css:

#pageHeader {background: url(pageHeader2.jpg) 0 0 no-repeat;
height: 157px; width: auto; position: relative; z-index: 10;}
#pageHeader h1 {background: url(ph-flower.gif) 0 0 no-repeat;
height: 330px; width: 250px; position: absolute; z-index: 101;
top: -95px; right: -80px; margin: 0;}
html>body #pageHeader h1 {background-image: url(ph-flower2.png);}

juega un poco con el codigo para que veas en que forma varía.

yo estaba jugando así:

<html>
<head>
<STYLE TYPE="text/css">
#header {
width:250px;
height:330px;
background: url('ph-flower2.png') no-repeat;
position: absolute; z-index: 101;
top: -5px; right:80px; margin: 0;
}
</style>
</head>
<body>
<div id="header"></div>
</body>
</html>

Saludos.

LuisdaviD · #5 (**permalink**) 19/01/2010, 15:43

Ah y para lo de programar... solo se requiere un editor de css... personalmente uso el HTML-Kit.

Saludos.

neoarcangel · #6 (**permalink**) 19/01/2010, 18:57

Me he instalado las dos extensiones, que ya conocia, sobre todo la de firebug, y la verdad ayudan bastante, la de firebug es muy buena pero es francamente imposible saber como han hecho lo de los peces, gracias a la de web developer puedes ver todas las cajas pero hay cajas que sigues sin saber como las han puesto donde las han puesto, y ese es el problema principal, creo que todo el tema radica entre el zindex y el relative y el absolute que llevo francamente mal, me lo comentaron hace poco lo del absolute y el relative pero cuesta entenderlo.
He estado mirando articulos sobre posicionamiento pero son demasiado tecnicos,nada practicos, y cuesta entenderlo.

Cualquier pagina que lo expliquen en un lenguaje entendible me ayudaria bastante.
Gracias a todos por responder.

zerokilled · #7 (**permalink**) 19/01/2010, 20:28

el tema de la posicion es relativamente facil, supongo que en el documento tecnico que encontraste te lo explican. basicamente la posicion absoluta tiene dos reglas: si uno de los elementos padres contiene algun valor diferente a static en la propiedad position, el elemento se ubica respecto al elemento ancestro. en el ejemplo, fijate que P se posiciona en la esquina inferior derecha.

Código:

<div style="width:300px;position:relative; left:200px; top:200px; border:1px solid;"><p style="position:absolute; bottom:0; right:0; width:100px;">posicion respecto al ancestro</p></div>

la otra norma es, si ninguno de los ancestro tiene un valor diferente static, el elemento se posiciona respecto al documento en general. usando el mismo ejemplo anterior, fijate que DIV no tiene la propiedad position:

Código:

<div style="width:300px; margin-left:200px; margin-top:200px; border:1px solid;"><p style="position:absolute; bottom:0; right:0; width:100px;">posicion respecto al ancestro</p></div>

Carlangueitor · #8 (**permalink**) 19/01/2010, 20:38

A ver, creo que está explicación te sirve: http://www.forosdelweb.com/f4/ayuda-...2/#post3243379 no esta del todo completa, pero sirve para iniciar.

Sobre z-index es más sencillo, imagínate un Documento de Photoshop (si no conoces Photoshop, se maneja por capas, una encima de otra), bueno pues esto es más o menos así, lo que haces con z-index es decirle al navegador que capa va estar abajo o arriba; aquí de forma más detalla: http://librosweb.es/referencia/css/z-index.html

Saludos

neoarcangel · #9 (**permalink**) 20/01/2010, 12:22

Voy a seguir haciendo pruebas a ver que tal con el relative y el absolute que por lo visto tienen mas importancia que la que yo creia que tenian.

Gracias por vuestra ayuda.