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</stro ng><br />or email at <a href="mailto:greg@rcssafet y.com">gre g@rcssafet y.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
<body background="file:///G3 Projects/Roadway Construction Services/RCS-03 RCS website/IMAGES/yellow-bar.
<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</stro
</div>
</div>
</body>
</html>
This is the css code I put in my style sheet:
#splashbg {
background: url(IMAGES/Splash-Page.jpg
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Try this .. Might help...
add padding like the following. and change the value according to the requirement.
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.
}
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.
ASKER
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.