Ver Mensaje Individual
  #11 (permalink)  
Antiguo 27/02/2012, 11:15
maire
 
Fecha de Ingreso: agosto-2005
Mensajes: 97
Antigüedad: 18 años, 8 meses
Puntos: 1
Respuesta: logo se desplaza

Hola! muchas gracias por la ayuda...la resolucion que trabajo es de 1600x900

aqui van los codigos completos, html y css:

<body>
<!-- DIV ENCABEZADO -->
<div class="canastaCompras">
<ul id="menuBar">
<li><a id="items" href="#">0 Items [ 0,00 ]</a></li>
</ul>
<div id="canastaCompra" onclick="location.href='#'"><a href="#"><span>compras</span></a>
</div>
</div>
<!-- DIV FIN ENCABEZADO -->

<!-- DIV LOGO -->
<div class="contenedorCienxCien">
<h1 id="logo"><a href="#" title="Homepage"><span>star</span></a></h1>
</div>
<!-- DIV FIN LOGO -->
<!-- DIV CONTENEDOR -->
<div class="contenedor">

<!-- DIV COMBO CATEGORIAS -->
<div class="menuselect">
<select name="Productos">
<option value="bolsos" selected="selected">Bolsos</option>
<option value="cinturones">Cinturones</option>
<option value="zapatos">Zapatos</option>
</select>
</div>
<!-- DIV FIN COMBO CATEGORIAS -->

</div>
<!-- FIN CONTENDEDOR -->
</body>
</html>



@charset "utf-8";

html, body, div{margin:0px; padding:0px}

/* ENCABEZADO */
.canastaCompras{width:960px; height:48px; margin:0 auto}

#menuBar li{display:inline}

#menuBar li a{font-family:"Verdana",Geneva,sans-serif; font-size:.8em; font-style:normal; font-weight:bold; background-color:inherit; color:#42413F; float:right; margin:20px 20px 0 0}

#items{text-decoration:none}

#canastaCompra a{background:url(../Iconos/bag.jpg) no-repeat; width:20px; height:19px; cursor:pointer; float:right; margin:16px 15px 0 0}

#canastaCompra a span{visibility:hidden}
/* FIN ENCABEZADO */

/* CONTENEDOR */
.contenedor{width:960px; margin:0 auto}
/* LOGO */
.contenedorCienxCien{width:100%; background-color:#42413f; height:83px;}

#logo{background:url(../Iconos/logo.png) no-repeat; width:160px; height:52px;cursor:pointer;position:absolute; top:65px;left:322px;}

#logo a span{visibility:hidden}

a:link{text-decoration:none}
/* FIN LOGO */
/* MENU SELECT */
.menuselect{width:100%; margin:35px 0 33px 16px}

select{font-family:"Verdana",Geneva,sans-serif; font-size:.95em}

option{font-family:"Verdana",Geneva,sans-serif; font-size:.95em; width:90px}
/* FIN MENU SELECT */

/* TABLA GALERIA DE PRODUCTOS */
table#productos{border-collapse:separate; border-spacing:15px; width:100%; vertical-align:middle; border:solid 0px transparent}

table#productos td{text-align:center; vertical-align:middle; border:solid 1px #b6b5b5; padding:20px}

table#productos td p{text-align:center; padding:0; margin:5px 0}

table#productos td button{background-image:url(../Iconos/comprar.jpg); background-repeat:no-repeat; height:18px; width:69px; text-indent:-9999px; text-align:center; padding:0; margin:5px 0; border:none; background-color:transparent; cursor:pointer}

.nombreProducto{font-family:"Verdana",Geneva,sans-serif; font-size:.95em; background-color:inherit; color:#42413f}

.precio{font-family:"Verdana",Geneva,sans-serif; font-size:0.95em; font-weight:bold}

#carrito{width:960px; height:726px; margin:0 auto; margin-top:-14px}

.tituloCarrito{font-family:"Verdana",Geneva,sans-serif; font-size:1em; font-weight:bold; color:#42413f; background-color:inherit; margin-left:15px; padding-top:20px; font-style:italic}

#div-linea-1{width:930px; border:1px solid #42413f; position:absolute; margin:10px 25px 0 15px}

table#detalleProductos{border-collapse:collapse; border-spacing:15px; width:930px; vertical-align:middle; border:solid 0px transparent; position:absolute; top:800px; margin:0 10px 0 15px}

table#detalleProductos td{text-align:center; vertical-align:middle; border-bottom:solid 1px #42413f; padding:20px; font-size:.95em; margin-right:25px}

.botonRemover{background-image:url(../Iconos/close_btn.jpg); background-repeat:no-repeat; height:16px; width:19px; text-indent:-9999px; border:none; display:block; margin:0 auto}

.tipoLetra{font-family:"Verdana",Geneva,sans-serif; font-size:.1em; font-weight:bold; background-color:inherit; color:#42413f}

.botonSeguir{width:123px; height:22px; background-image:url(../Iconos/seguir_comprando.jpg); background-repeat:no-repeat; background-color:transparent; cursor:pointer; border:none; position:absolute; top:930px; margin-left:15px}

.botonSeguir span{visibility:hidden}

.botonLimpiar{width:124px; height:23px; background-image:url(../Iconos/limpiar_todo.jpg); background-repeat:no-repeat; border:none; background-color:transparent; cursor:pointer; position:absolute; top:930px; margin-left:420px}

.botonLimpiar span{visibility:hidden}

.botonFinalizar{width:116px; height:23px; background-image:url(../Iconos/finalizar_compra.jpg); background-repeat:no-repeat; border:none; background-color:transparent; cursor:pointer; position:absolute; top:930px; margin-left:825px}

.botonFinalizar span{visibility:hidden}
/* FIN TABLA GALERIA DE PRODUCTOS */

/* FORMULARIO FINALIZAR PEDIDO */
#formulario{width:960px; height:726px; margin:0 auto}

div#datosFormulario{margin-left:25px; margin-top:45px}

.datosCliente{font-family:"Verdana",Geneva,sans-serif; font-size:1em; font-weight:bold; color:#42413f; background-color:inherit; margin-left:25px; font-style:italic}
#div-linea-2{width:938px; border:1px solid #42413f; position:absolute; margin:10px 10px 0 15px}

.finalizarPedido{font-family:"Verdana",Geneva,sans-serif; font-size:1.2em; font-weight:bold; color:#42413f; background-color:inherit; margin-left:15px; padding-top:20px; text-align:center}

#div-linea-3{width:938px; border:1px solid #42413f; position:absolute; margin:-10px 10px 0 15px}

.botonseguirCompra{background-image:url(../Iconos/seguir_comprando.jpg); background-repeat:no-repeat; width:123px; height:22px; background-color:transparent; cursor:pointer; border:none; position:absolute; margin-left:15px}

.botonseguirCompra span{visibility:hidden}

.botonfinCompra{background-image:url(../Iconos/finalizar_compra.jpg); background-repeat:no-repeat; width:116px; height:23px; border:none; background-color:transparent; cursor:pointer; position:absolute; margin-left:420px}

.botonfinCompra span{visibility:hidden}

.botonCancelar{background-image:url(../Iconos/cancelar_carrito.jpg); background-repeat:no-repeat; width:115px; height:23px; float:right; border:none; background-color:transparent; cursor:pointer; position:absolute; margin-left:825px}

.botonCancelar span{visibility:hidden}

p.metodoPago{font-family:"Verdana",Geneva,sans-serif; font-size:.95em; font-weight:bold;font-style:italic; color:#42413f; background-color:inherit}

label.texto{width:180px; display:block;font-style:italic;float:left}

input[type='text']{width:350px; margin:5px 2px 10px 0px; border:1px solid #bebdba; background-color:#e1e0df;padding-left:5px}

#fechaEntrega{width:100px; text-align:center}

input#txt{width:40px}

input#txt_2{width:150px}

.elegirFecha{font-family:"Verdana",Geneva,sans-serif; font-size:.7em; color:#42413f; background-color:inherit; padding-top:25px}

.tipoPago{margin:5px 2px 10px 0px;font-style:italic; padding:5px}
/* FIN FORMULARIO FINALIZAR PEDIDO */

/* PIE */
#pie{width:960px; height:225px; margin:0 auto; margin-top:-12px;}

#pie p.pie{font-family:Verdana,Geneva,sans-serif; font-size:0.75em; padding-top:98px; margin-left:15px; color:#4b4a49;}

#contacto{margin-top:50px;}

#contacto a{font-family:Verdana,Geneva,sans-serif; font-size:0.75em; margin-left:15px; color:#4b4a49; text-decoration:none;}

.cliente{font-family:Verdana,Geneva,sans-serif; font-size:0.75em; margin:-15px 0 0 82px; color:#4b4a49;}

#empresaDesarrollo{font-family:Verdana,Geneva,sans-serif; font-size:0.75em; color:#4b4a49; position:relative; top:-20px; left:815px; width:200px;}

.facebook {background:url(../Iconos/logo_facebook.jpg) no-repeat; width:27px; height:26px; text-indent:-9999px;cursor:pointer;margin-top:-20px;left:620px;float:right;margin-right:15px;}

.facebook a span{visibility:hidden;}

.twitter a{background:url(../Iconos/logo_twitter.jpg) no-repeat; width:31px; height:27px; text-indent:-9999px;cursor:pointer;margin-top:-20px;margin-left:500px;padding:5px;float:right;}

.twitter a span{visibility:hidden;}

/* FIN PIE */

/* FIN CONTENEDOR */














Cita:
Iniciado por C2am Ver Mensaje
Hola maire
¿Cómo tienes posicionado el logo con respecto a la página?
¿Tienes el logo dentro del div contenedor?
Muestra el html completo que estas usando porque solo muestras el div logo pero no su padre, aunque si no entendí mal lo tienes dentro del "div contenedor".

Para posicionar el logo en forma absoluta, tal como lo estás haciendo, debes indicar con respecto a que lo posicionas. Y eso se logra definiendo al contenedor padre una position que puede ser absolute, relative (la más común) o fixed.
Cuando el padre no tiene definido el posicionamiento (en realidad está definido como static por defecto) el hijo posicionado en forma absoluta lo hace con respecto, en última instancia, a la pantalla, a menos que algún ancestro esté posicionado.

Dado que tienes, o creo que tienes, un contenedor con ancho fijo, no entiendo el porqué posicionar el logo en %. Tal vez la respuesta esté en el resto del código que no muestras.

Saludos

PD: Sirius, el clear:both, funciona como parche para los elementos flotados, no para los posicionados en forma absoluta. Además que poner un div vacío no es la mejor solución, la cual puedes lograr poniéndole al padre que contiene los elementos flotados la propiedad overflow:hidden o auto.

PD2: mi respuesta va dirigida al primer problema planteado, porque veo que haz modificado la position a relative.