Home > Back-end >  How to get elements into the page?
How to get elements into the page?

Time：04-03

I have this HTML code and the result is that my whole page is center aligned. This causes my background color in the top navigator to be centered and my footer to be centered too. But both in the initial box and in the footer and in the header there is the scrollbar and it does not put these elements on the whole page. Can anyone help me to solve this problem?

body, html {
    height: 100%;
    width: 100%;
}

html,
body {
  margin: auto;
  padding: 0%;
}


.section {
  width: 100%;
}

.container.slidercontent {
background: #D4988E;
}

.container {
  position: relative;
  width: 1170px;
  margin: auto;
  color: #444;
  font-size: 14px;
  font-weight: 300;
  font-family: Roboto;
  overflow: hidden;
}

.section .container {
  padding: 50px 0 50px 0;
}

.section.bg {
  background: #f7f7f7;
}
/*
  Header
*/

.hold {
  height: 80px;
}

.header {
  line-height: 80px;
  width: 100%;
  transition: line-height 0.2s linear, box-shadow 0.2s linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(245, 245, 245, 0.97);
}

.header.small {
  line-height: 50px;
  box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.8);
}

.header.small > .container > #logo {
  height: 40px;
}

#logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: red;
  float: left;
  height: 40px;
  width: 170px;
  margin-left: 5px;
}

/*
  Slider
*/

.section .slider,
.section .footer {
  background: #333;
}

.slidercontent {
  text-align: center;
}

.hero {
  font-family: 'roboto';
  color: white;
  font-weight: normal;
  letter-spacing: 1px;
}

h1.hero {
  font-size: 54px;
}

h2.hero {
  font-size: 20px;
  margin-bottom: 60px;
  font-family: 'arial'
}

h1.hero:after {
  content: "";
  width: 300px;
  position: relative;
  border-bottom: 1px solid #aaa;
  text-align: center;
  margin: auto;
  margin-top: 15px;
}

.call {
  color: white;
  display: block;
  margin-bottom: 20px;
}

.call span {
  display: inline;
  border: 1px solid white;
  padding: 8px 13px;
  font-size: 20px;
  transition: background 0.15s linear;
}

.call span:hover {
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
/* 
  Columns 
*/

.col {
  float: left;
  padding: 0;
  margin: 0;
  position: relative;
}

.col.four {
  width: 23%;
  margin: 0 1%;
}

.col.three {
  width: 31.3%;
  margin: 0 1%;
}

.col.two {
  width: 40%;
  margin: 0 2.5%;
  padding: 0 2.5%;
}

.col.extrapad {
  padding-top: 20px;
  padding-bottom: 20px;
}

.col .service,
.col .feature {
  font-size: 21px;
  font-weight: 300;
  font-family: 'Roboto Slab', sans-serif;
}

.col .service:after {
  content: "";
  width: 50px;
  position: relative;
  border-bottom: 1px solid #eee;
  display: block;
  text-align: center;
  margin: auto;
  margin-top: 15px;
}

.col .feature {
  font-size: 19px;
}

.col h1.side,
.col p.side,
.col span.side:first-of-type {
  margin-left: 50px;
  text-align: left;
}

.col .icon {
  border-radius: 50%;
  height: 85px;
  width: 85px;
  line-height: 85px;
  text-align: center;
  margin: 0 auto;
  transition: background 0.25s linear, color 0.25s linear;
}

.col .icon.side {
  position: absolute;
  padding: 0;
  margin: 0;
  top: -15px;
  height: 50px;
  width: 50px;
}

.col:hover > .icon {
  background: #F44336;
  color: white;
}

.col:hover > .icon.side {
  background: initial;
  color: initial;
}

.responsivegroup {
  display: none;
}
/*
  Column specifics
*/

.col p,
.col h1 {
  padding: 0%;
  text-align: center;
}

.group.margin {
  margin-bottom: 20px;
}

.col .imgholder {
  height: 300px;
  width: 100%;
  background: #333;
  transition: background 0.3s linear;
}


.col.bg {
  background: #FFF;
}

.col.pointer {
  cursor: pointer;
}

.col.bg:hover .imgholder {
  background: #555;
}

.col span.feature {
  font-size: 20px;
}

/*
  Text
*/

.container > h1:not(.hero) {
  margin-bottom: 30px;
  text-align: center;
}

.container > h1:after {
  content: "";
  width: 30px;
  position: relative;
  border-bottom: 1px solid #aaa;
  display: block;
  text-align: center;
  margin: auto;
  margin-top: 15px;
}

h2 {
  font-family: 'Roboto Slab', sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
}

.left,
.left > h1,
.left > p {
  text-align: left;
}

.reset {
  text-align: left !important;
}

.reset:after {
  display: none !important;
}


/*
   Gallery
*/


div.gallery {
  border: 1px;
   margin-bottom: 25px;
}

div.gallery:hover {
  border: 1px solid #D4988E;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 8px;
  text-align: center;
  font-family: Verdana;
}

div.desc1 {
  padding: 12px;
  text-align: center;
  font-family: Garamond;
font-weight: bold;
font-size: 18px;
letter-spacing: 1px;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 25%;
}

.footer {
position:relative;
left: 0px; 
right: 0px; 
right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/style.css">

<title>flowerbee</title>


</head>
<body>

<!-- topnav======================================== -->

 <div >
 <div style="position:relative;padding-top:0%; bottom: 0;">
    <iframe src="TopNav.html" width="100%" height="55" allowfullscreen></iframe>
    <style>iframe {border: none}</style>
  </div>
  </div>


<div >
  <div >
    <div >
      <h1 >flowerbee</h1>
      <h2 >Flower delivery</h2>
    </div>
  </div>
</div>

<!-- galleria prodotti======================================== -->

<div >
  <div >
    <h1>Product gallery</h1>
    <h2>all our bouquets!</h2>
    
<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BigBang.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang1.jpg" alt="Big Bang" width="600" height="600">
    </a>
    <div >Big Bang</div>
    <div >starting from 33.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Iris.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Iris/Iris1.jpg" alt="Iris" width="600" height="400">
    </a>
    <div >Iris</div>
    <div >starting from 35.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Sundays.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Sundays/Sundays1.jpg" alt="Sundays" width="600" height="400">
    </a>
    <div >Sundays</div>
    <div >starting from 35.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Lilac.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Lilac/Lilac1.jpg" alt="Lilac" width="600" height="400">
    </a>
    <div >Lilac</div>
    <div >starting from 29.00 €</div>
  </div>
</div>


<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Onirium.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Onirium/Onirium1.jpg" alt="Onirium" width="600" height="600">
    </a>
    <div >Onirium</div>
    <div >starting from 33.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Zanni.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Zanni/Zanni1.jpg" alt="Zanni" width="600" height="400">
    </a>
    <div >Zanni</div>
    <div >starting from 39.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Suite.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Suite/Suite1.jpg" alt="Suite" width="600" height="400">
    </a>
    <div >Suite</div>
    <div >starting from 39.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BoraBora.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/BoraBora/BoraBora1.jpg" alt="BoraBora" width="600" height="400">
    </a>
    <div >Bora Bora</div>
    <div >starting from 42.00 €</div>
  </div>
</div>


<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Moonwalk.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Moonwalk/Moonwalk1.jpg" alt="Moonwalk" width="600" height="600">
    </a>
    <div >Moonwalk</div>
    <div >starting from 33.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Birdy.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Birdy/Birdy1.jpg" alt="Birdy" width="600" height="400">
    </a>
    <div >Birdy</div>
    <div >starting from 51.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Manila.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Manila/Manila1.jpg" alt="Manila" width="600" height="400">
    </a>
    <div >Manila</div>
    <div >starting from 35.00 €</div>
  </div>
</div>

<div >
  <div >
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/OceanEyes.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/OceanEyes/OceanEyes1.jpg" alt="OceanEyes" width="600" height="400">
    </a>
    <div >OceanEyes</div>
    <div >starting from 42.00 €</div>
  </div>
</div>



<!-- recensioni======================================== -->

<div >
  <div >
    <h1>Wow? Wow wow wow wow!</h1>
    <h2>Wow</h2>
    <div >
      <h1 >[]</h1>
      <h1 >Wow</h1>
      <p >Wow wow wow wow wow wow wow wow wow wow wow wow wow</p>
    </div>
    <div >
      <h1 >[]</h1>
      <h1 >Wow</h1>
      <p >Wow wow wow wow wow wow wow wow</p>
    </div>
    <div >
      <h1 >[]</h1>
      <h1 >Wow</h1>
      <p >Wow wow wow wow wow wow wow wow wow wow wow</p>
    </div>
    <div ></div>
    <div >
      <h1 >[]</h1>
      <h1 >Wow</h1>
      <p >Wow wow wow wow wow wow wow</p>
    </div>
    <div >
      <h1 >[]</h1>
      <h1 >Wow</h1>
      <p >Wow wow wow wow wow wow wow wow</p>
    </div>
    <div >
      <h1 >[]</h1>
      <h1 >Wow</h1>
      <p >Wow wow wow wow wow wow wow wow</p>
    </div>
    <div ></div>
  </div>
 


<!-- footer======================================== -->
<div >  
  <div style="position:relative;padding-top:0%; bottom: 0;">
    <iframe src="Footer.html" width="100%" height="370" allowfullscreen></iframe>
    <style>iframe {border: none}</style>
  </div>
  </div>



</body>
</html>

CodePudding user response：

you could do <center></center> to fix your situation with the centering but Iframe displays a webpage so using it for anything else other then to advertise a webpage would be pretty useless but just use the attribute scrolling="no" for your iframe

CodePudding user response：

Via CSS, you have set an absolute value to the width of the HTML element <div ></div>. That causes your problem.

To solve it, get rid of that width CSS rule:

.container {
  position: relative;
  /* width: 1170px; the commented-out rule*/
  margin: auto;
  color: #444;
  font-size: 14px;
  font-weight: 300;
  font-family: Roboto;
  overflow: hidden;
}

Page link：https//www.codepudding.com/Backend/358336.html

Prev:ThreeJS FBXLoader import via cdn not working
Next:How to implement undo function for HTML canvas using JavaScript?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding