5 Replies - 1195 Views - Last Post: 04 March 2010 - 12:25 PM

#1 gretty  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 123
  • Joined: 25-May 09

Simple CSS Layout Not Working

Posted 03 March 2010 - 03:14 AM

Hello

I am very new to HTML & CSS & I am attempting to create a very simple layout like this:
Posted Image

Larger Pic: Larger Pic

But my code is just not arranging the different elements(navbar,main & heading) in the right position?

I know this is very simple but I am very new to this.

HTML code:
<html>
<head>

<link rel="stylesheet" type="text/css" href="layoutTest.css"

</head>

<body>

  <div class="heading">
     Heading
  </div>
  
  <div class="navbar">
     Navbar
  </div>
  
  <div class="main">
     Main
  </div>

  

</body>
</html>


CSS code:
body {background-color:gray; }

div.heading  {position:center; background-color:yellow; width:300; height:100;}
div.navbar    {position:left;   background-color:blue; width:100; height:200;}
div.main        {position:center; background-color:green; width:300; height:400;}

This post has been edited by gretty: 03 March 2010 - 03:16 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Simple CSS Layout Not Working

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1156
  • View blog
  • Posts: 7,171
  • Joined: 07-September 06

Re: Simple CSS Layout Not Working

Posted 03 March 2010 - 08:44 AM

The major problem is that you are trying to use position with properties that it isn't allowed to use. So, what you need to do is use floats and margins to get the effect you are trying for:
<style>
.container{
  text-align: center;
  width: 410px;
  margin: 0 auto;
}
.header{
  margin: 0 auto;
  background: #009900;
  width: 300px;
  height: 100px;
}
.main{
  margin-left: 100px;
  background: #9999ff;
  width: 300px;
  height: 400px;
}
.navbar{
  width: 100px;
  height: 200px;
  float: left;
  background: #ff0000;
}
</style>

<div class="container">
  <div class="header">
  </div>
  <br />
  <div class="navbar">Wasd
  </div>
  <div class="main">
  </div>
</div>


That gives you the general layout you are looking for (cross-browser), though you will notice that there are some browser artifacts (like IE having ~10 pixels between navbar and main, while Chrome/ FF don't).

Hope that helps.
Was This Post Helpful? 1
  • +
  • -

#3 Guest_gretty*


Reputation:

Re: Simple CSS Layout Not Working

Posted 03 March 2010 - 02:45 PM

View PostBetaWar, on 03 March 2010 - 07:44 AM, said:

The major problem is that you are trying to use position with properties that it isn't allowed to use. So, what you need to do is use floats and margins to get the effect you are trying for:
...
That gives you the general layout you are looking for (cross-browser), though you will notice that there are some browser artifacts (like IE having ~10 pixels between navbar and main, while Chrome/ FF don't).

Hope that helps.


Thank you very much :). This really helps me understand how to position things using CSS :D

I have one question, why do you use a container class? Should I always do this. Should all my elements of my website be inside this container class?

Thanks again.
Was This Post Helpful? 0

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1372
  • View blog
  • Posts: 3,472
  • Joined: 28-November 09

Re: Simple CSS Layout Not Working

Posted 03 March 2010 - 05:17 PM

http://www.dreaminco...topic143632.htm

Tutorial I wrote on the matter, hope it helps.
Was This Post Helpful? 0
  • +
  • -

#5 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1156
  • View blog
  • Posts: 7,171
  • Joined: 07-September 06

Re: Simple CSS Layout Not Working

Posted 04 March 2010 - 10:11 AM

The container class is there to apply the style (centering) to all the elements under it. It is just easier to have one element centered and the rest positioned relative to the centered element (especially when you want to cente multiple things but want to preserve the original layout).

In general when I am making centered sites I add a container class around the top elements to make it all centered on the page because of the ease, it isn't required though.
Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1372
  • View blog
  • Posts: 3,472
  • Joined: 28-November 09

Re: Simple CSS Layout Not Working

Posted 04 March 2010 - 12:25 PM

It'd be a better idea to use id's for container elements though.

An ID is a one use that's exclusive to whichever element uses it, a class can be used multiple times.

<div id="header">


#header{//codehere}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1