1. Home
  2. Forums Index
  3. Browser Side / CSS 11:19 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Trying to Center an Image on Top of Page

         

ibmethatswhoib2

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

10+ Year Member



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.

<body>
<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" />
</map>
<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>
</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?

Thanks

lucy24

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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>
____<div id="socialMedia">
______<div id="reservation">
______</div>
____</div>


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:19 am May 1, 2026