Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2007
    Location
    [Italy]
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do I revert a CSS box?

    Hi, please take a look at this image:

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

    How do I revert it?

    This is my HTML:

    Code:
    <!-- 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 -->
    
    My content....
    
    <!-- End content -->
    </div>
    </div>
    </div>
    </div>
    <div class="m_bottomleft">
    <div class="m_bottomright">
    <div class="m_bottommid">
    </div>
    </div>
    </div>
    <!-- / Message Box -->
    ..and this is my CSS:

    Code:
    /* 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 */
    Can you help me, please?
    Professional Italian Web Designer
    Contact me!


  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    You know, we can’t see at all what the image b_05.gif, or b_02.gif, or any of those images actually display. You need to show us a live example and/or give your images some more descriptive names (but I guess you didn't create that anyway and are just copying and pasting it).

    What I can tell you is that you can’t mirror a graphic with CSS, you need to create a new one (i.e. mirror the image in a graphic editor) and apply it accordingly. If you apply an outline to the elements you see where they are and where to apply the image to.

  • #3
    New Coder
    Join Date
    Feb 2007
    Location
    [Italy]
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your reply, VIPStephan.
    Here my forum (message's box): http://www.web-city.it/forum/showthread.php?t=3087.
    Ok, after creating a new *reverted* image (this), how do I revert that CSS code?
    Professional Italian Web Designer
    Contact me!


  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    i.e. mirror the image in a graphic editor
    This FREE Faststone viewer will do all that you need.

    http://www.faststone.org/

    Frank
    Last edited by effpeetee; 02-15-2008 at 03:56 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Feb 2007
    Location
    [Italy]
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have Photoshop!
    Anyway, thank you for you link, effpeetee.
    How do I revert that CSS?
    Professional Italian Web Designer
    Contact me!


  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Please explain what you mean by revert.

    revert - go back to a previous state - according to the dictionary.


    I too have Photoshop, but for quick re-sizing and inverting images, I find Faststone much quicker to use and totally satisfactory.

    Frank

    http://www.faststone.org/FSViewerDetail.htm
    Last edited by effpeetee; 02-15-2008 at 03:55 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •