Solved

Centering image inside of box with CSS

Posted on 2004-09-04
15
663 Views
Last Modified: 2008-03-17
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
Comment
Question by:TrueBlue
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 3
  • +1
15 Comments
 
LVL 18

Expert Comment

by:arantius
ID: 11984561
You just want to display rounded edges around an element?

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

Author Comment

by:TrueBlue
ID: 11986815
Hi!

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

Thank you in advance.
0
 
LVL 1

Expert Comment

by:fatttymelt
ID: 12000839
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:TrueBlue
ID: 12001297
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
 
LVL 4

Expert Comment

by:Neil_Simpson
ID: 12010839
div.box_image{
margin: 0px auto;
}

should center the div containing the image in most browsers.
0
 
LVL 4

Expert Comment

by:Neil_Simpson
ID: 12010855
Actually you should probably use the following for correctness.

margin: 0 auto;
0
 
LVL 4

Expert Comment

by:Neil_Simpson
ID: 12010947
also, add:

text-align: center;

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

Author Comment

by:TrueBlue
ID: 12011108
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
 
LVL 1

Expert Comment

by:fatttymelt
ID: 12011906
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
 

Author Comment

by:TrueBlue
ID: 12012578
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
 
LVL 1

Accepted Solution

by:
fatttymelt earned 500 total points
ID: 12013062
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
 

Author Comment

by:TrueBlue
ID: 12016243
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
 
LVL 1

Expert Comment

by:fatttymelt
ID: 12018364
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
 

Author Comment

by:TrueBlue
ID: 12019621
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
 
LVL 1

Expert Comment

by:fatttymelt
ID: 12019784
cool. you are welcome.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question