Please Help Me Arrange Page Elements !

Hello,

My site is giving me a headache; my original homepage is: http://myemohairstyles.com and I want to change the menu to the one located here:

http://myemohairstyles.com/test.html

After I've deleted the old div tag that included the old menu, the page went completely nuts and I have no idea what to do - been trying to correct it for the past hour.

I don't get this, all the damn div tags just jumped up the page; this damn template is a NIGHTMARE to manage !!!

Can someone look at that test page and direct me in the right way? To put that vertical menu at the top between title and gallery photos with center allignment?

Thanks.

 

Okay, I figured out the CSS properties I need to change; here they are:

The block of writing on the right is represented by

#body-right {
	float: right;
	width: 388px;
	padding-right: 22px;
	left: 384px;
	top: 427px;

	
}

PHP:

The gallery photos on the left are:

#body-left {
	width: 278px;
	padding-left: 28px;
	float: left;
	left: 24px;
	top: 511px;
	
}

PHP:

And as far as I can see, the main contoneur for everything is:

#wrapper {
	text-align: left;
	margin: 15px auto;
	width: 778px;
	height:auto
	position: relative;
	background: maroon url(images/bg.jpg) repeat-y;
	border: 5px solid #750306;
}

PHP:

Here's what I did so far; I tried altering the left and top values of the gallery and block of text div tags (from the resources I've read so far the values are supposed to dictate the positioning inside this wrapper tag). To my SURPRISE, changing them didn't alter anything ! - even deleting them didn't have any effect, is that supposed to happen?

I'm thinking of setting a height on the wrapper and use absolute positioning on the other div tags that aren't positioned correctly, but the issue with that is that might not look good at different resolutions so I'm hoping to find a way to move these damn DIV tags through co-ordinates.

 

If you're new to html and you need help finding out which css value control what down load the FF extension called

Firebug

You can right click on any part of a web page and it will show you the html and the css that control it

 

Maybe I didn't express myself correctly; I know which div tag and which css value controls what item on page, I identified the ones that need to be altered in my second post.

Problem is that I don't know how to alter them, and changing the left and top values on the #body-left and #body-right doesn't affect their position inside #wrapper as it should. Why is that?

 

Maybe I am missing something here. But if you put clear:left on the body-left, it should push that second left hand box down. Plus something is out of whack on the top section. Web Developer toolbar is showing a block element jutting way to the right. (doesn't look like its screwing up the design but its still there)

 

Okay, thanks shallowink, I sorted that out.

Now can someone tell my why the big image complilation on top right of http://myemohairstyles.com/test.html only loads WHEN IT FEELS LIKE IT in IE 7??? And not everytime as it should?!!!


This is the CSS I'm using for that tag:

#head-1 {
	background: url(http://myemohairstyles.com/images/head_1.jpg) no-repeat;
	width: 396px;
	height: 386px;
	top: 8px;
	left: 387px;
	position: absolute;
}

PHP:

In Firefox it works as it should!