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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Bacbground image not appearing

    *********THIS IS RESOLVED*************


    Can anyone help me out on this? I need to know why my background image is not showing up in my #maintop .update area of my homepage (at the top right .. it has a scrolling announcement in there...and there is supposed to be a background image).

    http://www.billboardfamily.com
    Last edited by CarlMartin10; 08-19-2010 at 12:20 PM. Reason: RESOLVED
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    in your css you have
    #maintop .update {
    background: transparent url(../images/update_bg.png);
    flot: left;
    width: 255px;
    display: inline;
    clear: both;
    }

    first off you need to change flot: left; to float: left;
    Last edited by dpDesignz; 08-19-2010 at 09:50 AM. Reason: found answer

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dpDesignz View Post
    in your css you have
    #maintop .update {
    background: transparent url(../images/update_bg.png);
    flot: left;
    width: 255px;
    display: inline;
    clear: both;
    }

    first off you need to change flot: left; to float: left;
    I see that now...too many hours looking at this screen. I fixed that typo, and that made the affected div move down .. out of place, but the background image is appearing ... so now just need to get the div to appear where is was before (where it is supposed to).
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #4
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    The strange thing I'm finding is that your site is looking fine for me in firefox, but in google chrome your script that your trying to place is up the wops. What program are you using to code and what browser are you checking in?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Anything to do with the errors in your markup?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dpDesignz View Post
    The strange thing I'm finding is that your site is looking fine for me in firefox, but in google chrome your script that your trying to place is up the wops. What program are you using to code and what browser are you checking in?
    The site is looking great in Firefox (except fo the issue this post is about), and it looks mostly correct in IE8, but there are some minor issues there. I am using Wordpress, so most of the code is pre-written, the rest I am writing in Notepad.

    I usually check in Firefox, then periodically in IE8, and after a lot of revisions in Safari.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #7
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Ok. I made these changes. They get it positioned right etc. Just your words are of by a couple of margins

    #maintop {
    float:left;
    font-family:Arial;
    height:200px;
    width:1000px;
    }

    #maintop .border {
    background:url("../images/largedots.png") repeat-x scroll center bottom transparent;
    clear:both;
    }

    #maintop .welcome {
    float:left;
    font-size:15px;
    padding:7px 0 10px 3px;
    width:495px;
    }

    #maintop .welcome p {
    padding-top:10px;
    }

    #maintop .welcome img {
    padding-top:5px;
    }

    #maintop .welcomeimage {
    display:inline;
    float:left;
    padding-left:5px;
    padding-top:12px;
    }

    #maintop .update {
    background:url("../images/update_bg.png")no-repeat;
    width:267px;
    float:right;
    height:210px;
    }

    #maintop .update a {
    color:#00AFEF;
    }

    #maintop .update a:hover {
    color:#00AFEF;
    }

    Also in your HTML, why do you have the <div> tags around the script v_content=? That may help with the padding issues

    I suggest you try out notepad++ for your editing. It helps alot. And also try downloading the "firebug add-on" for firefox
    Last edited by dpDesignz; 08-19-2010 at 10:54 AM. Reason: New answers

  • Users who have thanked dpDesignz for this post:

    CarlMartin10 (08-19-2010)

  • #8
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    That seems to have done the trick....I can adjust the size of the scroll box easily, so the text issues you spoke of should be ok. Does the bottom graphic (the one that repeats) of that top area look funny in the center to you?

    Thanks
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #9
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Take a look at my edited answer. It may help with that

  • #10
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dpDesignz View Post
    Take a look at my edited answer. It may help with that

    Thanks. Not sure where that script is even at on my site ... it is not in the actual html files, I think it is being generated by Wordpress or one of the plugins. I ahve FireBug...and it works well, but this was a trick one here.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #11
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by CarlMartin10 View Post
    Thanks. Not sure where that script is even at on my site ... it is not in the actual html files, I think it is being generated by Wordpress or one of the plugins. I ahve FireBug...and it works well, but this was a trick one here.
    Sorry, I mean what are the ones shown in bold for?
    <div class="update">
    <script language="JavaScript" type="text/javascript">
    v_font='verdana,arial,sans-serif';
    v_fontSize='11px';
    v_fontSizeNS4='11px';
    v_fontWeight='normal';
    v_fontColor='#000000';
    v_textDecoration='none';
    v_fontColorHover='#FFFFFF';// | won't work
    v_textDecorationHover='none';// | in Netscape4
    v_top=0;// |
    v_left=0;// | defining
    v_width=249;// | the box
    v_height=198;// |
    v_paddingTop=0;
    v_paddingLeft=0;
    v_position='relative';// absolute/relative
    v_timeout=5000;//1000 = 1 second
    v_slideSpeed=1;
    v_slideDirection=0;//0=down-up;1=up-down
    v_pauseOnMouseOver=true;// v2.2+ new below
    v_slideStep=1;//pixels
    v_textAlign='center';// left/center/right
    v_textVAlign='middle';// top/middle/bottom - won't work in Netscape4
    v_bgColor='transparent';
    </script>
    <div>
    <script language="JavaScript" type="text/javascript">
    v_content=[['','The Website is coming along! Thanks for checking us out!',''],['','Follow Us On <a href=\"http://www.twitter.com/billboardfamily\" target=\"_blank\">Twitter</a>','']]
    </script>
    <script language="JavaScript" src="http://billboardfamily.com/wp-content/plugins/announcement-and-vertical-scroll-news/gAnnounce/gAnnounce.js"></script>
    </div>

    </div>

    P.S. The site is looking much better and is working in Google Chrome now too.

  • #12
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Thanks for the heads up about Chrome .. not sure if the other pages are ok in other browsers yet.

    Those div tags are around that scroller .. it is a Wordpress plugin .. the actual code is this.....

    <div class="update">
    <?php if (function_exists (gAnnouncement)) gAnnouncement(); ?>
    </div>

    what you see in the page source is what the plugin/wordpress is generating
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #13
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    ok. Makes sense.

    Change this to fix that border in the middle
    #maintop .border {
    background: url("../images/largedots.png") repeat-x bottom transparent;
    }
    to

    #maintop .border {
    background:url("../images/largedots.png") repeat-x;
    }

    Also your "family" image is now too high, but I can't seem to work out where to add padding to the top.

    And you may want to remove "padding-right" from the .update class. The text is moving with the background, so there's no need for it.
    Last edited by dpDesignz; 08-19-2010 at 11:12 AM. Reason: additional answer

  • #14
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by CarlMartin10 View Post
    Thanks for the heads up about Chrome .. not sure if the other pages are ok in other browsers yet.
    Try this out. http://www.spoon.net/browsers/

  • #15
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Try this. Should line it up perfectly

    #maintop .update {
    background:url("../images/update_bg.png") no-repeat scroll 0 0 transparent;
    float:right;
    height:210px;
    width:267px;
    padding-left:7px;
    }


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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