View Full Version : CSS Logo Not Lining Up Right with Container DIV

Dec 9th, 2009, 02:45 AM
Hello! I'm building my first Website with CSS. While it's been good, I still have a lot to learn! I'm stumped on this one and am needing your help!

Here's the page on staging:

And here's what it should look like:

Originally, I had the logo as part of the background image. But I wanted to make it clickable, so I found a tutorial that helped with that but now, it's not staying within the "wrapper" container. I want the logo to stay with the rest of the template, in the correct place as the browser resolution changes.

Also, I can't figure out how to add space between my Navigation buttons like I show it on the Comp.

Please o please help me! :)

Dec 9th, 2009, 06:21 AM
Hello gottarunnow,
Using the containers you have now, you could ap that image once you move it into #content.
Like this -

<div id="wrapper">
<div id="content"><a href="index.html" title="Guardian Foods" id="logo">Guardian Foods</a>
<ul id="topnav">
<li class="home"><a href="index.html">Home</a></li>
<li class="services"><a href="services.html">Services</a></li>
<li class="clients"><a href="client

#content {
clear: both;
width: 840px;
margin: 180px auto 0;
background: #fff;
border: solid 3px #e7bb5a;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 20px;
position: relative;
#logo {
width: 255px;
height: 122px;
background: #fff url(../images/gf-logo.gif);
position: absolute;
top: -140px; /*adjust here*/
left: 0; /*adjust here*/

Dec 10th, 2009, 02:51 AM
Excavator! You are a God send! Thank you so much. That makes so much sense and worked beautifully!

You made my day!

Sincerely gottarunnow