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
Solved

Centering image inside of box with CSS

Posted on 2004-09-04
15
657 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
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

808 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