1
В настоящее время я работаю над сайтом для моего друга, который управляет небольшим отелем в Венгрии. Here it is.Цвет контейнера CSS-разделителя при увеличении или уменьшении разрешения
До сих пор я доволен результатом. Моя проблема, однако, заключается в том, что при просмотре на моем ноутбуке с разрешением 1440x900 или увеличении на моем настольном ПК фон контейнера «ящик» обрезается и не распространяется на нижнюю часть страницы.
Я искал всевозможные ценности, но для жизни меня не могу найти ошибку, которую я совершил. Возможно, кто-то сразу это обнаружит.
Вот HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.kaiserapartman.hu</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body class="pagebody"><img class="bg" src="img/bg.jpg"/>
<div id="main">
<div id="header">
<div id="flags"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><a href="index.html"><img src="img/hu.jpg" width="28" height="18" alt=""/></a></td>
<td><a href="german.html"><img src="img/de.jpg" width="28" height="18" alt=""/></a></td>
<td><a href="english.html"><img src="img/uk.jpg" width="28" height="18" alt=""/></a></td>
<td><a href="russian.html"><img src="img/ru.jpg" width="28" height="18" alt=""/></a></td>
</tr>
</table>
</div>
<div id="content">
<div id="buttons"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><a href="szolgal.html"><img src="img/taxi.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="mailto:info@kaiserapartman.hu"><img src="img/email.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="https://www.facebook.com/kaiser.apartman?fref=ts" target="_blank"><img src="img/facebook.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="callto://YourUserName"><img src="img/skype.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="kapcsolat.html"><img src="img/maps.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="http://www.booking.com/hotel/hu/katser-apartman.de.html?sid=eff0e3583ef20caaee9af6506a40d7c4;dcid=4;ucfs=1;srfid=42991a3738960b3b84e19e97955bcc7a4f30f15dX1;highlight_room=" target="_blank"><img src="img/booking.png" width="90" height="90" alt=""/></a></td>
</tr>
</table>
</div>
<div id="logo"></div>
<div id="menu">
<div id="navbar" style="width:644px; float:left; clear:both;">
<li><a href="index.html" style="text-decoration:none; color:#4F1700;">Kezdőlap</a></li>
<li><a href="galeria.html" style="text-decoration:none; color:#4F1700;">Galéria</a></li>
<li><a href="arak.html" style="text-decoration:none; color:#4F1700;">Árak</a></li>
<li><a href="szolgal.html" style="text-decoration:none; color:#4F1700;">Szolgáltatások</a></li>
<li><a href="kapcsolat.html" style="text-decoration:none; color:#4F1700;">Elérhetöség</a></li></div>
</div>
<div id="box">
<div id="images"><table border="0">
<tr>
<td><img src="img/00001.jpg" width="340" height="225" alt=""/></td>
</tr>
<tr>
<td><img src="img/00002.jpg" width="340" height="225" alt=""/></td>
</tr>
</table></div>
<div id="text"><table border="0">
<tr>
<td><h1>Üdvözöljük a hévízi Kaiser Apartman weboldalán!</h1>
<h2>Apartmanházunk csendes fekvésű helyen, Hévíz főutcájában, a hévízi termáltótól 200 méterre található.<p>Önellátó apartmanokat kínálunk, ingyenes Wi-Fi internettel és kábeltévével, valamint privát parkolási lehetőséggel.<p>A közelben reggelizők, éttermek, kávézók, üzletek találhatók.<p>Házunktól a buszmegálló 200 méterre, Keszthely (Balaton) 7 km-re, a Hévíz-Balaton Airport repülőtér 15 km-re helyezkedik el.<p>Taxi transzfer szolgáltatást biztosítunk távolabbról érkező vendégeink részére.
Kérjen árajánlatot!</h2>
</td>
</tr>
</table>
</div>
<div id="header"></div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>И here's КСС:
@charset "utf-8";
/* CSS Document */
.pagebody {
\t margin:0px;
}
.bg {
\t width:100%;
\t height:100%;
\t position:fixed;
\t top:0;
\t left:0;
}
#main {
\t width:100%;
\t min-height:100vh;
\t position:absolute;
\t font:Verdana, sans-serif;
\t font-size:24px;
\t font-weight:bold;
\t z-index:1;
}
#header {
\t width:100%;
\t height:70px;
\t position:absolute;
\t background-image:url(img/header.jpg);
\t z-index:3;
}
#flags {
\t position:absolute;
\t z-index:3;
\t padding:0px;
}
#footer {
\t width:100%;
\t height:19px;
\t background-image:url(img/footer.jpg);
\t position:fixed;
\t z-index:6;
\t bottom:0px;
}
#content {
\t width:1100px;
\t min-height:100vh;
\t z-index:2;
\t position:relative;
\t left:50%;
\t margin-left:-500px;
}
#buttons {
\t width:100px;
\t height:500px;
\t left:1000px;
\t top:70px;
\t position:absolute;
\t z-index:5;
}
#box {
\t width:1000px;
\t min-height:100vh;
\t height:auto;
\t z-index:1;
\t position:absolute;
\t background:url(img/content.png);
}
#images {
\t top:275px;
\t position:absolute;
\t z-index:3;
\t left:10px;
\t padding-top:5px;
\t width:356px;
\t height:255px;
}
#text {
\t top:70px;
\t left:370px;
\t position:absolute;
\t z-index:3;
\t font-size:19px;
\t font:verdana;
\t font-weight:bold;
\t color:#4F1700;
\t width:620px;
}
#logo {
\t width:356px;
\t height:250px;
\t position:absolute;
\t z-index:4;
\t background-image:url(img/logo.png);
}
#menu {
\t width:644px;
\t height:70px;
\t background-color:gree;
\t position:absolute;
\t z-index:4;
\t left:356px;
}
#navbar {
\t width:644px;
\t height:70px;
\t font-size:16px;
\t font-family:Verdana, Geneva, sans-serif;
\t font-weight:bold;
\t z-index:5;
\t position:absolute;
\t line-height:70px;
\t color:#FFF;
}
#navbar li {
\t padding-left:21px;
\t padding-right:20px;
\t margin:0;
\t list-style:none;
\t float:left;
\t position:relative;
\t width:auto;
\t display:block;
\t text-align:center;
\t vertical-align:middle;
\t color:#4F1700;
\t text-decoration:none;
\t z-index:5;
}
#navbar li:hover {
\t background:url(img/hover.jpg);
\t z-index:5;
\t font-style:italic;
\t color:#4F1700;
}
Я буду кланяться перед тобой! Большое вам спасибо, вот и все. – chefdiese
@chefdiese Я знаю, как вы, должно быть, чувствовали ... У меня была эта проблема, и это действительно беспокоило меня ... рад, что я мог бы помочь .. не забудьте проголосовать :) :) –