Multiple box CSS layout

[DesigNes]

I'm having a totally blonde day so I'm quite sure the answer to this is very simple. (I spend an 10 minutes yelling at my menu height because it was too large, I apparently can't tell the difference between 50px and 270px...)

I've lost my left side bar that is supposed to go beside the main text box, anyone know where it's gone?

http://vicsongwriter.com/

Greatly appreciated
~Gone to get more coffee...

 

[bcee]

.leftside {
		/* background-image: url("images/left_side.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;*/

		background-color: #E0D01B;
		
		width: 230px;
		height: 400px;
		margin-top: 270px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		float: left;
	}
	
.main {
		/* background-image: url("images/main.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;*/

		background-color: #5A66E8;
		
		width: 794px;
		height: 400px;
		float: right;
		margin-top: 270px;
		margin-right: 0px;
		margin-bottom: 0px
		margin-left: 230px;
}

Did you generate that from photoshop?

 

[DesigNes]

No, I think I need to define my other elements better, I just wish I knew *where* exactly it was hiding so I could work off that. I think I'd better just leave it for tomorrow when hopefully I will be having less of a stupid-day.

 

[Denno]

Any chance of putting your CSS sheet up so we can look at that?

 

[Denno]

Sorry, didn't realize you had the CSS in with the source code.

Anyways, I had a play around, and I've got them all showing now. Not sure why you have the position being set? Isn't really needed for this application.

Here is the CSS that makes it display nicely:

<style type="text/css"> 
 
#container {
	width: 1024px;
	height: 768px;
	position: fixed;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
 
.top {background: #239178 url(images/top.jpg) no-repeat fixed center top;
		width: 1024px;
		height: 220px;
		margin-left: 0px;}
 
.leftmenu {
		background: #665083 url(images/left_menu.jpg) no-repeat fixed;
		
		width: 405px;	
		height: 50px;
		float:left;}
 
.menu {
		background-image: url("images/menu.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed; 
		background-color: #458961;
		width: 619px;
		height: 50px;
		float:left;}		
.leftside {
		/* background-image: url("images/left_side.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;*/
 
		background-color: #E0D01B;
		float:left;
		width: 230px;
		height: 400px;
		}
	
.main {
		/* background-image: url("images/main.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;*/
		background-color: #5A66E8;
		width: 794px;
		height: 400px;
		float: left;}
.bottom {
	/* background-image: url("images/bottom.jpg");
		background-repeat; no-repeat;
		background-attachment: fixed;*/
		background-color: #E85A5A;
		width: 1024px;
		height: 108px;
		clear:both;
}
</style>

 

[DesigNes]

Thanks so much Denno - I was just getting frustrated and throwing things at it, I'm quite new to css (I've always used tables in the past) I've got it working properly now, I used your code to see what I'd done wrong . This fixed/absolute/etc. thing was throwing me off!

I'm going to move everything over to a proper css sheet now it's done - this is a lot easier in terms of replicating it for every page!

 

[Denno]

Glad to have helped .

 

[jeverd01]

I'm having a totally blonde day so I'm quite sure the answer to this is very simple. (I spend an 10 minutes yelling at my menu height because it was too large, I apparently can't tell the difference between 50px and 270px...)

I've lost my left side bar that is supposed to go beside the main text box, anyone know where it's gone?

http://vicsongwriter.com/

Greatly appreciated
~Gone to get more coffee...

Check out the web developer toolbar


It will make css way way easier.

 

[DesigNes]

Actually I recently added WBT but I mostly use it to delete cookies - how are you recommending to use it for css?

 

[DesigNes]

BLARG!!!