Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 675
  • Last Modified:

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.
0
TrueBlue
Asked:
TrueBlue
  • 6
  • 5
  • 3
  • +1
1 Solution
 
arantiusCommented:
You just want to display rounded edges around an element?

http://www.alistapart.com/articles/customcorners/
0
 
TrueBlueAuthor Commented:
Hi!

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

Thank you in advance.
0
 
fatttymeltCommented:
hi, there.  I took a look at your home page where you use this box.  Is it only the height that will be changing?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
TrueBlueAuthor Commented:
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.

0
 
Neil_SimpsonCommented:
div.box_image{
margin: 0px auto;
}

should center the div containing the image in most browsers.
0
 
Neil_SimpsonCommented:
Actually you should probably use the following for correctness.

margin: 0 auto;
0
 
Neil_SimpsonCommented:
also, add:

text-align: center;

to the div.box_image tag for better cross-browser support
0
 
TrueBlueAuthor Commented:
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.

0
 
fatttymeltCommented:
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.
0
 
TrueBlueAuthor Commented:
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.

 
0
 
fatttymeltCommented:
The article is able to use some of the h1,h2 and p tags as hooks for the images, but since your situation only has an image as content, we have to add a bunch of divs, just for hooks.

I made this test page. I think it has everything you need.
http://www.sethgreen.net/box_test/

Here is the jist of it...

You pretty much use each of the four outer divs to assign border images to.  You can look at the images I used to get an idea for how you need to create your border images.  Mine has some limitations, but if you make them bigger, you could accomodate larger images (e.g. HUGE business woman).

The only real trick is to give the image some padding so it doesn't overlap the borders, and most important... set the outermost div (in this case, topLeftCorner) to be a float,  This will force the borders to collapse (shrink) to the size of your business woman.

markup:
<div class="topLeftCorner">
      <div class="topRightCorner">
            <div class="bottomLeftCorner">
                  <div class="bottomRightCorner">              
                                <div class="image"><img src="businesswoman.jpg" alt="Woman in Business Atti" width="75" height="75" /></div>
               </div>
          </div>
     </div>
</div>

css:
.topLeftCorner {
background: transparent url(Top_Left_Corner.gif) no-repeat top left; float: left;
}

.bottomRightCorner {
background: transparent url(Bottom_Right_Corner.gif) no-repeat bottom right;
}

.topRightCorner { background: transparent url(Top_Right_Corner.gif) no-repeat top right;
}

.bottomLeftCorner { background: transparent url(Bottom_Left_Corner.gif) no-repeat bottom left; }

.image {
      padding: 20px;
      text-align: center;
}
0
 
TrueBlueAuthor Commented:
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?
0
 
fatttymeltCommented:
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?
0
 
TrueBlueAuthor Commented:
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.

0
 
fatttymeltCommented:
cool. you are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 6
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now