Autor Tema: Imagen en la esquina de la web!  (Leído 1153 veces)

Desconectado C-ChacK

  • PHPer@ Fijo
  • ***
  • Mensajes: 147
  • Karma: 3
  • --] chacKos [--
    • Ver Perfil
Imagen en la esquina de la web!
« en: 21 de Octubre de 2010, 23:15:45 pm »
Hola, estoy intentando colocar unas imágenes en la esquina de la web pero tengo el siguiente problema que no se como solucionar, haber de momento tengo esto:

prueba.html
Código: [Seleccionar]
<body class="imagenesquina">
...
</body>

style.css
Código: [Seleccionar]
.imagenesquina{
background-image: url(imagan.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}

De esta forma coloco una imagen en la parte inferior izquierda, pero yo quiero poner una por la izquierda y otra por la derecha, que no tenga que ver una con otra, y quiero que al poner el rato encima pues pueda ser un link o cambiar la imagen por otra...

Para ello utilizo:
Código: [Seleccionar]
.imagenesquina:hover{
background-image: url(imagan.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
Pero ocurre lo deseado pero siempre que pongo el raton dentro de la web, no se bien como hacer esto. No sé si me he explicado bien!

Comunidad PHPeros

Imagen en la esquina de la web!
« en: 21 de Octubre de 2010, 23:15:45 pm »

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:Imagen en la esquina de la web!
« Respuesta #1 en: 21 de Octubre de 2010, 23:22:13 pm »
Yo lo haría algo así:

Código: [Seleccionar]
<div class="div"><img src="" border="0" alt="" /></div>
Y el CSS

Código: [Seleccionar]
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
.div{
float:left; width:100px; height:50px; position:fixed; margin-left:0xp; margin-top:0px;}
-->
</style>

Desconectado AlejandroKrevan

  • PHPer@ Fijo
  • ***
  • Mensajes: 182
  • Karma: 9
  • Sexo: Masculino
  • Cubodi.com :)
    • Ver Perfil
    • Cubodi
Re:Imagen en la esquina de la web!
« Respuesta #2 en: 21 de Octubre de 2010, 23:28:56 pm »
Yo lo hice en una de mis webs,
prueba con estas propiedades
Código: [Seleccionar]
position: fixed;
right: 0;
bottom: 0;
display: block;
height: Hpx;
width: Wpx;
background: url(’IMG‘) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
*display: none;

Donde H, lo reemplazas por la altura de la imágen, W por la anchura. e IMG por la url donde está la imágen.
Asegurate de que el DIV vaya justo antes del </body>
Cubodi.com - Coming soon :)

Desconectado C-ChacK

  • PHPer@ Fijo
  • ***
  • Mensajes: 147
  • Karma: 3
  • --] chacKos [--
    • Ver Perfil
Re:Imagen en la esquina de la web!
« Respuesta #3 en: 22 de Octubre de 2010, 00:32:09 am »
Ok ya he visto el codigo, gracias.
En cuanto a crear una layout de 3 columnas, esta seria la forma no? No se si es la mejor manera pero es lo que se me ha ocurrido, pero no se como colocar el footer al final de principal

index.html
Código: [Seleccionar]
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  </head>
  <body>
    <div class="izquierda">
    </div>
    <div class="derecha">
    </div>
    <div class="principal">
      <div class="footer">
  </div>
    </div>
  </body>
</html>

style.css
Código: [Seleccionar]
body {
  margin: 0px;
  padding: 0px;
  font: 13px Arial, Helvetica, sans-serif;
  color: #212121;
}

.izquierda {
  width:200px;
  height:100%;
  background-color:#ffcc00;
  margin:auto;
  float:left;
}

.derecha {
  width:200px;
  height:100%;
  background-color:#ffcc00;
  margin:auto;
  float:right;
}

.principal {
  width:900px;
  height:100%;
  background-color:#ffaa00;
  margin:auto;
  float:auto;
}

.footer {
  width: auto;
  height: 20px;
  text-align: center;
  background-color:#cccc00;
}

La cosa es que con este codigo, si redimensiono la pantalla la parte derecha hace desaparecer la columna central desde que la redimensione un poco!
« Última modificación: 22 de Octubre de 2010, 01:31:20 am por C-ChacK »