Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: C-ChacK 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
<body class="imagenesquina">
...
</body>
style.css
.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:
.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!
-
Yo lo haría algo así:
<div class="div"><img src="" border="0" alt="" /></div>
Y el CSS
<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>
-
Yo lo hice en una de mis webs,
prueba con estas propiedades
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>
-
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
<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
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!