Put image in Background without cutting anything up

I am trying to put an image, not in the background but in the menu bar and the buttons for the menu bat lay on top of it but I dont know how to do it.

http://i1128.photobucket.com/albums/m487/cranegamelia/1.jpg

This is the basic idea. See the red behind the menu bar? That is what I am trying to acomplish without cutting everything into little pieces.

I just started coding yesterday for the first time so if there are things odd about it that is why.

HTML:

Need help aligning search box and sign in box in header

Ok so I have no idea what I am doing when it comes to coding. I've done a little research and that is how I've come this far, but I am stuck because my sign in box is at the very top of my header and not aligned with everything else. I was wondering if anybody could take a look at my code and let me know what I am doing wrong. The name of the website is www.mymontage.net. You can go there and see what I mean as far as the sign in box is really off to the top and not aligned at all. If the entire header code is needed to help solve the problem let me know and i'll post that as well.

Centre vertically and horizontally

Hey

I was wondering how I could vertically and horizontally center #slideshow div img within #slideshow

#slideshow {
	height: 290px;
	width: 219px;
	float: right;
	background-color: #252525;
 
}
 
#slideshow div img {
	width: 172px;

Any help will be great, thanks

Weebly website creator css

I have created a website using weebly and would like to fix my navigation bar so that it is visible as you scroll down the page. ive looked on other websites but cant see how to apply it to my website. can anyone help please.

This is mycurrent css. Sorry about the length.

*|* {
  margin:0pt;
  padding:0pt;
}
body {
  background: transparent url(bg_custom.jpg) repeat-x center top;
  background-color:#fff;
  font-family:"lucida sans", verdana, arial, sans-serif;
  font-size:13px;
  color:#666666;
  margin:0;
  padding:0;
}
p {
  line-height:1.5;

Border Troubles

I'm having a strange error: generally when I am laying out a site I will put borders around my divs just so I can see/position them more clearly. I had a border around a div I was positioning, but when I removed it, the position completely changed. Why is this?

HTML:

<div id="mainBox">
 
        <div id="header">
            <div id="yellowBar"></div>
            <h1 id="titleText">Bistro</h1>
        </div>
</div>

CSS:

#mainBox
{
   height:800px;
   width:1000px;
   background-color:White;
   margin:50px auto;
}    

Syndicate content