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:
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ć.