1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML HELP on Notices

Discussion in 'Off Topic' started by wickedstangs, Jan 23, 2013.

  1. wickedstangs

    wickedstangs Well-Known Member

    Can I get some help on html... Trying to fix the below image.. Want the image to the right and text a bit smaller to fit right...

    HTML:
    <img src="/community/styles/notice-background.png" style="display:block; width:400px" title="Fox Body Mustangs" />
    <div class="csgoIntro" style="position:absolute; top:0; left:0; height:100%; width:230px;">
        <div style="padding: 05px;">
            <h3>Welcome to Fox Body Mustangs!</h3></br>
                <p>This forum is intended to be used by enthusiasts of the Fox body Ford Mustangs (1979-1993).  Come on in and join our discussions about Fox Body Mustangs! Take a moment to <a href="http://foxbodymustangs.org/community/register/">Register</a> to gain extra privileges and access to other areas of the site normal guest do not have..</p>       
     
    <div class="noticeButtonContainer">
                <label for="LoginControl" id="SignupButton"><a href="http://www.foxbodymustangs.org/community/login/" class="inner"><b>Sign Up Now!</b></a></label>
            </div>
            <div class="csgoMember">Already a member? <a href="http://www.foxbodymustangs.org/community/login">Login Now!</a></div>
        </div>
    </div>
    notice.JPG
     
  2. MagnusB

    MagnusB Well-Known Member

    Add float: right; to the style bit on the img tag.
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Shelley likes this.
  4. lazy llama

    lazy llama Well-Known Member

    Travis likes this.
  5. wickedstangs

    wickedstangs Well-Known Member

    Travis and lazy llama like this.
  6. EQnoble

    EQnoble Well-Known Member

    So you want it to look like this?

    foxBodyNotice.png
     
    wickedstangs likes this.
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  8. wickedstangs

    wickedstangs Well-Known Member

    Yes, like that.. I am getting closer.. But, can't get it..
    front2.JPG
     
  9. MagnusB

    MagnusB Well-Known Member

    That is a size constraint. You need to either reduce the width of the image or the width of the text. If you can, you can increase the notice width by increasing the width of the pageWidth (can be done via style properties), but that increases the width of your style.
     
  10. Saeed

    Saeed Well-Known Member

  11. RobParker

    RobParker Well-Known Member

    Me neither
     
  12. MagnusB

    MagnusB Well-Known Member

    That resource is deleted.
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    wickedstangs likes this.
  14. EQnoble

    EQnoble Well-Known Member

    Try pasting this entire code snippet into your extra css for the style you are editing
    Code:
    .baseHtml.noticeContent > img {
        bottom: 5px;
        left: 17px;
        position: relative;
    }
     
    .csgoIntro {
        font-size: 15px;
    }
     
    .csgoIntro div h5 {
        bottom: 14px;
        font-size: 18px;
        position: relative;
        right: 9px;
    }
     
    Jake Bunce likes this.
  15. wickedstangs

    wickedstangs Well-Known Member

    Awesome that worked.. Thank you..
     
  16. EQnoble

    EQnoble Well-Known Member

    add this as well to your EXTRA.css

    Code:
    .PanelScroller .PanelContainer {
        background-color: #EEEEEE;
    }
     
    Jake Bunce likes this.

Share This Page