В настоящее время я разрабатываю страницу для друга, и цель состоит в том, чтобы сардины могли работать как своего рода меню для отображения некоторых деталей.
До появления вкладок все работало нормально, как показано на рисунке:
после использования вкладок я потерял свой первоначальный макет ... кто-нибудь знает, как это решить? Я уверен, что моя проблема в моем CSS.
Используемый код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mar de Sardinhas</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i" rel="stylesheet">
<!-- scripts de visivel / invisivel
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
css para styling -->
<style type="text/css">
.off {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.on {
}
.position{
position: relative;
bottom: -30%;
transition: 0.3s;
}
.position:hover {
position: relative;
bottom: 0%;
transition: 0.3s;
}
.imgsize{
max-width: 10vw;
}
.wide-as-needed {
position: fixed;
bottom: 0;
left: 0;
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap; width:100%;
}
.fundo{
background:rgba(255,255,255,0.5);
}
.texto {
font-family: 'Open Sans', sans-serif;
}
.preview{
max-width:100%;
max-height:100%;
}
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0)
),
/* bottom, image */
url(bg.jpeg);
}
.lata {
position: relative;
text-align: center;
color: white;
}
.hide {
display:none;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body background="bg.jpeg" class="tinted-image" style="background-attachment: fixed;">
<div class= "row tabcontent" id="London">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens</h2>
<p>
A arte de conservar alimentos foi sempre uma constante na história da humanidade. Os métodos mais ancestrais como a defumação e a salga permitiram o consumo de peixe em larga escala e o seu transporte para zonas distantes do litoral. Até o século XVII, parte do pescado conservado tinha por objectivo o fornecimento de navios envolvidos na expansão Ultramarina.
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
<a href="#" class="btn btn-info mt-2 texto" role="button" aria-pressed="true">Ver Filme / Watch Movie</a>
</div>
</div>
</div>
<div class= "row tabcontent" id="Paris">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens 2</h2>
<p>
testeeee
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
<a href="#" class="btn btn-info mt-2 texto" role="button" aria-pressed="true">Ver Filme / Watch Movie</a>
</div>
</div>
</div>
<!-- barra de baixo-->
<div class="container-fluid fixed-bottom">
<div class="row flex-row flex-nowrap ml-1 mr-2 wide-as-needed">
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'London')">
<img src="1.png" class="on position imgsize">
</a>
</div>
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'Paris')">
<img src="2.png" class="off position imgsize">
</a>
</div>
<div>
<img src="3.png" class="off position imgsize">
</div>
<div>
<img src="4.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="off position imgsize" >
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
</div>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Страница может быть найдена здесь: рабочая страница
Заранее спасибо!