Slider (foto fader) in CSS zonder JavaScript

Status
Niet open voor verdere reacties.
F

Fredemel

Gebruiker
Lid geworden
2 jun 2008
Berichten
114
Ik wil een <div> laten aansluiten op een bovenliggende header-div die responsive is. Dus bij elke schermgrootte past die zich automatisch aan.
Maar de div met "menu-blokken" BLIJFT op de zelfde pixel-afstand van de top.
Ik heb de div IN de andere header-div gezet... Nog blijft de div op de absolute afstand van de top "zweven"......

Zie de code op https://timtec.nl/Ad/effe.html + css Met verduidelijking door 2 images. ("ctrl-U")

breed: zzVraag1.jpg

smaller: zzVraag2.jpg

Wie o wie heeft voor mij een oplossing....?
 
Laatst bewerkt door een moderator:
Kan je het ook op JSfiddle delen?
 
Tip, haal deze scripts eruit want de code van de pagina is gewoon door iedereen leesbaar :D
Code: 
    <script type="text/javascript" language="javascript"> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script>
    <script>
        document.onkeydown = function(e) {if (e.ctrlKey && (e.keyCode === 85 )) { return false ; }};
    </script>

Dan je html opschonen
Code: 
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ad's Museum</title>
<!-- reboot css haalt verschillen weg tussen browsers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap-reboot.min.css" crossorigin="anonymous">
<!-- eigen css -->
<link rel="stylesheet" href="adsCSS.css">
<!-- favicon -->
<link rel="shortcut icon" href="img/iconAd5.ico" type="image/ico" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
<!-- Volgende regel klopt niet en is incompleet. Google Analytics-Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-169885823-1"></script>
</head>
<body>

<div class="container">
    <diV class="ttHeaderWrap">

        <!-- header -->
        <div class="ttHeadText" >
            Ad Mater's museum
        </div>

        <!-- foto-slider  -->
        <div class="ttImgSlide">
            <img src="img/header01.jpg"   alt="image1" />
            <img src="img/header02.jpg"   alt="image2" />
            <img src="img/header03.jpg"   alt="image3" />
            <img src="img/header04.jpg"   alt="image4"  />
            <img src="img/header05.jpg"   alt="image5" />
            <img src="img/header06.jpg"   alt="image6" />
        </div>

        <!-- info -->
        <div class="wrapBlok">
            <div class="blokken">
                <div>Een</div>
                <div>TweeTwee<br>Brandweer</div>
                <div>Drie</div>
                <div>Vier</div>
                <div>Vijf</div>
                <div>Zes</div>
                <div>Zeven</div>
                <div>Acht</div>
            </div><!-- einde blokken  -->
        </div><!-- einde wrapBlok  -->

    </div><!-- einde ttHeaderWrap  -->
</div><!-- einde container  -->

<br><br><br><br><br>

</body>
</html>
 
Laatst bewerkt:
@Bron,

Bedankt voor de correcties.

Maar het euvel blijf. Op m'n smartphone is nog steeds een grote ruimte tussen de <div>headerWrap en <div>wrapBlok.
Waarom blijft de <div>wrapBlok niet "plakken" aan de header.......?
 
Laatst bewerkt door een moderator:
@ Aar

JsFiddle heb ik van gehoord, maar daar heb ik geen account.
Heb zo juist gekeken maar ik wil puur met html5 en css werken.
Hopelijk lukt het ook zonder JS.
 
JsFiddle is accountloos.
 
Kan je hiermee verder?

Het belangrijkste was de min-heigth, die heb ik overal weggehaald.
Ook heb ik overal overbodige css weggehaald.

*** de oorzaak van het probleem is height:200px bij .ttImgSlide
In de css oplossing van de slider moet een vaste hoogte worden opgegeven, echter in een responsive ontwerp is de hoogte van een afbeelding variabel. Dat is lastig.
 

Bijlagen

  • effe.zip
    1,9 KB · Weergaven: 27
Laatst bewerkt:
Een andere css slider/fader erin gezet die wel responsive is.
 

Bijlagen

  • effe2.zip
    2,1 KB · Weergaven: 22
[opgelost] Slider (foto fader) in CSS zonder JavaScript

@Bron,

Heel erg bedankt.......!!!!
Problem Soved....!
Deze oplossing had ik nooit zelf kunnen maken....!

De @keyframes-oplossing voor de slider is ook subliem.

Ad Mater en ik bedanken je....!
 
Laatst bewerkt door een moderator:
:thumb: Succes met je website.
 
Ik heb ook een site gevonden waar je oog eens moet laten opvallen geen wereldwonder maar one2try.be
Als je kijkt bootstrap en wat css3 html5 kan je een codeidee opdoen.
 
Als je kijkt bootstrap en wat css3 html5 kan je een codeidee opdoen
Klik om te vergroten...
Op die site staat de jQuery FlexSlider plugin (geen bootstrap slider)
 
Ik moet toegeven dat member bron juist is, ik heb iets te snel geplaatst helaas kan ik het bericht niet meer aanpassen .
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan