#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    4
    Rep Power
    0

    Centering content in css.


    I have issues positioning objects in css. I want to center a bar at the top of the page, a div with some boxes in the middle of the page and a footer at the bottom of the page.

    I have succesfully centered the top bar, but the others i cannot figure out.

    Hope you guys can help me!

    Here is my code.

    Code:
    <html>
    <link rel="stylesheet" type="text/css" href="css.css">
    <head>
    	<title>Banner</title>
    </head>
    <body>
    	<div id="top">
    		<div id="nav"></div>
    		
    	</div>
    	<div class="footer"></div>
    	<div id="main">
    		<div class="p1">
    			<a href="bla" class="lp1"></a>
    		</div>
    		<div class="p2">
    			<a href="bla" class="lp2"></a>
    		</div>
    		<div class="p3">
    			<a href="bla" class="lp3"></a>
    		</div>
    		<div class="p4">
    			<a href="bla" class="lp4"></a>
    		</div>
    	</div>
    </body>
    </html>
    Code:
    body{
    	margin: 0;
    	background-color: grey;
    	position: relative;
    }
    #top{
    	width: 800px;
    	height: 75px;
    	background-color: black;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    }
    #nav {
    	width: 300px;
    	height: 45px;
    	background-color: blue;
    	position: absolute;
    	right: 15px;
    	top: 15px;
    }
    #main {
    	background-color: grey;
    	height: 500px;
    	width: 600px;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	top: 12%;
    }
    .p1 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }
    .p2 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    }
    .p3 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    }
    .p4 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	bottom: 0px;
    	right: 0px;
    }
    a.lp1 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    a.lp2 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    a.lp3 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    a.lp4 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    .footer {
    	background-color: black;
    	height: 40px;
    	width: 800px;
    	position: absolute;
    	bottom: 0px;
    }
    Thank you!

    Emil
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Ok, played with the code and got it working.

    You have your footer div BEFORE the 'p1','p2' divs. I put your footer div below that in the HTML and also changed some CSS.

    I will highlight everything I've changed.

    Code:
    <div id="top">
    	<div id="nav"></div>
    		
    </div>
    	
    <!--your footer was here for some reason??-->
    	<div id="main">
    		<div class="p1">
    			<a href="bla" class="lp1"></a>
    		</div>
    		<div class="p2">
    			<a href="bla" class="lp2"></a>
    		</div>
    		<div class="p3">
    			<a href="bla" class="lp3"></a>
    		</div>
    		<div class="p4">
    			<a href="bla" class="lp4"></a>
    		</div>
    	</div>
    <div class="footer"></div>
    CSS:
    Code:
    body{
    	margin: 0;
    	background-color: grey;
    	position: relative;
    }
    #top{
    	width: 800px;
    	height: 75px;
    	background-color: black;
    	margin: auto;
    	position: relative;
    }
    #nav {
    	width: 300px;
    	height: 45px;
    	background-color: blue;
    	position: absolute;
    	right: 15px;
    	top: 15px;
    }
    #main {
    	background-color: grey;
    	height: 500px;
    	width: 600px;
    	margin: auto;
    	position: relative;
    	top: 12%;
    }
    .p1 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }
    .p2 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    }
    .p3 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    }
    .p4 {
    	background-color: brown;
    	height: 245px;
    	width: 295px;
    	position: absolute;
    	bottom: 0px;
    	right: 0px;
    }
    a.lp1 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    a.lp2 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    a.lp3 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    a.lp4 {
    	display: block;
    	width: 100%;
    	height: 245px;
    }
    .footer {
    	background-color: black;
    	height: 40px;
    	width: 800px;
    	margin: auto;//this is to center
    	position: relative;//changed to relative
    	bottom: 0px;
    }
    Hope this helps you.

    Kind regards,

    Nm.
    Last edited by Nanomech; December 9th, 2012 at 05:25 AM.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    As Nanomech said, you have your footer in the wrong place etc.

    However you have a lot of unnecessary code in your CSS so I have tidied everything up for you (people seem to be using position absolute and relative all over the place at the moment and it is entirely unnecessary). I hope this helps you code cleaner in the future.

    Code:
    <html>
    <head>
    	<title>Banner</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
    	<div id="wrapper">
    		<div id="top">
    			<div id="nav"></div>
    		</div>
    		<div id="main">
    			<p class="float-p"><a href="bla">Paragraph 1</a></p>
    			<p class="float-p right-p"><a href="bla">Paragraph 2</a></p>
    			<p class="float-p"><a href="bla">Paragraph 3</a></p>
    			<p class="float-p right-p"><a href="bla">Paragraph 4</a></p>
    		</div>
    		<div class="clear"></div>
    		<div id="footer"></div>
    	</div>
    </body>
    </html>
    And the CSS
    Code:
    body{
    	margin: 0;
    	background-color: grey;
    }
    p {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: 800px;
    	margin: auto;
    }
    #top{
    	height: 75px;
    	background-color: black;
    }
    #nav {
    	float: right;
    	width: 300px;
    	height: 45px;
    	background-color: blue;
    	margin: 15px;
    }
    #main {
    	background-color: grey;
    	height: 500px;
    	width: 600px;
    	margin: auto;
    	margin-top: 12%;
    }
    #footer {
    	background-color: black;
    	height: 40px;
    }
    .clear {
    	clear: both;
    }
    .float-p {
    	background-color: brown;
    	float: left;
    	margin-right: 10px;
    	margin-bottom: 10px;
    	height: 245px;
    	width: 290px;
    }
    .right-p {
    	margin-right: 0;
    }
    .float-p a {
    	width: 100%;
    	height: 245px;
    }

IMN logo majestic logo threadwatch logo seochat tools logo