Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Trying to Center an Image on Top of Page

6:53 pm on Apr 17, 2013 (gmt 0)

New User

5+ Year Member

joined:Sept 12, 2011
posts: 23
votes: 0

I'm trying to put an image at the top of a page but having trouble. I'm not that familar with CSS but know the basics I guess. So here is the code.

<div id="wrapper">
<div id="header" class="headerGlow">
<div id="logo"><img src="images/holding/logo.png" width="311" height="78" alt="Cor" /></div>
<div id="socialMedia"><img src="images/holding/social-media.gif" alt="Social Media links" width="182" height="23" border="0" usemap="#SocialMedia" href="#" />
<map name="SocialMedia" id="SocialMedia">
<area shape="rect" coords="5,4,26,18" href="http://www.facebook.com/pages/" alt="Facebook" />
<area shape="rect" coords="36,3,63,17" href="http://www.linkedin.com/company/" alt="LinkedIn" />
<area shape="rect" coords="77,2,100,18" href="http://twitter.com/#!/" alt="Twitter" />
<area shape="rect" coords="116,4,139,22" href="http://www.yelp.com/biz/" alt="Yelp" />
<area shape="rect" coords="157,5,177,17" href="http://www.youtube.com/user/" alt="YouTube" />
<p>CALL: 855.555.5555</p>
<div id="reservation"><a href="https://book"><img src="images/holding/reservation-button.jpg" width="131" height="34" alt="Make a Reservation" /></a></div>

On the top left is the logo picture and to the right is social media icons, well there is a big space in the middle where I want to put a small picture. How do I do that? I tried html but that didn't work. Any ideas?

8:46 pm on Apr 17, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 598

Two immediate problems:

You've given the html but not the css, so there's no hint which parts are supposed to be centered where. Looking at the sizes of the various elements, I'm guessing that some of them are set to {display: inline-block}. But without the CSS, everything just lines up along the left.

In the quoted code, there are five opening <div as against three closing </div> so the visible structure is

<div id="wrapper">
__<div id="header" class="headerGlow">
____<div id="logo">
____<div id="socialMedia">
______<div id="reservation">

The first two divs are left hanging. Does anything more happen with them?

btw: If you're using an image map where each area is supposed to be a link, I would cover the entire region. So the y coordinates are always 0 and 23 even if some bits of the image happen to contain whitespace along the top or bottom edges. Similarly, there are some awfully big gaps between one piece's closing x and the next piece's opening x. The map doesn't have to be right next to its image in the html. You can park it a few lines away-- or even in a completely different part of the page-- where it doesn't interfere with looking at the code.