having trouble possitioning a logo

[BuzzHost]

I am using dreamweaver and I am fairly new to it and working with css styles
I have a problem with possition of my logo I am wanting it up in the left hand corner and did a float left class called logo and in the page I called for it but when it has an image there it throws everything else out of whack can some one give me pointers here please.
here is a link to see what i am talking about
testpages

 

[PixelPusher]

The class named "logo" doesn't have any css properties associated to it?

I would recommend not using an image as you heading 1 content. This is a vital part of a page and it is important to have text in the element. What you could do is try using the gilder/levin method. It would look something like this:

<div class="logo">
    <h1><span></span>Buzz Hosting</h1>
</div>

div.logo {
   width:906px;
   margin:0 auto;
}
div.logo h1 {
   position:relative;
   width:600px; /* based in logo image width*/
   height:600px; /* based in logo image height*/
   line-height:50px; /* adjusts the vertical placement of text */
}
div.logo h1 span {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:url(images/yourlogo.png) 0 0 scroll no-repeat;
}

 

[BuzzHost]

The class named "logo" doesn't have any css properties associated to it?

I would recommend not using an image as you heading 1 content. This is a vital part of a page and it is important to have text in the element. What you could do is try using the gilder/levin method. It would look something like this:

<div class="logo">
    <h1><span></span>Buzz Hosting</h1>
</div>

div.logo {
   width:906px;
   margin:0 auto;
}
div.logo h1 {
   position:relative;
   width:600px; /* based in logo image width*/
   height:600px; /* based in logo image height*/
   line-height:50px; /* adjusts the vertical placement of text */
}
div.logo h1 span {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:url(images/yourlogo.png) 0 0 scroll no-repeat;
}

I get what you are saying here and I tried it to see the effect of it
I dont think it is helping my actual issue the position of the image is actually throwing the rest of my page off for some reason I am sure it is the div's that is doing the dirty there. Is there away to step the image to the foreground and have it over lap the rest of page or something so it does not mess with the other div's that is being pushed around by the image?
this is my actual site and layout of it Actual live site
Testpages

 

[PixelPusher]

Yes there is a way to overlap elements in a page, you will need to use z-index. I will take a look at you page later today, and post some ideas.

 

[BuzzHost]

ok thanx I changed my logo hoping it would fit better

 

[PixelPusher]

Sorry for the delay,

To insert your logo "above" the other content, you will use the z-index property. However, in order for z-index to function you must change the position of the targeted elements from static (default) to either relative, absolute, or fixed.

In your case you will use relative for the parent element and absolute for the child element. By setting the parent (div#header) to relative position, you will restrain the absolute position of the child (div.logo) to the parameter of the parent. Meaning when you use the top, left, right, bottom properties they will be based on div#header instead of the body element.

Try this:

div#header {
...
position:relative;
}
div.logo {
...
position:absolute;
top:0;   /* Adjust this value to move the logo down */
left:0;   /* Adjust this value to move the logo right */
}

 

[BuzzHost]

I think I have it sorted out now check it out here