1
У меня есть 2 раздела: prodotto_section (верхняя часть) и каталог (нижняя часть). проблема в том, что некоторые элементы каталожного раздела перекрывают верхнюю секцию. используя элемент проверки Chrome Chrome, я вижу, что секция каталогов высока, как контейнер, в то время как prodotto_section высока 0. Как я могу ее решить?наложенная секция непреднамеренно
<body>
<div id="pop_background"></div>
<div id="pop_box">
<span id="close_button">�</span>
<h1>Hai qualche domanda?</h1>
<p>Vuoi avere maggiori informazioni sui nostri prodotti?<br> Ti bastera' compilare questo form e ti risponderemo il prima possibile </p>
<form name="send_message" action="http://bicicletteria.altervista.org/send_message.php" method="POST" onsubmit="return validateForm()">
<label for="name">Nome*: <input type="text" name="name" required=""></label>
<label for="email">Email*: <input type="text" name="email" required=""></label>
<label for="text" id="mex">Messaggio: <textarea rows="10" cols="21" name="message" required=""></textarea></label>
<label for="send"> <input type="submit" id="send" value="Invia messaggio"></label>
</form>
</div>
<header id="top">
<img id="logo" src="./Bicicletteria_files/logo.png" alt="Bicicletteria">
<nav id="topmenu">
<ul>
<li class="home"><a href="http://bicicletteria.altervista.org/index.php">HOME</a></li>
<li class="catalogo"><a href="http://bicicletteria.altervista.org/catalogo.php">CATALOGO</a></li>
<li class="chi_siamo"><a href="http://bicicletteria.altervista.org/chi_siamo.html">CHI SIAMO</a></li>
<li><a href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=6#" id="open">CONTATTACI</a></li>
<li><a href="http://bicicletteria.altervista.org/cart.php">CARRELLO</a></li>
</ul>
</nav>
<section id="ricerca">
<form name="ricerca" method="get" action="http://bicicletteria.altervista.org/catalogo.php">
<input type="search" class="srcbar" id="s" name="search" placeholder="Cerca sul sito">
<input type="submit" class="srcbar" id="buttonsearch" value="Cerca">
</form>
</section>
<section id="login">
<img src="./Bicicletteria_files/Icon-user.png" alt="login" width="15px" height="15px">
<a href="http://bicicletteria.altervista.org/login.php">LOGIN</a>
</section>
</header>
<div id="container">
<section id="prodotto_section">
<span id="up">
<span id="sinistra">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
</span>
<span id="centro">
<img id="main" src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
<p id="desc">Ideato per praticare ciclismo da corsa con frequenza regolare e con grande comfort.
Bici da corsa confortevole e stremamente efficace grazie alla forcella in carbonio e alle 27 velocit�!</p>
</span>
<span id="destra">
<p id="nome_prodotto">TRIBAN 520 FB</p>
<p id="marca">BTWIN</p>
<p id="prezzo">459.95�</p>
<form name="aggiungi" method="POST" action="http://bicicletteria.altervista.org/addProductDB.php">
<input type="hidden" name="ID_bici" value="6">
<select name="taglia" id="dimensione">
<option value="24" title="24''">24''</option>
<option value="26" title="26''">26''</option>
<option value="28" title="28''">28''</option>
</select>
<input type="number" id="qnt24" name="qnt24" value="1" min="0" class="qnt_number" style="visibility: visible;" max="15">
<input type="number" id="qnt26" name="qnt26" value="0" min="0" class="qnt_number" style="visibility: hidden;" max="15">
<input type="number" id="qnt28" name="qnt28" value="0" min="0" class="qnt_number" style="visibility: hidden;" max="7">
<button id="add">Aggiungi al carrello</button>
</form>
</span>
</span>
</section>
<section id="catalogo">
<label id="filtro" for="ordina">Ordina per:
<select>
<option value="--">--</option>
<option value="prezzo">prezzo</option>
<option value="novita">novita</option>
</select>
</label>
<header>
<h1>CATALOGO</h1>
</header>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=6" target="_top" style="text-decoration: none;">
<img class="lazy" src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="display: block; visibility: visible;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;"></a>
</span>
</span>
<section class="descrizione">
<p class="modello">TRIBAN 520 FB<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">459.95�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=5" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(1).jpg" style="display: block; visibility: visible;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
<img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">MACH 740 NERA<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">1500�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=4" target="_top" style="text-decoration: none;">
<img class="lazy" src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(1).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 3(2).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(1).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(1).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6.jpg" style="visibility: hidden;"></a>
</span>
</span>
<section class="descrizione">
<p class="modello">TRIBAN 540 FB<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">659.9�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=1" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(3).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(2).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 3(3).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(2).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(2).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6(1).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">ROCKRIDER 520<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">349.99�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=7" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(4).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(3).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 3(4).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(3).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(3).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 8(1).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">PIEGHEVOLE TILT 740 <br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">657.95�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=8" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(5).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(4).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 1(5).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(4).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(4).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6(2).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">ELETTRICA BEBIKE 700<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">999.99�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=9" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(6).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(5).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 3(5).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(5).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(5).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6(3).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">ELETTRICA BEBIKE 500<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">749.95�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=10" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(7).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(6).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 3(6).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(6).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(6).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6(4).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">CORSA ULTRA 700 AF<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">999.99�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=11" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(8).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 3(7).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(7).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(7).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 7(2).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 8(2).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">CORSA TRIBAN 540<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">799.99�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=12" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 2(7).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 3(8).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(8).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6(5).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 8(3).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 9(1).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">MTB ROCKRIDER 340 AZ<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">169.96�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=13" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(9).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(8).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 3(9).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 4(9).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(8).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6(6).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">ROCKRIDER 340 ARANCI<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">199.95�<br></p>
</section>
</article>
<article class="products">
<span class="miniatura">
<span id="min" class="pic">
<ul class="vid-rotater" style="visibility: visible;">
<li class="active"><span>0</span></li>
<li class=""><span>1</span></li>
<li class=""><span>2</span></li>
<li class=""><span>3</span></li>
<li class=""><span>4</span></li>
<li class=""><span>5</span></li>
</ul>
<a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=14" target="_top" style="text-decoration: none;">
<img class="lazy" src="./Bicicletteria_files/foto 1(10).jpg" style="display: block; visibility: visible;">
<img src="./Bicicletteria_files/foto 2(9).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 3(10).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 5(9).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 6(7).jpg" style="visibility: hidden;">
<img src="./Bicicletteria_files/foto 8(4).jpg" style="visibility: hidden;">
</a>
</span>
</span>
<section class="descrizione">
<p class="modello">ROCKRIDER 340 GIALLA<br><br></p>
<p class="marca">BTWIN<br><br></p>
<p class="prezzo">199.95�<br></p>
</section>
</article>
<a href="http://bicicletteria.altervista.org/catalogo.php?pag=2&&filter=" .="" class="next-prev"><center><img src="./Bicicletteria_files/next.jpg"></center></a>
</section>
</div>
<footer>
<dl>
<dt>Autori:</dt>
<dd></dd>
<dd></dd>
<br>
<dt> Sito web progettato a fini scolastici</dt>
</dl>
</footer>
</body></html>
CSS-слишком долго, чтобы вставить здесь, я прилагаю jsfiddle ссылку https://jsfiddle.net/omtwL3k7/
если вы пытаетесь расширить HTML-страницу, на которую h1 и тег выбора будет идти под оранжевую кнопку
[Как создать ** Минимальный **, Полный и проверенный пример] (http://stackoverflow.com/help/mcve) – j08691