Solved

Centering image inside of box with CSS

Posted on 2004-09-04
15
654 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
  • 6
  • 5
  • 3
  • +1
15 Comments
 
LVL 18

Expert Comment

by:arantius
Comment Utility
You just want to display rounded edges around an element?

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

Author Comment

by:TrueBlue
Comment Utility
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
Comment Utility
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
 

Author Comment

by:TrueBlue
Comment Utility
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
Comment Utility
div.box_image{
margin: 0px auto;
}

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

Expert Comment

by:Neil_Simpson
Comment Utility
Actually you should probably use the following for correctness.

margin: 0 auto;
0
 
LVL 4

Expert Comment

by:Neil_Simpson
Comment Utility
also, add:

text-align: center;

to the div.box_image tag for better cross-browser support
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:TrueBlue
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
cool. you are welcome.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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 to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now