Webwereld

Slider 80% height, content eronder

Gestart doorRobertt6 reacties69 weergaven
Log in om mee te praten

7 berichten · pagina 1 van 1

Robertt

Lid · Topicstarter

Berichten
1.579
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Hallo,

Ik wil iets maken zoals:
http://7oroof.com/tfdemos/7host/home-1.html

Dat als je naar de pagina gaat je eerst een grote foto ziet (de slider). Op die site gebruiken ze 100% ik wil 80% zodat je nog wel iets van de site eronder kan zien.

Wat heb ik tot nu toe?

HTML

Codeblok (voorbeeld.php):

1
2
3
4
5

De rest van de site


CSS

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.slider {
width: 100%;
height: 80%;
min-height: 30px;
background: #1f0c82;
position: absolute;
}

.slider .foto {
background: url("/assets/img/voorsteven50/2.jpg") center;
background-size: cover;
opacity: 0.5;
width: 100%;
height: 100%;
}

Maar de h1 komt nu boven in de staan door de absolute van slider. Hoe kan ik dit oplossen? Dat de slider 80% van boven is en daar onder pas de content.
0
Jeffreyy

Lid

Berichten
6.144
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Gewoon als hoogte 80vh meegeven. Dan kan de absolute weg.
Je zal wel even moeten kijken naar compatibility, geen idee hoe ver ze daar mee zijn namelijk.
0
Stef

Lid

Berichten
10.150
Reputatie
2
Punten
0,00
Lid sinds
Laatst gezien
Jponsen schreef:
Gewoon als hoogte 80vh meegeven. Dan kan de absolute weg.
Je zal wel even moeten kijken naar compatibility, geen idee hoe ver ze daar mee zijn namelijk.
Wat is vh?
Scoreboard!
0
Jeffreyy

Lid

Berichten
6.144
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Viewport height. Oftewel de hoogte van je viewport (scherm).
0
Rik

Lid

Berichten
18.393
Reputatie
0
Punten
0,04
Lid sinds
Laatst gezien
Jponsen schreef:
Gewoon als hoogte 80vh meegeven. Dan kan de absolute weg.
Je zal wel even moeten kijken naar compatibility, geen idee hoe ver ze daar mee zijn namelijk.
Niet geweldig:
http://caniuse.com/#feat=viewport-units
0
One2xs

Bot

Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Rik schreef:
Eerdere citaten tonen
Jponsen schreef:
Gewoon als hoogte 80vh meegeven. Dan kan de absolute weg.
Je zal wel even moeten kijken naar compatibility, geen idee hoe ver ze daar mee zijn namelijk.

Niet geweldig:
http://caniuse.com/#feat=viewport-units
Wél geweldig eigenlijk.
0
Jeffreyy

Lid

Berichten
6.144
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .slider {
            height: 80vh;
            background: red;
        }
    </style>
</head>
<body>
    <div class="slider">
        
    </div>
    
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    
    <script type="text/javascript">
        var sliderHeight = function() {
            $(.slider).css(height, ( $(window).height() * 0.8 ) );
        }
        
        $(document).ready(function() {
            sliderHeight();
        });
        
        $(window).resize(function() {
            sliderHeight();
        });
    </script>
</body>
</html>


Snippet inc. jQuery Fallback.
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren