Divs on website causing scrolling

Question

At the moment i am trying to mimic this website to get some practice in Link

However i am having major problems with the layout of the site. It seems that i am using the position: relative; a lot which is causing my website to screw up with the navigation bar etc. I am not sure if there is a easier way to do is? As you can tell by the website. There logo and nav bar have been floated to the right and left , however its in the middle of the screen. This is anther problem which i can't fix. When i floated mine to the right and left it went all the way to the border. This is why i used the position attribute to put it in the middle.

Anther big problem is that the site should have no scrolling to the right but u can go to the right and go down on mine. The front page should all be on the screen with no scrolling. Again i believe this is down to the Div structure

At the moment i have set up the background image. The two nav bars. The one at the top and the one at the bottom. I have put in the two logs, and put the navigation bar in. However as mentioned above got problems with the divs.

HTML: 
<body>
<div class="container"></div>

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/Member/">member</a></li>
</ul>

<div class="container1">
    <p>a</p>
        <div class="botLay">

        </div>
</div>

<div class="logo">
<img src="Image/Logo.png">
</div>

<div class="logo1">
<img src="Image/Logo.png">
</div>
</body>

The Nav div being the top black bar. The container 1 being the bottom bar. The logo 1 and 2 being the two logos.

CSS:

html { 
 background: url(../Image/BackgroundImage.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

html, body {
    height: 100%;
}


.logo{
    position: relative;
    top: -157px;
    left: 450px;
    width: 100px;
}
.logo1{
    position: relative;
    top: 521px;
    left: 450px;
}
.container1{
    position: relative;
    top: 446px; 
    right: 40px;
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    width: 2000px;
    padding:15px;

}
.nav{
    position: relative;
    top: 36px; 
    right: 40px;
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    list-style:none;
    text-align:center;
    width: 2000px;
}
.nav li {
  display: inline-block;
  position: relative;
  left: 280px; 
}
.nav li + li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #ffffff;
  padding-left: 8px;
  height: 28px;
}
.nav a{
    display:inline-block;
    padding:35px;
    text-decoration: none;
    color: white;
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
    text-transform: uppercase;
}
ul a:hover {
color: #ffcb80;
}

Any help on fixing this code and advice would be greatly apprenticed. Thanks

marti_ · Accepted Answer · 2016-01-21T17:10:29.813

here you are a simple solution

html, body {
    height: 100%;
}

body { 
 background: url('http://www.motionbackgroundsforfree.com/wp-content/uploads/2012/02/Screen-shot-2012-02-07-at-10.02.45-AM.png') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

header > .logo{
   float: left;
  margin-left: 20&
    }
 

header nav {
  float: right;
}

header { 
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    width: 100%;
  height: 100px;
}

.nav {
  margin-right: 20%;
}

.nav li {
  display: inline-block;
  position: relative;
  
}
.nav li + li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #ffffff;
  padding-left: 8px;
  height: 28px;
}
.nav a{
    display:inline-block;
    padding:28px;
    text-decoration: none;
    color: white;
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
    text-transform: uppercase;
}
ul a:hover {
color: #ffcb80;
}


footer > .logo{
   float: left;
  margin-left: 200px
}
 


footer { 
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100px;
position: absolute
  bottom: 0
}

<header>
  <div class="logo">
  <img src="http://placehold.it/140x100">
  </div>
  <nav>
  <ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/Member/">member</a></li>
</ul>
  </nav>

</header>

<section>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

<footer>
  <div class="logo">
  <img src="http://placehold.it/140x100">
  </div>


</footer>

consider add responsive nav menu http://codepen.io/marti1125/pen/YwYOxw

However 1 more question sorry! If i wanted to move the footer down to the end of the page how would i do this? — MadMan, Jan 21 '16 at 17:08
http://stackoverflow.com/questions/15358646/css-position-div-to-bottom-of-containing-div — marti_, Jan 21 '16 at 17:11

score 0 · Answer 2 · answered Jan 21 '16 at 16:50

0

Make these changes

 .logo{    
   left: 150px;
   }

  body {    
   overflow-y:hidden; /* For right scrollbar*/
    /* overflow-x:hidden for horizontal scrollbar */
     }

  .nav li {  
    left: 1580px; 
     }

I would suggest you to make some trial and changes as per your requirement as positions are relative. I would also suggest you to use Mozilla firebug which makes things easier for you to understand. Let me know if you get what you wanted.

answered Jan 21 '16 at 16:50

jackD

801
2
8
26

Unfortunately not :( its actually gone, worse, i think the main problem is my Div layout/ Would u know how to create the divs in the correct way? – MadMan Jan 21 '16 at 16:58
can you give a fiddle as i see working here and i don't think any problem with div as its closed properly. – jackD Jan 21 '16 at 17:03

Divs on website causing scrolling

2 Answers2