Some basic CSS questions

programming web dev
1

This is a first for me using fulltime CSS since I’ve just been using tables since. I would like to know if you have you two columns, how is it possible to create small space in between? Just add another div and give it say 5px? Also, W3’s CSS Validator says:

Line : 3 (Level : 1) You have no color with your background-color : body

How can I rectify that?

2

what is your code?

3 

/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:9px;
}

#header{
width:239px;
height:auto;
margin:0px;
float:left;
background-color:#000000;
color:#ffffff;
font-weight:bold;
}

#whitearea{
width:5px;
height:auto;
float:left;
background-color:#000000;
}

#iframe{
width:239px;
height:auto;
background-color:#FFFFFF;
}
4

Don’t worry about it, I’ve been trying out some code and I added float:left , ha this must be a common mistake known to you css know people.

5

Well, wheres your 2nd content column? All I see is a header and iFrame… BTW, when you do make two columns, lets say Main and Sidebar, you can add padding to one of them to make the visual effect of 5px of whitespace… Also, just use the Background tag, you can use so much more with it.

EDIT OH, I think I get your question now. You want white space between your header div and content div? Well, at the way your doing it now, make the whitespace div the same width as the others. That way you will see the whitespace… :stuck_out_tongue: Also, give it a height

6

As for your warning from W3’s validator, it’s just telling you that when you specify a background color you should also put a color for the font.

So for example with the CSS you posted you’d want to add color…

#whitearea{
width:5px;
height:auto;
float:left;
background-color:#000000;
color: #fff;
}

#iframe{
width:239px;
height:auto;
background-color:#FFFFFF;
color: #000;
}
7

I was working on this yesterday night and when I previewed it in Firefox, everything look good but when I uploaded it, everything messed up. This is what I am doing and I can’t get it right.

My code:
ActionScript Code:
[FONT=Courier New][LEFT]body[COLOR=#000000]{[/COLOR]
background-[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]#ffffff;[/COLOR]
[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]#333333;[/COLOR]
font-family:Georgia, [COLOR=#ff0000]“Times New Roman”[/COLOR], Times, serif;
font-[COLOR=#0000ff]size[/COLOR]:9px;
font-weight:normal;
margin:45px;
[COLOR=#000000]}[/COLOR]

[COLOR=#808080]#nav{[/COLOR]
[COLOR=#0000ff]width[/COLOR]:240px;
[COLOR=#0000ff]height[/COLOR]:450px;
background-[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]#000000;[/COLOR]
[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]#ffffff;[/COLOR]
font-weight:[COLOR=#0000ff]bold[/COLOR];
margin-top:25px;
[COLOR=#000000]}[/COLOR]

[COLOR=#808080]#content{[/COLOR]
[COLOR=#0000ff]width[/COLOR]:811px;
[COLOR=#0000ff]height[/COLOR]:450px;
background-[COLOR=#0000ff]color[/COLOR]:[COLOR=#808080]#ffff00;[/COLOR]
[COLOR=#000000]}[/COLOR]
[/LEFT]
[/FONT]

How can I move DIV Area 3 to the red area with a small gap between it and DIV Area 1?

8

God finally, I got it working. I am not sure about how correct the coding is though.

For #NAV, I gave it **float:left **, #COPYRIGHT, I have it clear:both and #CONTENT, I just specified margin: 0 0 0 245px