I'm having an issue with a simple website I'm trying to build. I want a plain background with a block down the middle consisting of: a menu bar at the top, and picture beneath it and then the information and content below. I haven't reached the content yet, but I'm having an issue in that the image should sit right below the menu bar, with it's top touching the bottom of the menu bar. But I can't get it to move right up below it, as it leaves a small gap. How do I get rid of this gap? Thanks.
HTML:
<body>
<div id="menu">
<img src="logoblue1.png" /><img src="about.png" /><img src="gallery.png" /><img src="bookings.png" /><img src="contact.png" />
</div>
<img id="picture" src="picture1.png" />
</body>
CSS:
#menu
{
width:720px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
}
#picture
{
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0;
}
I tried the "display:inline;", but it de-centered the image, which creates a whole new issue in itself. Thanks for the tip about the margins though.
Google Chrome
HTML:
<body>
<div id="menu">
<img src="logoblue1.png" /><img src="about.png" /><img src="gallery.png" /><img src="bookings.png" /><img src="contact.png" />
</div>
<img id="picture" src="picture1.png" />
</body>
CSS:
#menu
{
width:720px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
}
#picture
{
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0;
}
I tried the "display:inline;", but it de-centered the image, which creates a whole new issue in itself. Thanks for the tip about the margins though.
Google Chrome