Witam, mam parę problemów i prosiłbym o pomoc. ;)
Po otwarciu strony chcę uzyskać taki wynik: http://i.imgur.com/15yBqHj.jpg 1. tło ma być nie maksymalizujące się i na całą powierzchnię ekranu. Ponadto po najechaniu na konkretną ligę wyświetla się lista meczy: http://i.imgur.com/7SBUkQn.jpg
Mam parę problemów:
1. http://i.imgur.com/du45WS0.jpg - po lewej stronie występuje niepotrzebny pasek
2. http://i.imgur.com/Enehl1c.jpg - po prawo po najechaniu występuje niepotrzebny pasek
3. Po najechaniu myszką wyświetlają się loga, a powinny być widoczne od razu
4. Strona nie jest na cały ekran i da się ją powiększać i pomniejszać
HTML:
<body>
<footer>
<div class="jeden"> <img src="grafika/loga/hiszpanska.png" />
<p class="text-hover">
Lorem ipsum dolor ist
</p>
</div>
<div class="dwa"> <img src="grafika/loga/angielska.png" />
<p class="text-hover">
Lorem ipsum dolor ist
</p>
</div>
<div class="trzy">Logo
<p class="text-hover">
Lorem ipsum dolor ist
</p>
</div>
<div class="cztery">Logo
<p class="text-hover">
Lorem ipsum dolor ist
</p>
</div>
<div class="piec">Logo
<p class="text-hover">
Lorem ipsum dolor ist
</p>
</div>
</footer>
</body>
CSS:
body{
margin: 0;
}
footer{
width: 1920px;
height: 1080px;
overflow: hidden;
position: relative;
margin: 0 auto;
background-color: red;
}
.jeden,.dwa,.trzy,.cztery,.piec{
position: absolute;
text-align: center;
padding-top: 80px;
box-sizing: border-box;
overflow: hidden;
}
.jeden:after, .dwa:after, .trzy:after, .cztery:after, .piec:after{
display: block;
position: absolute;
content: "";
top: 0px;
left: 0px;
width: 1920px;
height: 1080px;
}
.jeden{
-ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
-webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
transform: matrix(1, 0, -0.3, 1, 1, 0);
background-color: #c1c1c1;
width: 100%;
height: 100%;
float: left;
z-index: 1;
background-image: url('../grafika/tlo_1.png');
}
.dwa{
float: left;
left: 20%;
-ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
-webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
transform: matrix(1, 0, -0.3, 1, 1, 0);
width: 100%;
height: 100%;
z-index: 2;
background-image: url('../grafika/tlo_2.png');
}
.trzy{
float: left;
left: 40%;
-ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
-webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
transform: matrix(1, 0, -0.3, 1, 1, 0);
width: 100%;
height: 100%;
z-index: 3;
background-image: url('../grafika/tlo_3.png');
}
.cztery{
float: left;
left: 60%;
-ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
-webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
transform: matrix(1, 0, -0.3, 1, 1, 0);
width: 100%;
height: 100%;
z-index: 4;
background-image: url('../grafika/tlo_4.png');
}
.piec{
float: left;
left: 80%;
-ms-transform: matrix(1, 0, -0.3, 1, 150, 0);
-webkit-transform: matrix(1, 0, -0.3, 1, 150, 0);
transform: matrix(1, 0, -0.3, 1, 1, 0);
width: 100%;
height: 100%;
z-index: 5;
background-image: url('../grafika/tlo_5.png');
}
.text-hover{
display: none;
}
.jeden:hover, .dwa:hover, .trzy:hover, .cztery:hover, .piec:hover{
width: 30%;
z-index:6;
}
.piec:hover{
left: 75%;
}
.jeden:hover .text-hover, .dwa:hover .text-hover, .trzy:hover .text-hover, .cztery:hover .text-hover, .piec:hover .text-hover{
display: block;
}
Można sobie zobaczyć jak to działa tutaj: http://whowasbetter.c0.pl/home_page.php
Pozdrawiam i liczę na pomoc. ;)
