logo se desplaza

maire · #1 (**permalink**) 25/02/2012, 11:28

tengo este html:


<div class="contenedorCienxCien">
<h1 id="logo"><a href="#" title="Homepage"><span>STAR</span></a></h1>
</div>


y el CSS:

/* LOGO */
.contenedorCienxCien{width:100%; background-color:#42413f; height:83px;}

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

#logo a span{visibility:hidden}

a:link{text-decoration:none}
/* FIN LOGO */

/* DIV CONTENEDOR */
.contenedor{width:960px; margin:0 auto}

/* MENU SELECT */
.menuselect{width:100%; margin:35px 0 33px 16px}

todo queda bien dentro del div 960px, mi resolucion es 1600x900, cuando veo la pagina en otras resoluciones, todo se ve bien, excepto el logo que se desplaza para adentro como 70 px, no guarda alineacion con el resto de las cosas como el menu select que todo que da al borde....que es lo que puede estar provocando que el logo se desplaze? saludos

kseso? · #2 (**permalink**) 25/02/2012, 12:22

Cita:

.contenedorCienxCien{width:100%; background-color:#42413f; height:83px;}
#logo{background:url(../Iconos/logo.png) no-repeat; width:160px; height:52px; position:absolute; cursor:pointer; top:9%; left:20.5%}

Cuando la anchura computada de ".contenedorCienxCien" sean 1000px ¿a cuantos px del borde izquierdo estará "#logo"?
Y si ese valor computado fuesen 1500px ¿a cuántos?

Sirius381 · #3 (**permalink**) 25/02/2012, 15:03

Yo soy novato en CSS pero te recomiendo que no fijes las dimensiones, lo he leido en varios cursos, manuales, tutoriales, etc. Lo mas sano es hacer un diseño fluido, en vez de fijar las dimensiones usa floats, porcentajes y 'em's' espero te sirva de algo.

Saludos!!

maire · #4 (**permalink**) 25/02/2012, 20:05

Cita:

Iniciado por kseso?

Cuando la anchura computada de ".contenedorCienxCien" sean 1000px ¿a cuantos px del borde izquierdo estará "#logo"?
Y si ese valor computado fuesen 1500px ¿a cuántos?

gracias por la respuesta, y entiendo lo que dices..pero como soluciono mi problema?
tenes alguna idea?

Sirius381 · #5 (**permalink**) 26/02/2012, 11:38

Como te digo, soy novato pero a mi me suena a que la posición de tu logo es absoluta y por eso se encima, yo he tenido problemas de ese tipo por no limpiar los contenedores, esto se hace para que las cajas que contienen elementos se posicionen una detras de otra, pero mi diseõ si es fluido, no uso medidas fijas salvo para una imagen que uso de backgound y necesito que sea exactamente de cierto tamaño, uno de esos problemas lo solucione con la ayuda de la genet del foro con un:

Código:

#clean
{
    clear:both;
}

div ul 
{
    padding: 0;
    margin: 0;
}

Espero te sirva, de todas formas quedo al pendiente, entre los dos creo que podemos hacer algo jejejeje

Saludos!

maire · #6 (**permalink**) 26/02/2012, 19:45

Hola muchas gracias por tu ayuda, he dejado el codigo asi: el html


<div class="contenedorCienxCien">
<h1 id="logo"><a href="#" title="Homepage"><span>KABANA</span></a></h1>
</div>


/* LOGO */
.contenedorCienxCien{width:100%; background-color:#42413f; height:83px;}

#logo{background:url(../Iconos/logo.png) no-repeat; width:160px; height:52px; position:relative; cursor:pointer; top:15px; left:323px;clear:both;padding:0;margin:0;}

#logo a span{visibility:hidden}

a:link{text-decoration:none}
/* FIN LOGO */

ahora no tengo como probar si se desplaza, pero esta el la idea de usar el clear both?

saludos y gracias!

Cita:

Iniciado por Sirius381

Como te digo, soy novato pero a mi me suena a que la posición de tu logo es absoluta y por eso se encima, yo he tenido problemas de ese tipo por no limpiar los contenedores, esto se hace para que las cajas que contienen elementos se posicionen una detras de otra, pero mi diseõ si es fluido, no uso medidas fijas salvo para una imagen que uso de backgound y necesito que sea exactamente de cierto tamaño, uno de esos problemas lo solucione con la ayuda de la genet del foro con un:

Código:

#clean
{
    clear:both;
}

div ul 
{
    padding: 0;
    margin: 0;
}

Espero te sirva, de todas formas quedo al pendiente, entre los dos creo que podemos hacer algo jejejeje

Saludos!

Sirius381 · #7 (**permalink**) 26/02/2012, 19:59

Creo que no entendí la duda, si funciono? o estas dudando si poner el clear? yo el clear lo pongo así:

Código HTML:

<div><div>
<div id="clear"></div>

Eso hasta abajo del ultimo elemento que quiero "limpiar" y listo, me pasa para abajo el siguiente, flotado y acomodado en donde requiero.

sigo al pendiente, saludos!

maire · #8 (**permalink**) 26/02/2012, 20:36

no se producen cambios, el logo insisite en quedarse arrimado al lago izquierdo, lo que me obliga a darle un margen que els lo que provoca lugo el desplazamiento...

gracias y saludos!

Sirius381 · #9 (**permalink**) 26/02/2012, 20:43

has probado a darle un padding al contenedor del logo?

Saludos! (sigo al pendiente)

C2am · #10 (**permalink**) 27/02/2012, 08:20

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.

maire · #11 (**permalink**) 27/02/2012, 11:15

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

aqui van los codigos completos, html y css:

<body>

<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 class="contenedorCienxCien">
<h1 id="logo"><a href="#" title="Homepage"><span>star</span></a></h1>
</div>


<div class="contenedor">


<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>

</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

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.

C2am · #12 (**permalink**) 27/02/2012, 11:54

¿Quieres que el logo se mantenga fijo con respecto a quién?¿Se mantenga alineado con respecto a otro elemento que está en contenido?

Entonces una posible solución en crear dentro contenedorCien+Cien otro div con position: relative, margin:0 auto y el mismo width que contenedor, y luego dentro de este el logo.

Saludos

maire · #13 (**permalink**) 27/02/2012, 16:19

Hola ! creo que estas cerca de mi problema, la idea es que como hay un contenedor de 960px de ancho, que el logo quede tambien dentro de esos 960 de ancho y se alinea a la izquierda del los 960...lo hare y te digo! saludos y gracias!

maire · #14 (**permalink**) 27/02/2012, 16:27

segui tus pasos y esa era la solucion!!!, mil gracias! quedo perfecto!

Cita:

Iniciado por C2am

¿Quieres que el logo se mantenga fijo con respecto a quién?¿Se mantenga alineado con respecto a otro elemento que está en contenido?

Entonces una posible solución en crear dentro contenedorCien+Cien otro div con position: relative, margin:0 auto y el mismo width que contenedor, y luego dentro de este el logo.

Saludos