klok horizontaal

Status
Niet open voor verdere reacties.
S

speng002

Gebruiker
Lid geworden
10 apr 2020
Berichten
25
Hoi mag ik gebruik maken van jullie kennis
ik heb een aantal klokjes op internet gevonden die wil ik graag gebruiken op mijn html pagina
ik probeer ze horizontaal naast elkaar te krijgen
een left en een center en een right maar dit wil niet echt lukken
kunnen jullie mij hier mee helpen.
alvast bedankt

Mijn code

Code: 
<!DOCTYPE html>
<html>
<head>
<title>Mijn Eigen klok</title>
</head>
<body>
<h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/2759821"><span>Time in Amersfoort,Nederland</span></a></h4> 
<iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FAmsterdam" width="20%" height="100"  frameborder="1" seamless></iframe>

<h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/2521570"><span>Time in Arrecife,Spain</span></a></h4>
<iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Atlantic%2FCanary" width="20%" height="100"  frameborder="1" seamless></iframe>

<h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/5128581"><span>New York City, United States</span></a></h4>
<iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="20%" height="100" frameborder="1" seamless></iframe>
</body>
</html>
 
Heb je de iframes al in een eigen div-container geplaatst?
 
Voorbeeld om alles goed weer te geven.
Hieronder html bestand:
Code: 
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mijn Eigen klok</title>
<!-- hieronder voor cross browser en voor grid layout -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap-grid.min.css">
<!-- hieronder style.css voor jouw eigen vormgeving -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row klok">

<div class="col-12 col-md-4">
  <h4><a href="https://www.zeitverschiebung.net/en/city/2759821"><span>Amersfoort, Nederland</span></a></h4>
  <div class="embed embed-ratio">
     <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FAmsterdam" width="20%" height="100"></iframe>
  </div>
</div>

<div class="col-12 col-md-4">
  <h4><a href="https://www.zeitverschiebung.net/en/city/2521570"><span>Arrecife, Spain</span></a></h4>
  <div class="embed embed-ratio">
    <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Atlantic%2FCanary" width="20%" height="100"></iframe>
  </div>
</div>

<div class="col-12 col-md-4">
  <h4><a href="https://www.zeitverschiebung.net/en/city/5128581"><span>New York City, USA</span></a></h4>
  <div class="embed embed-ratio">
    <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="20%" height="100"></iframe>
  </div>
</div>

</div> <!-- einde row -->
</div> <!-- einde container -->
</body>
</html>

Hieronder het bestand met bestandsnaam: style.css
Hierin zet je al jouw vormgeving (dit hoort niet in het html bestand)
Code: 
.klok a {
  text-decoration: none;
}
.klok h4 {
  margin-top: 15px;
  text-align: center;
}
.embed {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #333;
}
.embed iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/*
  hieronder voor smartphone, tablet, laptop/desktop. Het % is verhouding B:H
*/
.embed-ratio {
  padding-bottom: 26%;
}
@media (min-width: 420px) {
  .embed-ratio { padding-bottom: 23%; }
}
@media (min-width: 576px) {
  .embed-ratio { padding-bottom: 18%; }
}
@media (min-width: 768px) {
  .embed-ratio { padding-bottom: 40%; }
}
@media (min-width: 992px) {
  .embed-ratio { padding-bottom: 30%; }
}
@media (min-width: 1200px) {
  .embed-ratio { padding-bottom: 26%; }
}

Als je wilt weten hoe de grid (col-12 col-md-4) werkt klik dan hier en bekijk de voorbeelden.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan