...

View Full Version : Bacbground image not appearing



CarlMartin10
08-19-2010, 08:50 AM
*********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

dpDesignz
08-19-2010, 09:41 AM
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;

CarlMartin10
08-19-2010, 10:11 AM
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).

dpDesignz
08-19-2010, 10:25 AM
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?

abduraooft
08-19-2010, 10:29 AM
Anything to do with the errors in your markup (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbillboardfamily.com%2F)?

CarlMartin10
08-19-2010, 10:29 AM
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.

dpDesignz
08-19-2010, 10:47 AM
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

CarlMartin10
08-19-2010, 10:53 AM
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

dpDesignz
08-19-2010, 10:56 AM
Take a look at my edited answer. It may help with that

CarlMartin10
08-19-2010, 10:58 AM
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.

dpDesignz
08-19-2010, 11:01 AM
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. :)

CarlMartin10
08-19-2010, 11:04 AM
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

dpDesignz
08-19-2010, 11:10 AM
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.

dpDesignz
08-19-2010, 11:14 AM
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/

dpDesignz
08-19-2010, 11:16 AM
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;
}

dpDesignz
08-19-2010, 11:26 AM
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;
}

And change

#maintop .update {
background:url("../images/update_bg.png") no-repeat scroll 0 0 transparent;
float:right;
height:200px;
padding-top:5px;
width:265px;
}

to

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

and remove padding-right:7px; from #maintop .welcomeimage

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

This should fix it all

CarlMartin10
08-19-2010, 11:31 AM
It is all lined up now, except for the text that the script is generating. I have the option to change the actual size of the scroll box in settings, which is working, but it just makes the box smaller on the left side ... and the text in the box needs to go right, and down (because adjusting box height also just shortens the box from the bottom and not both bottom and top) ... looks like there is more css to be done to get this right .. grrr

dpDesignz
08-19-2010, 11:33 AM
to line up that script, you need to have the padding-left line. You can change your picture to the one you had before, it should work fine.

Also, off that topic. Your "Post" content looked a bit out, so I cleaned it up for you. Try this

#content .post {
clear:both;
margin-left:2px;
margin-top:4px;
}

#content .post h2 {
background:url("../images/border.gif") repeat-x scroll 0 bottom transparent;
font-family:Arial;
font-size:1.8em;
font-weight:bold;
padding-bottom:2px;
text-transform:uppercase;
padding-left:2px;
}
#content .post h2 a {
color:#566777;
text-decoration:none;
}

#content .post img {
background-color:#FFFFFF;
float:left;
margin:1px 1px 9px 4px;
padding:3px;
}

That should work a bit better. :)

Good luck

dpDesignz
08-19-2010, 11:38 AM
My last ditch attempt for me tonight. As long as you haven't changed it yet, try this:

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

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

:)

CarlMartin10
08-19-2010, 11:46 AM
Thanks for all the help. It is now the best it has been .. I will continue to play around with it and see if I can get it to be perfect.

The end goal is to have that background image the same look and width as the sidebar below it, aligned exactly to it, and all the scrolling text contained within the background image, and beginning and ending its scroll within the background image area.

Thanks!

CarlMartin10
08-19-2010, 12:20 PM
This is resolved

dpDesignz
08-20-2010, 06:41 AM
Glad I could help. Learnt alot myself! :)

CarlMartin10
08-20-2010, 11:04 AM
to line up that script, you need to have the padding-left line. You can change your picture to the one you had before, it should work fine.

Also, off that topic. Your "Post" content looked a bit out, so I cleaned it up for you. Try this

#content .post {
clear:both;
margin-left:2px;
margin-top:4px;
}

#content .post h2 {
background:url("../images/border.gif") repeat-x scroll 0 bottom transparent;
font-family:Arial;
font-size:1.8em;
font-weight:bold;
padding-bottom:2px;
text-transform:uppercase;
padding-left:2px;
}
#content .post h2 a {
color:#566777;
text-decoration:none;
}

#content .post img {
background-color:#FFFFFF;
float:left;
margin:1px 1px 9px 4px;
padding:3px;
}

That should work a bit better. :)

Good luck

I did not see where this needed to be corrected. Can you point out to me where the issue you see is? this is the css that came with the theme, so it was made for the theme...I am just curious what you saw wrong with it. Thanks!

dpDesignz
08-20-2010, 10:55 PM
I did not see where this needed to be corrected. Can you point out to me where the issue you see is? this is the css that came with the theme, so it was made for the theme...I am just curious what you saw wrong with it. Thanks!

On your site, you have the main content, where your post appear. At the moment it is headed "Newest Post" with a picture of a house and the content "This is the newest post". This is all up the wops, with the margins and spacing all over the place, therefore making it look, odd. If you go into your css, this can be found under the heading /** BEGIN content **/. Just replace the ones I've shown, with the ones matching in your css, and it should tidy it up.

Try this:



#content .post {
clear:both;
margin-left:2px;
margin-top:4px;
}

#content .post h2 {
background:url("../images/border.gif") repeat-x scroll 0 bottom transparent;
font-family:Arial;
font-size:1.8em;
font-weight:bold;
padding-bottom:2px;
text-transform:uppercase;
padding-left:5px;
}

#content .post h2 a {
color:#566777;
text-decoration:none;
}

#content .post img {
background-color:#FFFFFF;
float:left;
margin:1px 5px 9px 4px;
padding:3px;
}

#content .post p {
color:#566777;
font-size:0.9em;
line-height:1.5em;
margin-top:5px;
}

Also, you mentioned you use Firefox for checking. This is a great tool for playing around with the CSS without actually editing it. http://getfirebug.com

Hope this helps. :D

CarlMartin10
08-20-2010, 10:58 PM
I was planning on re-arranging that anyway .. I want it to eventually be almost exactly formatted like it is on this page:

http://www.iwearyourshirt.com

That is why I have not messed with it yet....I am still fixing other problems on the site first, like this damn javascript sliding menu that is really pissing my page off when I try to implement it.

Thanks!

dpDesignz
08-20-2010, 11:09 PM
right. Fair enough. Are you really wanting to mimic a identical site?
You javascript is looking fine on Chrome now. what seems to be the problem with it now?

CarlMartin10
08-20-2010, 11:13 PM
right. Fair enough. Are you really wanting to mimic a identical site?
You javascript is looking fine on Chrome now. what seems to be the problem with it now?

I don;t want to mimic it exactly...I just want something similar...it is organized well, in my opinion.


The javascript that I am referring to is not on the page anymore...when I tried to get it to work...it really made my page go crazy. I have all the code handy, but am having a lot of trouble integrating it into what I already have. If you have some free time, and don't mind trying to help me out on that, I will post the code up, and show you what is going on.

Thanks for all the help by the way....you are a lifesaver.

dpDesignz
08-20-2010, 11:22 PM
:). anytime. Are you having trouble coding the javascript, or coding to integrate it into your page? I know HTML and CSS, but very little about javascript. If it's javascript you're wanting help with, post a comment here (http://www.codingforums.com/forumdisplay.php?f=2) or if it's just the HTML, post it here and I would be happy to help.

CarlMartin10
08-20-2010, 11:24 PM
:). anytime. Are you having trouble coding the javascript, or coding to integrate it into your page? I know HTML and CSS, but very little about javascript. If it's javascript you're wanting help with, post a comment here (http://www.codingforums.com/forumdisplay.php?f=2) or if it's just the HTML, post it here and I would be happy to help.

The javascript is already written, and I have a working version of it in an HTML file, but I can not get it to work in my actual website without messing everything up. If you like, send me a PM with your email address, and I will send you the actual files with the working html file so you can see what it is supposed to do....that might make it easier for you to help me figure it out. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum