Top of round rectangle not working
I'm trying to make an infinite round rectangle, but I cant seem to get the top to comply... heres what it looks like... http://animactions.ca/Animactions/accueil.php
You will notice the bottom of the round rect is fine, but Iv been trying for hours to figure out the top. Thanks
sorry, the site upload had failed, now it is up
picture of problem http://img511.imageshack.us/img511/6272/probleml开发者_高级运维.png
Html
<div id="page_content">
<div id="top"> </div>
<div id="middle">
<h1>Site under construction</h1>
<p>Hello, this Web Site is not done yet, sorry.... </p>
</div>
<div id="bottom"> </div>
</div>
CSS
#top {
background-position: center bottom;
background: url('Images/RoundRect/top.png') no-repeat center
bottom;
height : 12px;
padding : 0;
margin: 10px auto 0 auto;
width: 910px;
}
#middle {
background-position: left top;
padding: 0;
margin: 0 auto 0 auto;
width: 910px;
height: 5em;
background-repeat: repeat-y;
background-image: url('Images/RoundRect/middle.png');
}
#bottom {
background-position: center top;
background: url('Images/RoundRect/bottom.png') no-repeat center
top;
height : 12px;
padding : 0;
margin: 0 auto 10px auto;
width: 910px;
}
This is because of the h1
element. It creates a margin at the top. Add this to your CSS:
h1 {margin-top: 0px}
If you use Firefox, install Firebug. It is a great tool for debugging the HTML code and also highlights the padding and margin areas for elements.
精彩评论