#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
    300
    Rep Power
    10
    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
    34
    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