Learning CSS - What am I doing wrong?

py2006 · 23-07-2007 12:19pm #1

Hiya,

I am trying to teach myself a bit of CSS. I literally only started this morning so go easy on me.

This is purely experimental and is not what my site will look like when completed.

I have the following code on my page:

<style type="text/css">
 
body { 
margin: 0px;
background-color:#FFFFFF
font-family:Verdana, Arial, Helvetica, sans-serif
font size: landscape
}
 
#topbar {
width: 100%;
height: 50px;
background-color:#000000;
}
 
#leftbar {
width: 50px;
height: 768px;
background-color:#CC0000;
}
 
#rightbar {
width: 50px;
height: 768px;
background-color:#00CCFF;
float:right
}
 
#rightbox {
width:350px;
float:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#CCCCCC;
border:#666666
}
 
</style>
</head>
<body>
 
<div id="topbar"> </div>
<div id="leftbar"> </div>
<div id="rightbar"> </div>
<div id="rightbox"> This is some text </div>
 
</body>
</html>

However, when I have a look at it in my browser it looks like this..
The right bar and the right box with the text is down the bottom plus the border for the box isn't working.

Any ideas? I'd appreciate your help.

Liam Byrne · 23-07-2007 12:24pm

Add "float:left" to the leftbar CSS, and "float:right" to the rightbar CSS.

danbhala · 23-07-2007 12:27pm

try adding float: left; to #leftbar

#leftbar {
	width: 50px;
	height: 768px;
	background-color:#CC0000;
	float: left;
	}

py2006 · 23-07-2007 12:39pm

Thanks guys!

Thats seem to do the trick.

It didn't work at first but then I moved the float: left; to the bottom and it worked. I didn't realise they had to be in a certain order?

Malice · 23-07-2007 12:42pm

This won't solve your problem but the first thing that jumped out at me was:

font size: landscape

in the body definition. This should (I assume) be "font-size" and the value should be either a percentage, an absolute size in pixels or a named size such as "smaller", "medium" etc. See W3Schools for more info.

py2006 · 23-07-2007 6:44pm

malice_ wrote:

This won't solve your problem but the first thing that jumped out at me was:

in the body definition. This should (I assume) be "font-size" and the value should be either a percentage, an absolute size in pixels or a named size such as "smaller", "medium" etc. See W3Schools for more info.

Thanks for that malice. I am not sure what I was thinking there. I fixed and it seems to work now. I also forgot to put the semi-colon in a couple times.

Can't seem to get the border on the box on the right to work though.

Liam Byrne · 24-07-2007 3:57pm

py2006 wrote:

Thanks guys!

Thats seem to do the trick.

It didn't work at first but then I moved the float: left; to the bottom and it worked. I didn't realise they had to be in a certain order?

They don't (unless there are conflicting values) but if there were semi-colons missing then anything below that would be ignored.

What's up with the border ?

py2006 · 24-07-2007 4:13pm

Hi Liam,

I figured out the borders myself. God I'm good!
I think it was the missing semi-colons that was messing things up for me.

Goodshape · 24-07-2007 4:36pm

py2006 wrote:

Hi Liam,

I figured out the borders myself. God I'm good!
I think it was the missing semi-colons that was messing things up for me.

Yeah, semi-colons at the end of every command in CSS. You've got a few missing in the code you posted up above.

The sort of annoying mistake that could have you scratching your head and rewriting page of code in frustration, when all you need is a ' ; '.

py2006 · 24-07-2007 9:18pm

Goodshape wrote:

Yeah, semi-colons at the end of every command in CSS. You've got a few missing in the code you posted up above.

The sort of annoying mistake that could have you scratching your head and rewriting page of code in frustration, when all you need is a ' ; '.

Yea so I noticed. I have updated the site :

<style type="text/css">
body {
margin: 0px;
background-color: #ffffff;
}
#topbar {
height: 50px;
width: 100%;
background-color: #ffffcc;
border-bottom: 1px solid color #00000;
position: absolute;
z-index: 1;
}
#rightbox {
right: 2px;
top: 30px;
width: 250px;
position: absolute;
height: 300px;
background-color: #ccccff;
border: 1px solid color #000000;
padding: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
font-size: 10px;
line-height: 150%;
z-index: 2;
}
#mainbox {
position: absolute;
top: 90px;
left: 150px;
width: 450px;
height: 250px;
background-color: #cccc99;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: justify;
line-height: 160%;
padding: 10px;
}
#image {
left: 10px;
top: 10px;
position: absolute;
z-index: 3;
}
 
</style>

It can be viewed here.

Goodshape · 24-07-2007 9:33pm

Nice domain name.

Looks like you've got a bit to learn about web development though

py2006 · 24-07-2007 9:53pm

Goodshape wrote:

Nice domain name.

Looks like you've got a bit to learn about web development though

True, but I have other ideas for it!

ron_darrell · 25-07-2007 11:01am

What do you hope the site to do? Is it a blog/forum or will you be advertsing work? Posting tutorials?

-RD

py2006 · 25-07-2007 2:13pm

ron_darrell wrote:

What do you hope the site to do? Is it a blog/forum or will you be advertsing work? Posting tutorials?

-RD

Well, I am not fully decided. I doubt I will be posting tutorials.

I have actually had a few offers from people willing to buy it off me!

Learning CSS - What am I doing wrong?

Comments