Header element position

[OllyBug]

Hi.

My knowledge of css leaves a lot to be desired. TBH, i have always use tables but I am appreciating the power of css so am trying to learn along the way.

OK, I am wanting to add some elements to my header area but am confused in how to position them. If I set up a class or id for an image and position it 'absolute', this then positions the image to the browser window. Therefore, after researching, to make the element position to its parent container (i.e the header area) I need to make the header area to be positioned 'relative'. Therefore i have added the line within the stylesheet:

.header-area {
position: relative;
	float: left;
	background: #fdf7e3;
	background: url('full_back.jpg');
	margin: 0;
	width: 1000px;
}

I then place the image in the header area and give it the following id style:

#facebook {

position: absolute;
top: 75px;
left: 300px;

}

Is this the correct way of doing this? I know I should read a book etc but I decided to build my new 2013 shop from scratch rather than upgrading my v8 site. Therefore my time has been taken in inserting products rather than learning code. Thanks for the help.

[peblaco]

I suggest not using position absolute or relative unless editing a layout already using it. You can probably position the image using floats and widths.

[OllyBug]

Thanks for the quick reply!

Ah, ok. Yes, the website is on a test area of my server. Still very much a work in progress. I ideally wanted to put facebook/twitter logos, a delivery message etc in the header area and wanted to position them so they didn't mess up the search bar and checkout stuff. On my old site I used a banner and image maps but though I should do it another way.

Site is: http://www.norfolkherbs.co.uk/shopte...est/index.html

Thanks!

[peblaco]

The only space in the header is between logo and checkout. You may need to adjust width and padding: #facebook {width:120px;float:left;padding-top:75px;padding-left:20px;}

[OllyBug]

Thank you!

Lovely, thanks. will have a play.

I was going about it the wrong way because I thought you had to actually give an element a position attribute to position it (if you see what I mean) but I can see that using float and the padding will do this instead. Thanks for the reminder about the width too...