Probleem footer valt niet in body

markvelde

veldesign
Hallo,

aan het puzzelen maar begrijp niet waarom footer niet wordt opgenomen in body.
Bijgevoegd de code.
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>kapsalon Veerle</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" type="text/css">
<style>
@import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed&display=swap');
</style>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid header">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <figure><a href="index.html"><img src="images/schaar.jpg" class="img-fluid" alt="logo"></a>
          <figcaption><a class="active" href="">kapsalon Veerle</a></figcaption>
        </figure>
      </div>
      <div class="col-lg-6">
        <ul class="nav nav-pills">
          <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
          <li class="nav-item"> <a class="nav-link" href="Dames.html">Dames</a> </li>
          <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Haarverzorging</a>
            <div class="dropdown-menu"> <a class="dropdown-item" href="verzorging.html">Verzorging</a> <a class="dropdown-item" href="#"></a> <a class="dropdown-item" href="arrangementen.html">Arrangementen</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"></a> </div>
          </li>
          <li class="nav-item"> <a class="nav-link" href="Heren.html">Heren</a> </li>
          <li class="nav-item"> <a class="nav-link" href="contactpagina.html">Contact</a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid foto"><img src="images/image_kapper.png" alt="kapper"></div>
<div class="container-fluid content">
  <div class="container">
    <div class="row">
      <div class="col-xl-6"><strong>&#039;Mooi haar&#039;</strong>&#044; dat spreekt voor zich. Met &#039;voor jou&#039; bedoelen we precies wat er staat&#044; in de puurste zin van het woord&#058; Uw haar is uniek&#044; net zoals u dat bent.
       
        Uw unieke coupe
       
        Uw bezoek aan onze salon staat elke keer weer opnieuw in het teken van uw gepersonaliseerde coupe. Wij nemen de tijd voor u. We vragen wat u wilt en maken uw haar mooi. Met oprechte aandacht voor uw wensen en perfecte verzorging van uw haar. Zodat u kunt ontspannen en genieten van uw haar&#044; dat goed valt en lang in model blijft.
       
        Kapsalon Veerle is specialist in haarkleuring. U kunt ook bij ons terecht voor persoonlijk&#044; professioneel advies bij haar en hoofdhuidproblemen.</div>
      <div class="col-xl-6">Ik vind het <b>een uitdaging</b> om nieuwe trends toe te passen en creatieve looks te bedenken. Iedereen is bij mij welkom en samen gaan we op zoek naar een model dat het beste bij je past. Ik luister goed naar je wensen en geef dan mijn advies. Geen kapsel of haarkleur is mij te gek&#044; mits het verantwoord toegepast kan worden. Maar&hellip; wil je alleen de puntjes laten bijwerken of je pony bij laten knippen&#044; dan kan dat natuurlijk ook&#033; Mijn ervaring heb ik opgedaan bij diverse kapsalons. Niet alleen als kapper&#044; maar ook als opleider. Ik volg regelmatig trainingen over de laatste trends in het vak.</div>
    </div>
  </div>
</div>
<div class="container-fluid media">
  <div class="container">
    <div class="row">
      <div class="col-xl-2">
        <video width="150" height="150" controls>
          <source src="video/John_frieda.mp4" type="video/mp4">
        </video>
      </div>
      <div class="col-xl-2"><img src="images/john_frieda.png"   alt="john_frieda_logo"/></div>
      <div class="col-xl-2">
        <video width="150" height="150" controls>
          <source src="video/kapsalon.mp4" type="video/mp4">
        </video>
      </div>
      <div class="col-xl-2"><img src="images/verkiezing.jpg"  alt="kapsalon"/></div>
      <div class="col-xl-2">
        <video width="150" height="150" controls>
          <source src="video/opleiding.mp4" type="video/mp4">
        </video>
      </div>
      <div class="col-xl-2"><img src="images/opleiding.jpg"    alt="opleiding"/></div>
    </div>
  </div>
</div>
<div class="container-fluid image">
  <div class="container"> </div>

<div class="container-fluid footer">
  <table>
    <tr>
      <th>Gegevens</th>
      <th>Adres</th>
      <th>contact</th>
    </tr>
    <tr>
      <td>Veerle van de Velde</td>
      <td>Kapsalon Veerle</td>
      <td><a href="export.pdf" target="_blank">Disclaimer</a></td>
    </tr>
    <tr>
      <td>Mgr.luijpenstraat 16</td>
      <td>Mgr.luijpenstraat 16</td>
      <td><a href="index.html">Over ons</a></td>
    </tr>
    <tr>
      <td>4513 AE</td>
      <td>4513AE</td>
      <td><a href="contactpagina.html">contact</a></td>
    </tr>
    <tr>
      <td>Hoofdplaat</td>
      <td>06-12345678</td>
      <td></td>
    </tr>
  </table>
</div>
<!-- body code goes here -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>
</html>
 

maulem

Gevestigd lid
Je hebt de div <div class="container-fluid image"> niet afgesloten. Verder heb je de div <div class="container"> niet opgenomen binnen de div <div class="container-fluid footer">.

Ik heb het in Visual Studio geopend en voor je gecorrigeerd. (zie afbeelding)

gecorrigeerde footer.jpg
 

markvelde

veldesign
Bedankt voor de feedback (kan loi nog puntje aan zuigen)
zou u a.u.b mijn site willen bekijken en enventueel een feedback teruggeven?
www.schoonheidssalonlabeauty.nl/test

Zal de html en css code bijvoegen.
CSS:
@charset "utf-8";
.header {
    padding-top: 100px;
    padding-bottom: 25px;
    width: 100%;
}
.foto {
    background-color: #FFFFFF;
    padding-bottom: 50px;
    padding-top: 50px;
    width: 75%;
    height: auto;
    text-align: center;
}
.content {
    padding-top: 25px;
    padding-bottom: 25px;
    border-color: #000000;
    width: 100%;
}
.container .row .col-xl-2 {
    width: 16.5%;
    height: 225px;
    margin-top: 100px;
}
.row .col-xl-2 video {
    width: 100%;
    height: auto;
}

.container-fluid.media .container .row {
    width: 100%;
    margin-top: 0px;
}

.container-fluid.image {
    width: 100%;
    margin-top: 100px;
}
.container .row .col-md-4 {
    width: 100%;
}


.container-fluid.header .container {
    width: 100%;
}
.container-fluid.image .container {
    margin-top: 200px;
    -webkit-align-content: center;
    align-content: center;
}
.container-fluid.footer .row .col-xl-4 {
    border-left-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-top-color: #FFFFFF;
    color: #FFFFFF;
    text-align: center;
    border-width: 1px;
    width: 100%;
}
.row .col-xl-2 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    padding-top: 50px;
}
.footer {
    position: absolute;
    font-family: 'Saira Extra Condensed', sans-serif;
    width: 100%;
}
.row .col-lg-6 .img-fluid {
    width: auto;
    height: 180px;
    padding-top: 0px;
    border-color: #000000;
}
img {
    width: 100%;
    padding-bottom: 25px;
}

.container .row .col-xl-6 {
    border: 1px double #000000;
    font-family: 'Saira Extra Condensed', sans-serif;
    font-size: 1em;
    text-align: left;
    padding-right: 0px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    width: 100%;
    
}
.container-fluid.media {
    width: 100%;
    padding-bottom: 50px;
    margin-top: 100px;
}


.col-lg-6 figure figcaption {
    font-family: 'Indie Flower', cursive;
    font-size: 2em;
    text-shadow: 0px 0px 5px;
}
.container-fluid.foto {
    width: 100%;
    height: auto;
}
.container-fluid.content {
    width: 100%;
}

body {
    width: 100%;
}
.container-fluid.footer {
    margin-top: 100px;
    margin-bottom: 100px;
    background-image: url(url);
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    width: 100%;
}
.row .col-xl-4 .col-xl-6 {
    display: block;
    margin-left: 25%;
    font-family: 'Saira Extra Condensed', sans-serif;
    background-color: #E60B0F;
    font-style: italic;
}

table, td, th {
    text-align: left;
    font-family: 'Saira Extra Condensed', sans-serif;
    height: 25px;
}
table {
    border-collapse: collapse;
    width: 100%;
    margin-left: 12%;
    margin-right: 12%;
}

tr td a {
    color: #FFFFFF;
    font-family: 'Saira Extra Condensed', sans-serif;
    width: 100%;
}
.row .col-xl-4 .tekst_frame {
    width: 200px;
}
HTML:
<body>
<div class="container-fluid header">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <figure><a href="index.html"><img src="images/schaar.jpg" class="img-fluid" alt="logo"></a>
          <figcaption><a class="active" href="">kapsalon Veerle</a></figcaption>
        </figure>
      </div>
      <div class="col-lg-6">
        <ul class="nav nav-pills">
          <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
          <li class="nav-item"> <a class="nav-link" href="Dames.html">Dames</a> </li>
          <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Haarverzorging</a>
            <div class="dropdown-menu"> <a class="dropdown-item" href="verzorging.html">Verzorging</a> <a class="dropdown-item" href="#"></a> <a class="dropdown-item" href="arrangementen.html">Arrangementen</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"></a> </div>
          </li>
          <li class="nav-item"> <a class="nav-link" href="Heren.html">Heren</a> </li>
          <li class="nav-item"> <a class="nav-link" href="contactpagina.html">Contact</a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid foto"><img src="images/image_kapper.png" alt="kapper"></div>
<div class="container-fluid content">
  <div class="container">
    <div class="row">
      <div class="col-xl-6"><strong>&#039;Mooi haar&#039;</strong>&#044; dat spreekt voor zich. Met &#039;voor jou&#039; bedoelen we precies wat er staat&#044; in de puurste zin van het woord&#058; Uw haar is uniek&#044; net zoals u dat bent.
        
        Uw unieke coupe
        
        Uw bezoek aan onze salon staat elke keer weer opnieuw in het teken van uw gepersonaliseerde coupe. Wij nemen de tijd voor u. We vragen wat u wilt en maken uw haar mooi. Met oprechte aandacht voor uw wensen en perfecte verzorging van uw haar. Zodat u kunt ontspannen en genieten van uw haar&#044; dat goed valt en lang in model blijft.
        
        Kapsalon Veerle is specialist in haarkleuring. U kunt ook bij ons terecht voor persoonlijk&#044; professioneel advies bij haar en hoofdhuidproblemen.</div>
      
      <div class="col-xl-6">Ik vind het <b>een uitdaging</b> om nieuwe trends toe te passen en creatieve looks te bedenken. Iedereen is bij mij welkom en samen gaan we op zoek naar een model dat het beste bij je past. Ik luister goed naar je wensen en geef dan mijn advies. Geen kapsel of haarkleur is mij te gek&#044; mits het verantwoord toegepast kan worden. Maar&hellip; wil je alleen de puntjes laten bijwerken of je pony bij laten knippen&#044; dan kan dat natuurlijk ook&#033; Mijn ervaring heb ik opgedaan bij diverse kapsalons. Niet alleen als kapper&#044; maar ook als opleider. Ik volg regelmatig trainingen over de laatste trends in het vak.</div>
    </div>
  </div>
</div>
<div class="container-fluid image">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
      </div>
      <div class="col-md-4">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
      </div>
      <div class="col-md-4">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid footer">
  <div class="container">
    <table>
      <tr>
        <th>Gegevens</th>
        <th>Adres</th>
        <th>contact</th>
      </tr>
      <tr>
        <td>Veerle van de Velde</td>
        <td>Kapsalon Veerle</td>
        <td><a href="export.pdf" target="_blank">Disclaimer</a></td>
      </tr>
      <tr>
        <td>Mgr.luijpenstraat 16</td>
        <td>Mgr.luijpenstraat 16</td>
        <td><a href="index.html">Over ons</a></td>
      </tr>
      <tr>
        <td>4513 AE</td>
        <td>4513AE</td>
        <td><a href="contactpagina.html">contact</a></td>
      </tr>
      <tr>
        <td>Hoofdplaat</td>
        <td>06-12345678</td>
        <td></td>
      </tr>
    </table>
  </div>
</div>

<!-- body code goes here -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</body>
 

maulem

Gevestigd lid
Dag Mark. Geweldig ! Ik had niet gedacht dat bootstrap zo'n mooi resultaat zou geven ! Complimenten.. Wel nog een opmerking over de foto op de pagina Heren.html. Op mobiele breedte is de foto van het mannelijke kappersmodel veel te smal, om deze in verhouding te laten zou ik de width en height weglaten en deze door bootstrap zelf laten bepalen: dus

<div class="container-fluid foto"><img src="images/heren_model.jpg" width="950" height="430" alt="image_heren"></div>

wordt

<div class="container-fluid foto"><img src="images/heren_model.jpg" alt="image_heren"></div>

Verder is het zo dat de audioplayertjes niet meer getoond worden vanaf 530px en lager. Het zou beter zijn als de 3 media-items op kleinere pagina-breedten onder elkaar getoond werden. Misschien col-sm-2 vervangen door col-xs-12 col-sm-2, dat betekent: elk item neemt op zeer smalle breedten (xs) alle 12 kolommen van de grid in beslag, en op minder smalle breedten en breder (sm) neemt elk item slechts 2 kolommen van de grid in beslag.
 

markvelde

veldesign
Beste, bedankt voor het compliment en de feedback.
Heb u raad opgevolgd maar de image wilt niet meewerken.
De code verandert van de audioplayers maar de image lukt mij niet om deze mooi weer te geven voor mobiel. Misschien nog een tip?
 

maulem

Gevestigd lid
In principe moet het lukken als aan het kappersmodel image geen dimensies worden toegekend. Voor de 3 audioplayers met bijbehorende images moet col-sm-2 voldoende zijn voor een behoorlijke responsieve weergave. Ik heb het uitgeprobeerd met onderstaande code en het werkt zoals het hoort.

HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>dames</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed&display=swap');
</style>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid foto"><img src="images/heren_model.jpg" alt="image_heren"></div>
<div class="container-fluid media">
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <video width="150" height="150" controls>
          <source src="video/John_frieda.mp4" type="video/mp4">
        </video>
      </div>
      <div class="col-sm-2"><img src="images/john_frieda.png"   alt="john_frieda_logo"/></div>
      <div class="col-sm-2">
        <video width="150" height="150" controls>
          <source src="video/kapsalon.mp4" type="video/mp4">
        </video>
      </div>
      <div class="col-sm-2"><img src="images/verkiezing.jpg"  alt="kapsalon"/></div>
      <div class="col-sm-2">
        <video width="150" height="150" controls>
          <source src="video/opleiding.mp4" type="video/mp4">
        </video>
      </div>
      <div class="col-sm-2"><img src="images/opleiding.jpg"    alt="opleiding"/></div>
    </div>
  </div>
</div>
</body>
</html>
 

markvelde

veldesign
Ben er uit betreft de kappers_ image.

Dit is de html van de container-fluid-foto:
<div class="container-fluid foto"><img src="images/heren_model.jpg" alt="image_heren"></div>

Dit is de html van de kappers_image:
<div class="col-sm-2"><img src="images/verkiezing.jpg" alt="kapsalon"/></div>

Omdat in de css aan de img src een width wordt gegeven van 100%, schaalt deze met de pagina mee.
Alleen het rare is, in de kleinste versie schaalt de kappers_image niet mee en wordt de foto van de <div class="container-fluid foto"> wel goed weergegeven. Insturen die handel en zien wat mijn MENTOR weer te vertellen heeft, een hint of uitleg zou wel eens goed zijn van hun kant.

P.s de link naar de pagina zijn niet meer de orginele maar daar wordt de komende dagen weer aan gewerkt.

Groeten, Mark
 

predator

Gewaardeerd
Hoi Mark ben eens gaan kijken en ik krijg wel een hele vage home pagina te zien vanuit de link, klopt deze ?Schermafbeelding 2019-11-08 om 10.09.59.png
 

predator

Gewaardeerd
Ok dus dat hoort zo, sorry maar ik vind het er niet uitzien, als dat een voorbode is voor wat of er met je haar gaat gebeuren >>> Mmmmm >>> door klikken naar een andere kapper site, sorry mark ;) .
Gr.
Pred..
 

markvelde

veldesign
Hallo, het is maar een voorbeeldsite, deze zal nooit online komen. Het gaat er om dat alle code's zowel html als css werken naar behoren. Ik zal er een andere op plaatsen,🙂
 

predator

Gewaardeerd
Ha op die manier dacht al ziet er niet echt mooi uit zo.
Gr.
Pred..
 

predator

Gewaardeerd
Klopt idd Mark.
Gr.
Pred..
 
Bovenaan Onderaan