Foros del Web » Creando para Internet » CSS »

¿Como lograr esto?

Estas en el tema de ¿Como lograr esto? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/01/2010, 12:51
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 12 años, 10 meses
Puntos: 5
¿Como lograr esto?

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.
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333
  #2 (permalink)  
Antiguo 19/01/2010, 12:58
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: ¿Como lograr esto?

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
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 19/01/2010, 13:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: ¿Como lograr esto?

investiga sobre CSS positions
  #4 (permalink)  
Antiguo 19/01/2010, 15:40
Avatar de LuisdaviD  
Fecha de Ingreso: octubre-2006
Mensajes: 74
Antigüedad: 11 años, 1 mes
Puntos: 2
Respuesta: ¿Como lograr esto?

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.
  #5 (permalink)  
Antiguo 19/01/2010, 15:43
Avatar de LuisdaviD  
Fecha de Ingreso: octubre-2006
Mensajes: 74
Antigüedad: 11 años, 1 mes
Puntos: 2
Respuesta: ¿Como lograr esto?

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

Saludos.
  #6 (permalink)  
Antiguo 19/01/2010, 18:57
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 12 años, 10 meses
Puntos: 5
Respuesta: ¿Como lograr esto?

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.
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333
  #7 (permalink)  
Antiguo 19/01/2010, 20:28
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: ¿Como lograr esto?

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>
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #8 (permalink)  
Antiguo 19/01/2010, 20:38
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: ¿Como lograr esto?

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
__________________
Grupo Telegram Docker en Español
  #9 (permalink)  
Antiguo 20/01/2010, 12:22
Avatar de neoarcangel  
Fecha de Ingreso: enero-2005
Ubicación: España
Mensajes: 566
Antigüedad: 12 años, 10 meses
Puntos: 5
Respuesta: ¿Como lograr esto?

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.
__________________
Mi equipo

Gigabyte GA-MA770T-UD3P Socket AM3|OZC StealthxStream 600 w | Gigabyte Radeon HD 4770 512MB GDDR5| AMD Phenom II 945 X4 Quad Core 3.0Ghz| Memoria Kingston 6GB DDR3 1333

Última edición por neoarcangel; 20/01/2010 a las 16:02

Etiquetas: Ninguno
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 18:02.