homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Trying to Center an Image on Top of Page

Msg#: 4565725 posted 6:53 pm on Apr 17, 2013 (gmt 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?




WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4565725 posted 8:46 pm on Apr 17, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved