Usunięcie poziomego scrollbara

0

Witam. Na stronie mam baner o szerokości 1300px gdzie reszta strony ma 1000px (wymiarów nie można zmienić). Baner składa się ze zdjęcia i tekstu który będzie umieszczony w nim (div class="baner-inner"). Kod który niżej wkleiłem (wersja 1) jak najbardziej oddaje to co chciałem osiągnąć ale pojawił się problem ze scroll-barem poziomym. Pojawia się przy szerokości <1300px gdzie w założeniu ma się pojawiać przy <1000px. Udało mi się go pozbyć troche edytując (patrz wersja 2) ale teraz pojawił się problem z baner-inner bo nie umiem go ograniczyć żeby siedział w div id="baner" przez co rozciąga się na całą szerokość.

Efekt ma być taki:
problem1.png
Wersja1

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
	<link rel="stylesheet" href="style.css"/>
</head>
<body>
	<header id="header">
		HEADER
	</header>
	
	
	<div id="baner">
		<div class="baner-inner">
			<div class="baner-text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend ipsum nec sem molestie, nec faucibus neque lobortis. Quisque felis leo, 
			</div>
		</div>
	</div>
	
	<section id="content">
		CONTENT
	</section>
	
	<footer id="footer">
		STOPKA
	</footer>
</body>
</html>

CSS

#header{
	background-color: green;
	width: 1000px;
	margin: 0 auto;
	height: 75px;
	margin-bottom: 25px;
}

#baner{
	background-image: url("baner.png");
	background-position: top center;
	background-repeat: no-repeat;
	

	height: 500px;
	width: 1300px;
	margin: 0 auto;
	position: relative;
}

.baner-inner{
	background-color: yellow;
	width: 100%;
	height: 100px;
	position: absolute;
	bottom:0;
}

.baner-text{
	width: 1000px;
	margin: 0 auto;
	background-color: #ff21ff;
}

#content{
	background-color: blue;
	width: 1000px;
	margin: 0 auto;
	margin-top: 25px;
	margin-bottom: 25px;
}

#footer{
	background-color: red;
	width: 1000px;
	margin: 0 auto;
	height: 75px;
}

Wersja 2
HTML

<!DOCTYPE html>
<html lang="pl">
<head>
	<link rel="stylesheet" href="style2.css"/>
</head>
<body>
	<header id="header">
		HEADER
	</header>
	
	
	<div id="baner">
		<div class="baner-inner">
			<div class="baner-text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend ipsum nec sem molestie, nec faucibus neque lobortis. Quisque felis leo, 
			</div>
		</div>
	</div>
	
	<section id="content">
		CONTENT
	</section>
	
	<footer id="footer">
		STOPKA
	</footer>
</body>
</html>

CSS

#header{
	background-color: green;
	width: 1000px;
	margin: 0 auto;
	height: 75px;
	margin-bottom: 25px;
}

#baner{
	background-image: url("baner.png");
	background-position: top center;
	background-repeat: no-repeat;
	height: 500px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.baner-inner{
	background-color: yellow;
	width: 100%;
	height: 100px;
	position: absolute;
	bottom:0;
}

.baner-text{
	width: 1000px;
	margin: 0 auto;
	background-color: #ff21ff;
}

#content{
	background-color: blue;
	width: 1000px;
	margin: 0 auto;
	margin-top: 25px;
	margin-bottom: 25px;
}

#footer{
	background-color: red;
	width: 1000px;
	margin: 0 auto;
	height: 75px;
}

Przepraszam za nazwę tematu ale nie mam pojęcia jak to nazwać.

0

Szczerze to nic nie zrozumialem z tego co napisales. Jezeli chcesz oddac sytuacje na obrazku to:

  • width header'a, stopki, contentu i tego rozowego klocka ustaw na np. 1000px,
  • width tego zielonego i zoltego ustaw na 1300px,
  • zeby wysrodkowac rozowy klocek daj margin: 0 auto;

Problem solved.

Jezeli chodzi o scrolla, to domyslam sie, ze chcesz zeby sie pojawil w momencie osiagniecia 1000px tak? To zachowujac obecny stan rzeczy mozesz dac na body overflow:hidden, a pozniej media query < 1000px pokazac go.

A na przyszlosc wrzucaj kod na jakiegos jsfiddle, codepen, czy cos.
http://codepen.io/anon/pen/VLRamy

0

@Fi3rce czego tu można nie zrozumieć? Banner jest szerszy niż reszta strony, będzie to widoczne przy rozdzielczości >1000px.
W związku z tym, że baner jest szerszy o 300px przy rozdzielczości <1300px pojawia się poziomy scrollbar. Autor chce, aby ten scrollbar pojawiał się dopiero przy rozdzielczości <1000px.

@shimizu, .baner-inner rozjeżdża się bo #banner nie ma określonej szerokości. Jak wrzucisz do drugiego przykładu max-width: 1300px; dla #banner będzie dobrze.

0

@_naf pewnie będzię działać ale mam jeszcze jedno pytanko. Bo to co mi podałeś jest zależne od wymiarów obrazka. A da się to jakoś uogolnić? W sensie że będę mógł zmieniać obrazek na inny o innych wymiarach. Mam tutaj na myśli nie tylko szerokość ale także wysokość bo jak np. usunę wysokość z #baner to się nie wyświetli

0

W czystym css nie mam pojęcia ( bo za rzadko go używam ;( ).
W sass(compass) można zrobić coś takiego:

#banner
    height: image-height("http://placekitten.com/200/400")
    width: image-width("http://placekitten.com/200/400")

Oczywiście po skompilowaniu będzie tam wstawiona stała wartość.

0

Chyba sobię poradziłem takim zapisem:

@media all and (min-width:1140px){
	body {
		overflow-x: hidden;
	}
}

Czyli na wszystkich urządzeniach i gdy rozdzielczość jest większa niż 1140px scrollbar poziomy będzie ukryty :)

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