Ayuda con css y html

bLaCkH0Le #1 Oct '10

Hola a todos. Estoy maquetando una web y me surge ha surgido un pequeño problema. He puesto un slider de imagenes de 1126px. Quiero que en pantallas mas pequeñas (resoluciones de 1000px) este permanezca siempre centrado. Como podeis ver, siempre se me queda anclado a la izquierda. Además me sale barra horizontal. Lo ideal seria que siempre permaneciese centrado y que no me salieran barras. Asi que en resoluciones inferiores no se viesen los dos semicirculos laterales del banner.

Os paso la url de la web:

Gracias de antemano!

suaveSHOW #2 Oct '10

Y por qué no lo ajustas a todas las pantallas?

bLaCkH0Le #3 Oct '10

no te entendi : ?

Crawler #4 Oct '10

uff, trick one.

Se me ocurre (y probado con firebug) que podrías darle 1000px de ancho al contenedor general (que no tiene id o class!) y centrarlo.

Luego sería cuestión de darle un margen negativo de unos -50px al slider y conseguirás que salga centrado en resoluciones inferiores.

Faltaría quitar el tema del scroll horizontal, que lo puedes quitar con el overflow-x del body, pero personalmente no me gusta nada esta opción, por problemas con resoluciones inferiores.

Otra solución totalmente distinta pero que no he probado, es meter el slider en un div aparte
con position absolute, centrado, con width proporcional al ancho de la página y overflow hidden, esto evitaría el problema del overflow-x del body, pero no he probado la solución (o variaciones de la misma)

Postea cuando lo consigas

bLaCkH0Le #5 Oct '10

si le aplico margin se me desplaza a la izquierda el banner.

NeB1 #6 Oct '10

Si al contenedor principal le das

width:1000px;
margin: 0 auto;

no te funciona?

Crawler #7 Oct '10

ponle margin negativo.

Es decir:

#slider{
margin-left: -50px;
}

scumah #8 Oct '10

A ver, puedes intentar también una cosa así:

#slider {
left:50%;
margin-left:-563px; /* Mitad del ancho del slider */
position:absolute;
width:1126px;
}

#content {
margin-top:262px; /* Alto del slider, creo que es más o menos eso */
position:relative;
width:994px;
}

Esto te centra el slider completamente y hace lo que quieres, sólo probado en FF mac. Para quitar el scroll, tendrías que ponerle "overflow-x: hidden" al body, cosa que impediría que resoluciones inferiores a 1024 puedan ver la página en condiciones, como bien te ha dicho Crawler. Tú decides xD

bLaCkH0Le #9 Oct '10

scumah tu solución me parece buena. lo he probado con IE y firefox y se ve bien. Gracias a todos los la ayuda.

Tengo otra preguntilla : P resulta que quiero que cuando ponga el ratón sobre alguna de las tres noticias (div id="noticia") cambie el estado a hover tanto del titular como de botón con el + (news_bottom). ¿Algún manual o sitio donde me pueda informar? He estado buscando y lo que he encontrado son para cambiar propiedades del esilo de un div. Probe a cambiar a saco el background pero no me funciono.

scumah #10 Oct '10

#9, me alegro de que te valga

Y en cuanto a lo del hover en las noticias, primero, cambiaría el id del news_bottom y lo haría class (en teoría sólo debería haber un id igual por página) y le llamaría button en vez de bottom xD aunque eso no son cambios funcionales y no has preguntado nada de eso, nunca está de más afinar las cosas si es posible A parte, cambiaría el bg del botón por un sprite con las dos imágenes (reposo y hover) y haría un background-position: 0 32px; en el .news_button:hover. Aquí tienes más información sobre sprites.

Una vez hecho eso, y teniendo en cuenta que no tengo ni puta idea de jQuery xD yo crearía dos clases que sean como las clases :hover de los elementos que queremos cambiar, llamadas "txt_cabecera-hover" y "news_button-hover" y haría algo así:

$(document).ready(function(){
	$("#noticia").hover(function(){	
		$(this).children(".txt_cabecera").toggleClass("txt_cabecera-hover");
		$(this).children(".news_button").toggleClass("news_button-hover");
	});
});

Esto lo que hace es cambiarte la clase de los elementos .txt_cabecera y .news_button del #noticia en el que haces hover. Debería funcionar, pero quizás haya alguna forma mejor de hacerlo. NeB1 te podrá ayudar más que yo con esto seguro

bLaCkH0Le #11 Oct '10

gracia spor la apreciacion de button scumah jajaja. Creme que lo cambiare! oy a probarlo ahora mismo y te cuento. Gracias por la ayuda!

edit:

La solución me funciona a la perfección solo que cuando quito el mouse del div este debe volver a su estado normal. Estoy mirando como tratar una especie de "onmouseout" en ajax pero no veo nada.

edit:
Asi me funciona!

$("#noticia").hover(function(){	
	$(this).children(".txt_cabecera").toggleClass("txt_cabecera-hover");
	$(this).children(".news_button").toggleClass("news_button-hover");

},function(){

	$(this).children(".txt_cabecera").toggleClass("txt_cabecera-hover");
	$(this).children(".news_button").toggleClass("news_button-hover");
							 
});

Ayuda con css y html

Usuarios habituales

Tags