Link to home
Start Free TrialLog in
Avatar of designrox
designrox

asked on

I would like to know why my div doesn't line up with my background.

I've had this question for a while but always just done a workaround to get it to look differently so I decided to finally ask and see where I am going wrong. So I built a splash page in photoshop. Very simple. All I wanted was for the band to go across the page. So I sliced a 10px area and made it repeat-x on the background. Then I made a div for the main image and aligned it center. This was the html I put into dreamweaver:

<body background="file:///G3 Projects/Roadway Construction Services/RCS-03 RCS website/IMAGES/yellow-bar.jpg" background-repeat="x">
<div align="center">
<div align="center" id="splashbg">
      <div id="splashtext">
        <div id="splashtext2">For service please call <strong>Greg Santone</strong> at (M) <strong>855.919.7233</strong><br />or email at <a href="mailto:greg@rcssafety.com">greg@rcssafety.com</a></div></div>
</div>
</div>
</body>
</html>


This is the css code I put in my style sheet:


#splashbg {
      background: url(IMAGES/Splash-Page.jpg) no-repeat;
      height: 790px;
      width: 900px;
}

#splashtext {
      height: 790px;
      width: 900px;
}

#splashtext2 {      
      padding: 450px 10px 50px 300px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      text-align: left;
      line-height: 17px;
}


So what I don't understand is why the image and the background are not lining up with each other even though they were in the same file. I used the same psd to make the slices. Just made one 10px and the other 790px. I notice that in my dreamweaver window they don't line up as well. Why is this doing this? Do I need to add something or take away? A photo is included so you can see what I mean. Thanks for your help!
Screen-Shot-2013-03-25-at-3.56.5.png
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Would need to see the above as a complete page in the browser to be sure, but it looks like the padding on the text div is pushing the bar up.
ASKER CERTIFIED SOLUTION
Avatar of Rartemass
Rartemass
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Try this .. Might help...
add padding like the following. and change the value according to the requirement.

#splashbg { 
      background: url(IMAGES/Splash-Page.jpg) no-repeat;
      height: 790px;
      width: 900px;
      padding-top: 20px; //Change it according to the image.
}

Open in new window

Avatar of designrox
designrox

ASKER

I will try those things and get back to you. But to answer jason1178, I even took the text out and tested it with only the two images and it still shifted. This has happened to me on several occasions so it's kinda frustrating that you can't just do a bg image and set another image in a div and they won't just line up.
seems like this would work. I haven't been able to test it since the project was a rush thing. But I plan on going back and testing it out.