[CSS] Wyświetlanie bloku szerszego niż szer. przeglądarki

0

Witam,

Czy jest jakiś sposób aby wyświetlić na środku strony blok/obrazek szerszy niż maksymalna szerokość przeglądarki (przy danej rozdzielczości ekranu) aby nie pokazywał się poziomy scrollbar?

Obrazek po prostu zostałby ucięty po bokach, a na innym komputerze o większej rozdzielczości ekranu pokazywałaby się już większa jego część (w szególnym wypadku już całość).

Tutaj mała wizualizacja mojego problemu:
user image

Dodam, że nie mogę użyć do tego celu selektora body ponieważ w nim mam już inne tło, które też działa tak jak powyżej (no i właśnie, w body się da - a czy istnieje jeszcze inne rozwiązanie tego problemu)?

Pozdrawiam

0

Jasne, że się da. Nie przejmuj się tym, że coś już masz w body. A co za problem otoczyć cała zawartość body jakimś kolejnym elementem (nie oszukujmy się: DIV-em) i to jemu ustawić tło?

Poza tym nie zapominaj też o istnieniu elementu... html! Deklaracje, które masz przypisane do body przenieś do html. W ten sposób body Ci się zwolni, więc możesz tam wstawić coś nowego.

0

Witam,
pozwolę sobie odkopać temat. Mam taki sam problem co założyciel tematu, z tym że ja mam diva ze sliderem, któremu chce nadać szerokość 1920px tak aby wyświetlał się na całej szerokości w każdej rozdzielczości. Taki trik jest zastosowany tutaj http://hogash.com/themeforest/?theme=eris_joomla , niezależnie od rozdzielczości slider zajmuje całą szerokość, przy czym jest wyśrodkowany i nie ma poziomego paska przewijania. Ktoś może wie jak to osiągnąć?

Pozdrawiam

0

Tam jest javascript. Pobierasz szerokość obszaru roboczego i przypisujesz tę szerokość obrazkom. Wychwytujesz eventa zmiany rozmiaru okna i jak coś to odświeżasz szerokości.

0

Ustaw to jako div, daj width: 100% i ustaw swój obrazek jako tło dając wyśrodkowanie na top center.

0

Jako tło diva sprawuje się dobrze:

<body style="margin: 0">
	<div style="background: url('obrazek.jpg') center no-repeat; width: 100%; height: 200px;">

	</div>
</body>

Jeżeli chcesz, aby div nie należał do przepływu strony (tzn. będą nakładać się na niego inne elementy), dodaj position: absolute

1 użytkowników online, w tym zalogowanych: 0, gości: 1