asked on

Centering image inside of box with CSS

Hi!

Let me first say to all members of this forum, that it is refreshing to find a group of such dedicated people to assisting others that are still learning :)

I created a box with CSS & XHTML.
I need to change the code for the box so that it will automatically resize based on the image that is inside it and that the image will be centered.

Here is a link to the page that has the original HTML table and below that is my attempt at rewriting it in CSS & XHTML.
http://www.topsecurityinc.com/test.htm

XHTML:

<div class="roundcorneredbox">
<div class="box_tl"></div>
<div class="box_topgif"></div>
<div class="box_tr"></div>
<div class="box_ls"></div>
<div class="box_image"></div>
<div class="box_rs"></div>
<div class="box_bl"></div>
<div class="box_bottomgif"></div>
<div class="box_br"></div>
</div>

CSS:

/* Beginning of Rounded Cornered Box */

.roundcorneredbox
{
margin-left: 0px;
color: #ffffff;
background-color: white;
position: absolute;
}

.box_tl
{
position: absolute;
top: 0;
left: 0;
width: 25;
height: 27;
background:url(Web/images/box_r1_c1.gif);
}

.box_topgif
{
width: 100%;
text-align: center;
height: 27;
background:url(web/images/box_r1_c2.gif);
}

.box_tr
{
position: absolute;
top: 0;
right: -1px;
width: 27;
height: 27;
background:url(web/images/box_r1_c3.gif);
}

.box_ls
{
width: 25;
background:url(web/images/box_r2_c1.gif) repeat-y;
}

.box_image
{
position: absolute;
top: 28;
left: 10;
width: 196;
height: 131;
background:url(web/images/businesswoman.jpg);
}

.box_rs
{
position: absolute;
right: 0;
top: 27;
width: 26;
background:url(web/images/box_r2_c3.gif) repeat-y;
}

.box_bl
{
position: absolute;
left: 0;
width: 25;
height: 26;
background:url(web/images/box_r3_c1.gif);
}

.box_bottomgif
{
height: 26;
background:url(web/images/box_r3_c2.gif) repeat-x;
}

.box_br
{
position: absolute;
right: -1px;
bottom: 0;
width: 27;
height: 26;
background:url(web/images/box_r3_c3.gif);
}

Thank you in advance.

arantius

You just want to display rounded edges around an element?

http://www.alistapart.com/articles/customcorners/

TrueBlue

ASKER

Hi!

Would you mind giving me some insight as to what my code is missing?

Thank you in advance.

fatttymelt

hi, there. I took a look at your home page where you use this box. Is it only the height that will be changing?

TrueBlue

ASKER

Hi!

I am trying to figure out how to modify my code so that no matter what size image (within reason) that I place in it the box will automatically resize hortizontally and vertically.

Any ideas would be greatly appreciated.

Neil_Simpson

div.box_image{
margin: 0px auto;
}

should center the div containing the image in most browsers.

Neil_Simpson

Actually you should probably use the following for correctness.

margin: 0 auto;

Neil_Simpson

also, add:

text-align: center;

to the div.box_image tag for better cross-browser support

TrueBlue

ASKER

Hi Neil:

So are you saying that I should change my original class in my css style file from:

.box_image
{
position: absolute;
top: 28;
left: 10;
width: 196;
height: 131;
background:url(web/images/businesswoman.jpg);
}

to
.box_image
{
margin: 0 auto;
text-align: center;
background:url(web/images/businesswoman.jpg);
}

I tried this and get a box that stretches across the page and the image is not displayed.
please see http://www.topsecurityinc.com/test.htm

Thank you in advance.

fatttymelt

The article that arantius pointed out above is precisely what you need. Have you read it?

The path you are going down now is not only broken, but bad theoretically.

I believe Neil missed your question. His code is trying to center your box within its containing element. You want/need to center your image with the box, and allow the box to stretch (with rounded corners). It's position on the page is irrelevant for now.

Since this box needs to stretch, I presume that means the image is going to be changing often. This, of course, means that you don't want to put the image (e.g. the business woman) in the css.

Otherwise, you would have to change the css every time that image changed. Not to mention that you can't put alt text on an image in CSS, so you are also throwing accessibility out the window. The only images in the css should be the box borders.

Your markup will look something like this

<div id="topLeftCorner">
<div id="topRightCorner">
<div id="leftRightCorner">
<div id="bottomRightCorner">
<img src="/business_woman.jpg" alt="Woman in Business Attire...etc..." />
</div>
</div>
</div>
</div>

I'm not going to repeat the article, but in general you have to have some "hooks" (divs in this case) to put the box borders on. Anyway, read the article and you will have your answer.

If there is something in it you don't quite get, just ask.

TrueBlue

ASKER

Hi!

I have gotten closer.
I did read the article that was given. (Now twice)
It does not have an image inside the box. And it is not very well written in my opinion.

I now have the image in the box, but the left and right side images are not being repeated properly.

Please take a look at http://www.topsecurityinc.com/test.htm and advise me as to what I am missing...

Thank you in advance.

ASKER CERTIFIED SOLUTION

fatttymelt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TrueBlue

ASKER

Hi Fattymelt:

Your code works great for IE.

I did notice though when I replaced the table on my main page with the xhtml and css that the right border disappeared when using NS 7.01.

Here is a link to the page http://www.topsecurityinc.com

Any ideas?

fatttymelt

hmmm. What's going on in the js script with the asp source? It is right below the box. The reason I ask is this...

I opened the page in Firefox (displays correctly) and then saved a local copy of the page.
I opened the page in NS7 (displays incorrectly) and then saved a local copy of the page.

I then opened each local copy in NS7, and the copy I saved using Firefox looks fine in NS7 (the copy I saved using NS7 was still broken).

I am presuming you are doing some browser sniffing and sending different code to different browsers?

TrueBlue

ASKER

Hi fatttymelt:

You were correct, it was the JS below that was causing the problem.
The JS allows people to chat with us realtime.
I fixed it.

Thank you for your help.

fatttymelt

cool. you are welcome.