Centering images.need help

Forum Moderators: open

Message Too Old, No Replies

Centering images.need help

ValleyGuy

1:51 am on Jul 11, 2008 (gmt 0)

Hi Everyone, I'm new to the forum and I'm bringing a very amateur problem I need help with. I cannot seem to get an image centered in it's division. I will post the the HTML and the CSS files in the next two replies. Thanks for any help you can offer.

The image I am having trouble with is Janice1.jpg. I just want this image centered horizontally in it's division "content_a".

[edited by: ValleyGuy at 1:59 am (utc) on July 11, 2008]

ValleyGuy

1:52 am on Jul 11, 2008 (gmt 0)

THIS FILE IS IN PART ONLY.

</head>

<body>

<div id="navigation">


<br/>

<br/>
<a href="index_jgf.htm">Home</a>
<a href="products_jgf.htm">Our products</a>
<a href="wherecanibuy_jgf.htm">Where can I buy?</a>
<a href="about_jan_jgf.htm">About us</a>

<p>
<img src="everbag.jpg" height="127.5" width="170" alt="pic of Everything Bagel"/><br/>
</p>

</div>

</div>

</body>

</html>

[edited by: ValleyGuy at 2:03 am (utc) on July 11, 2008]

ValleyGuy

1:55 am on Jul 11, 2008 (gmt 0)

p{ width:80%; text-align: center;}

h1{font-family:comic sans ms,sans-serif;
font-size:xx-large;color:#d51431;text-align:center;width:80%;}
h2 {font-family:comic sans ms,sans-serif;
font-size:22px;color:#d51431;text-align:center;}
h3 {font-family:comic sans ms,sans-serif;
font-size:x-large;color:#d51431;text-align:center;}
h4 {font-family:comic sans ms,sans-serif;
font-size:medium;color:#66ccff;text-align:center;}
h5 {font-family:comic sans ms,sans-serif;
font-size: 24PX;color:#d51431;text-align:center;width:80%;}
hr {color:#66ccff;}

span {font-family:comic sans ms,garamond,sans-seriff;
font-size:large;color:#d51431;}

a:link{font-family:comic sans ms,sans-serif;font-size: 20px;color:#ea5493;}
a:visited{font-family:comic sans ms,sans-serif;font-size: 20px;color:#ea5493;}
a:focus{font-family:comic sans ms,sans-serif;font-size: 20px;color:#663333;}
a:hover {font-family:comic sans ms,sans-serif;font-size: 20px;color:#d51431;font-weight:bold;}
a:active{font-family:comic sans ms,sans-serif;font-size: 20px;color:#a5d8f6;}

#content_a {position:absolute; top:2%; left:220px; padding-left:2%; border-left: 2px solid black;
text-align: center;}
#content {position:absolute; top:15%;left:220px; border-left: 2px solid black; border-color:#000000; padding-left:2%;
text-align: center;}
#navigation {position:absolute;top:3%;left:2%;text-align:left;}
#navigation a{display:block;}

</style>

ValleyGuy

7:57 pm on Jul 11, 2008 (gmt 0)

Sorry folks, maybe I overdid with too much code. I can't edit it now.

penders

2:28 pm on Jul 13, 2008 (gmt 0)

Hi ValleyGuy, welcome to WebmasterWorld... certainly a large chunk of code can be rather off-putting to potential posters. It is usually best to try and break the problem down into it's most fundamental (a separate test page perhaps) and then work backwards.

Centreing an image....
HTML:


<div id="content_a"> 
<img src="janice1.jpg" height="307" width="500" alt="Logo by" /> 
</div>

CSS:


#content_a img { 
display:block; /* IMGs are inline by default, which do not accept margins */ 
margin:0 auto; /* Sets top/bottom margins to 0 and left/right margins to auto */ 
}

text-align [w3.org] is really for centreing text (as the name suggests). Although it will centre all inline content. And images are inline by default. Although the preferred/standard way to centre an image [w3.org] per se is to make it a 'block' and set the left and right margins to be equal (auto).

Although your code does present several other issues which could be problematic with trying to centre your image...

- You are trying to centre an image inside an absolutely position container, but that container does not have a width. The width is therefore undefined and down to the browser to decide. Firefox will shrink the container to fit its contents. IE is likely to expand the container to fit the width. You need a width (and preferably a height) on absolutely positioned elements.

There are a few errors with your CSS, which could prevent it from being parsed correctly. The first thing to do is always to validate it [jigsaw.w3.org]. If a font name has spaces then you must enclose the name in quotes, ie. "comic sans ms". You use an HTML comment () in your CSS, this is not allowed. Use a CSS comment instead (/* */). You have one instance of 'sans-seriff' - should only be 1 'f'. And 24PX should be 24px (lowercase - you are specifying an XHTML DOCTYPE).

Other issues... you include a fractional (pixel) value for the height of your image: height="127.5". Although valid, is this correct? Also, several of your short tags (/>) do not include a space before them, which you need for compatibilty with browsers that do not support XHTML (IE for instance).

Just a (semantic) point... you enclose your images in <p>..</p> tags. I assume you are doing this purely to help with your layout. It encases the <img> in a block-level element and provides a bit of top and bottom margin. But <p>'s are intended for paragraphs of text. The layout of the image (to make it a block, give it space/margin) should be controlled entirely by the CSS.

Hope that helps.