¿Que quieren decir estoy códigos?

Citar

Escrito el 08 Abr 2009 10:57 pm

Porfavor necesito saber cada codigo de este CSS:

Código :

#imagentestoflove { background: url(/love/images/love.png) bottom no-repeat; position: relative;  }
#posiciontestoflove { position: relative; z-index: 500; height:233px; width:649px; clear:none; }

position: relative
z-index: 500
width:649px (cuando lo modifico no pasa nada la imagen sigue igual)

Quiero centrar la imagen

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 09 Abr 2009 12:00 pm

Aquí puedes encontrar la explicación de los tipos de position que existen.

El Z-Index es una propiedad que hace que una capa se monte encima de otra, como no se explicartelo bien, mira un ejemplo:

Y con ese Width lo que estás haciendo es modificar el tamaño del DIV.

Por cierto, puedes animarte y buscar un poco

, por ejemplo aquí y aquí.

Saludos

Por Distriker

Claber

955 de clabLevel

9 tutoriales

Envíale un mensaje privado Email Web

Las Palmas De Gran Canarias

@IvanHerCaz

Citar

Escrito el 09 Abr 2009 01:47 pm

chiguel escribió:

Porfavor necesito saber cada codigo de este CSS:

Código :

#posiciontestoflove { position: relative; z-index: 500; height:233px; width:649px; clear:none; }

position: relative
z-index: 500
width:649px (cuando lo modifico no pasa nada la imagen sigue igual)

Quiero centrar la imagen

#imagentestoflove
{
background: url(/love/images/love.png) bottom no-repeat;
position: relative;
}

para centrar imagenes puedes visitar estos links
http://www.scourdesign.com/articulos/tutoriales/css/css10.php
http://www.lamateporunyogur.net/archivos/2005/08/27/alinear-imagenes-mediante-css/
http://sumolari.com/centrar-una-imagen-con-css/
http://deibiz.es/blog/?p=315

espero que te sean de utilidad los links

#posiciontestoflove
{
position: relative;
z-index: 500;
height:233px;
width:649px;
clear:none;
}

Por dark_nexus

4 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 09 Abr 2009 03:21 pm

Lo que quiero hacer es que PAPEL001 quede atras de LOGOTIPO y que PAPEL002,003,004 se centren y no esten en el lado izquierdo.

y cuando pongo eso de Z-INDEX y disminuyo no hace ningun cambio sigue igual.

CODIGO CSS

Código :

/* logotipo */
#imagentestoflove { background: url(/love/images/love.png) bottom no-repeat; position: relative;  }
#posiciontestoflove { position: relative; z-index: 500; height:233px; width:649px; clear:none; }

/* papeles */
#papel001 { background: url(/love/images/001.png); background-position:center; background-repeat:no-repeat; }
#posicionpapel001 { position: relative; z-index: 400; height:70px; width:649px; clear:none; }
#papel002 { background: url(/love/images/002.png); background-position:center; background-repeat:no-repeat; }
#posicionpapel002 { position: relative; z-index: 300; height:233px; width:649px; clear:none; }
#papel003 { background: url(/love/images/003.png); background-position:center; background-repeat:no-repeat; }
#posicionpapel003 { position: relative; z-index: 200; height:401px; width:649px; clear:none; }
#papel004 { background: url(/love/images/004.png); background-position:center; background-repeat:no-repeat; }
#posicionpapel004 { position: relative; z-index: 100; height:601px; width:649px; clear:none; }

CODIGO HTML

Código :

<!-- //logotipo -->
<div id="imagentestoflove">
<div id="posiciontestoflove">
</div>
</div>
<!-- // fin del logotipo -->

<!-- //papeles -->
<div id="papel001">
<div id="posicionpapel001">
<div id="papel002">
<div id="posicionpapel002">
<div id="papel003">
<div id="posicionpapel003">
<div id="papel004">
<div id="posicionpapel004">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- //fin de los papeles -->

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 09 Abr 2009 03:49 pm

Para centrar debes aplicar la propiedad Margin-Auto de esta manera (al CSS por supuesto):

Código :

margin:50px 0px

Lo del z-index no te entiendo mucho

.

Bueno, espero que te haya servido.

Saludos

Por Distriker

Claber

955 de clabLevel

9 tutoriales

Envíale un mensaje privado Email Web

Las Palmas De Gran Canarias

@IvanHerCaz

Citar

Escrito el 11 Abr 2009 12:27 am

Estas intentando usar posiciones absolutas cuando deberias tener divs embebidos entre si y aplicar el fondo encima de otro.

Por ejemplo.

Código :

<div id="paper">
<div id="paper-head">
<div id="paper-foot">

<p>content</p>

</div>
</div>
</div>

#paper { background:url(bg.png) repeat-y; margin:0 auto; width:400px; }
#paper-head { background:url(head.png) no-repeat center top; }
#paper-foot { background:url(foot.png) no-repeat center bottom; padding:20px; }

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 11 Abr 2009 04:24 am

Se supone que el primero es el codigo HTML y el segundo el del CSS no?

Código :

<div id="paper">
<div id="paper-head">
<div id="paper-foot">

<p>content</p>

</div>
</div>
</div>

Código :

#paper { background:url(bg.png) repeat-y; margin:0 auto; width:400px; }
#paper-head { background:url(head.png) no-repeat center top; }
#paper-foot { background:url(foot.png) no-repeat center bottom; padding:20px; }

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 11 Abr 2009 05:08 am

Lo modifique y me quedo algo asi:

Anda todo bien las imágenes están al centro el logotipo esta por encima de todos, solo que el único problema es que papel002 esta atrás de papel001 y yo lo que quiero es que valla debajo de papel001

Código CSS

Código :

/* logotipo */
#paper-foot { background:url(http://localhost/love/images/love.png) no-repeat center top; padding:135px; }
#paper-head { background:url(http://localhost/love/images/001.png) no-repeat center bottom; }
#paper { background:url(http://localhost/love/images/002.png) no-repeat center bottom; }

/* fin del logotipo */

Código HTML

Código :

<!-- //logotipo -->
<div id="paper">
<div id="paper-head">
<div id="paper-foot">
</div>
</div>
</div>
<!-- //fin del logotipo -->

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

¿Que quieren decir estoy códigos?

Escribe una respuesta rapida