中心<div>问题HTML

时间:2017-02-02 14:52:06

标签: html css width margin

我有问题。我正在尝试制作简单的基于HTML的网站。我想制作图像和白色字段&#34; full&#34;屏幕(宽度100%),但它在某种程度上限制了两侧的边缘。我是一个新鲜的webguy所以可能解决方案很简单,但到目前为止我找不到它。

&#13;
&#13;
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>ARSPOLSKA</title>
<link rel="stylesheet" href="css/styl.css" type="text/css">
</head>
<body>
 
 
<!-- ========= HEADER ========= -->

<div class="belka-menu">
	<div class="limiter">
	<div id="logo"></div>
	<p>TECHNICZNE ZAOPATRZENIE PRZEMYSŁU</p>
		<nav class="nawigacja">
	<ul>
        <li><a href="regulamin.php">REGULAMIN</a></li>
        <li><a href="#">KATALOG PRODUKTÓW</a></li>
        <li><a href="promocje.php">PROMOCJE</a></li>
        <li><a href="http://www.adamscrew.cba.pl/wordpress">STRONA GŁÓWNA</a></li>
    </ul>
		</nav>
	</div>
</div>

<!-- ====== HEADER ====== -->



<!-- ====== SLIDER ====== -->
<div class="slider-imitation"></div>
<!-- ====== SLIDER ====== -->



<!-- ====== ZAWARTOSC ====== -->
		<div class="container-item">

			<div id="item">
				<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img1.jpg"/></div>
				<div class="text">
					Jesteśmy firmą handlową zajmującą się obsługą i zaopatrzeniem oraz wsparciem technicznym dla
					 działów utrzymania ruchu zakładów i firm. 
				</div>
			</div>
		
		
			<div id="item">
				<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img4.jpg"/></div>
				<div class="text">
					Posiadamy zaplecze umożliwiające wykonanie prac związanych z obróbką, skrawaniem,
					 pracami związanymi ze spawaniem oraz szeroko pojętymi usługami.
				</div>
			</div>
	
	
			<div id="item">
				<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img3.jpg"/></div>
				<div class="text">
					Współpracujemy z największymi dystrybutorami dzięki  temu otrzymują Państwo produkty najwyższej jakości w 100% oryginalne.
				</div>
			</div>
		
		
			<div id="item">
				<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img2.jpg"/></div>
				<div class="text">
					Jesteśmy w stanie dostosować się do potrzeb każdego przedsiębiorstwa.
				</div>
			</div>
		</div>	
<!-- ====== ZAWARTOSC ====== -->
 
 
<!-- ====== STOPKA ====== -->
    <footer class="stopka">
		<div class="limiter">	
			<div class="stopka-logo"></div>
			<div class="stopka-info">
				<h1>ARSPOLSKA Jóźkowicz i wspólnicy Sp. J.</h1>
				<p>ul. Przemysłowa 14B</p>
				<p>59-300 Lubin</p>
				<p>NIP 692-250-43-38</p>
			</div>

			<div class="stopka-info">
				<h1>KONTAKT</h1>
				<p>tel: 515 012 162</p>
				<p><b><a href="mailto:kontakt@arspolska.com" target="_top">kontakt@arspolska.com</a></b></p>

			</div>
			<div class="podstopka">Copyright © 2017 ARSPOLSKA Wszystkie prawa zastrzeżone.</div>
		</div>
    </footer>
<!-- ====== STOPKA ====== -->

</body>
</html>
&#13;
&#13;
&#13;

&#13;
&#13;
/* ====== GLOBALNE ====== */

@font-face {
  font-family: "Open Sans";
  src: url('../OpenSans.ttf'), url('../OpenSans.eot');
  /* IE */
}
body {
  font-family: "Open Sans", Times, serif;
  background-color: #f1f1f1;
}
h1 {
  margin-top: 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333;
}
#logo {
  background-image: url("../img/logo.png");
  background-size: 90px;
  height: 87px;
  width: 133px;
  z-index: 999999;
  float: left;
  background-repeat: no-repeat;
  margin-top: 1px;
}
.limiter {
  width: 1200px;
  margin: auto;
}
.slider-imitation {
  height: 586px;
  width: 100%;
  background-image: url(../img/1.png);
  background-attachment: fixed;
  background-position: center;
}
/* ====== MENU ====== */

.belka-menu p {
  font-family: "Open Sans";
  font-size: 15px;
  color: #979797;
  padding-top: 25px;
  padding-left: 120px;
  position: absolute;
}
.belka-menu {
  position: fixed;
  display: block;
  width: 100%;
  z-index: 99;
  border-top: 5px solid #f05928;
  background-color: #ffffff;
  height: 90px;
  right: 0;
  top: 0;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
/* ====== NAWIGACJA ====== */

.nawigacja li {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  background-color: #fff;
  text-align: center;
  padding-top: 25px;
  float: right;
}
.nawigacja li a {
  color: #979797;
  font-size: 16px;
  font-family: "Open Sans";
}
.nawigacja li a:hover {
  color: #f05928;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: color 0.5s;
  text-decoration: none;
  font-weight: bold;
}
/* ====== STOPKA ====== */

.stopka {
  padding: 40px 0;
  color: #999;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  margin-top: 40px;
  clear: both;
  text-align: left;
  height: 200px;
}
.stopka-info {
  display: block;
  height: 100%;
  margin: auto 20px;
  max-width: 300px;
  float: left;
  line-height: 13px;
}
.stopka-logo {
  background-image: url('../img/logo.png');
  display: block;
  height: 140px;
  width: 140px;
  max-height: 140px;
  max-height: 140px;
  float: left;
  margin-right: 20px;
  background-repeat: no-repeat;
}
.podstopka {
  display: block;
  background-color: #f05928;
  height: 30px;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  margin: auto;
  clear: both;
  color: #fff;
}
/*====== CONTAINER ======*/

.container-home {
  width: 100%;
  height: 200px;
  background-color: #ffffff;
  clear: both;
}
.container-item {
  text-align: center;
  height: 400px;
  width: 100%;
  display: block;
  background-color: #ffff;
  clear: both;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
}
#item {
  border: 1px solid #e5e5e5;
  background-color: #fff;
  display: inline-block;
  width: 250px;
  height: 300px;
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
  vertical-align: top;
}
h1 {
  font-weight: bold;
  color: #8e8e8e;
  font-size: 14px;
}
#item:hover {
  border: 2px solid #f05928;
  -webkit-transition: -webkit-transform 4s;
  /* Safari */
  transition: transform 4s;
}
.text {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
}
.foto img {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 220px;
}
.box {
  height: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-top: 50px;
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您可能需要设置身体边距。默认情况下,您的浏览器有一些边距(Chrome上为8px),因此内容不会显示在滚动条后面。

body {
  font-family: "Open Sans", Times, serif;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
  border: 0;
}