Check one of my forum threads:

http://www.web-city.it/forum/showthread.php?t=2922

And now, check this image:

http://img180.imageshack.us/img180/8136/sduk9.jpg

I would like to revert that box's CSS. I don't know how to do it. First, I suppose, I have to revert that image (this) to the right.. but the, how do I set my CSS?

Originally Posted by My Codes

CSS:

/* Message Box */

.m_topleft {
background: url(skin/message/b_01.gif) top left no-repeat;
}
.m_topright {
background: url(skin/message/b_03.gif) top right no-repeat;
padding: 0px 20px 0px 28px;
/* The first and third should be 0px, the second is the width
of the top right corner image and the fourth is the width
of the top left corner image */
}
.m_topmid {
background: url(skin/message/b_02.gif) top right repeat-x;
height: 17px; /* This height must be the height of the background image used */
}
.m_left {
background: url(skin/message/b_04.gif) top left repeat-y;
}
.m_right {
background: url(skin/message/b_06.gif) top right repeat-y;
margin-right: 2px;
padding: 0px 18px 0px 0px;
/* The first and third should be 0px, the second is the width
of the right border image and the fourth is the width
of the left border image */
}
.m_mid {
background: url(skin/message/b_05.gif) top left no-repeat;
padding-left: 28px;
}
.m_content {
background-color: #FFFFFF;
}

.m_bottomleft {
background: url(skin/message/b_07.gif) top left no-repeat;
}
.m_bottomright {
background: url(skin/message/b_09.gif) top right no-repeat;
padding: 0px 20px 0px 28px;
/* The first and third should be 0px, the second is the width
of the bottom right corner image and the fourth is the width
of the bottom left corner image */
}
.m_bottommid {
background: url(skin/message/b_08.gif) top right repeat-x;
height: 17px; /* This height must be the height of the background image used */
}

/* Message Box End */

HTML:

<!-- Message Box -->

<div class="m_topleft">
<div class="m_topright">
<div class="m_topmid">
</div>
</div>
</div>
<div class="m_left">
<div class="m_right">
<div class="m_mid">
<div class="m_content">
<!-- Begin content -->
<p>Here my content.</p>
<!-- End content -->
</div>
</div>
</div>
</div>
<div class="m_bottomleft">
<div class="m_bottomright">
<div class="m_bottommid">
</div>
</div>
</div>
<!-- / Message Box -->

Can you help me?

The CSS shouldn't change if you simply wish the image to be flipped horizontally. Just take it into your favorite image editor, horizontally flip the box and then everything should be fine.

The only issue you may run into is the content might not be perfectly in the box depending on the margins of the box so simply add a padding or margin attribute to the content <div>

All the box's images?

you probably only need to flip one image

but stealing images from another site is NOT a good idea

Originally Posted by chrishirst

you probably only need to flip one image

Then the CSS does not change?

but stealing images from another site is NOT a good idea

What do you mean? Web City is my own site.

Nobody here?

Hey, can somebody help me?