The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Center background image only appearing at the very top
Holly1
post Apr 25 2012, 05:58 AM
Post #1





Group: Members
Posts: 4
Joined: 25-April 12
Member No.: 16,981



Hi everyone, first let me say what a very nice site this is. I'm hoping that someone might be able to help me. On our website www.PartyFavorWebsite.com we have a yellow image that used to appear in the center of our page all the way down to the bottom of the screen. It used to be shown behind our header and main image and was bordered on all of the edges by a pink background. I have attached a pic to show how it shold appear. Well yesterday the yellow image only appears at the very top of our page behind our header. Some of the html code shows now above it. I would like to get the image to display all the way down to the center again, along with removing the viewable code above the header. Can anyone please tell me what might be causing this? I know it must be something very minor, but I have checked the code and still cannot find the error. Any help would be greatly appreciated. Thank you in advance. smile.gif

BTW my knowledge of html is extremely limited at best!

This post has been edited by Holly1: Apr 25 2012, 06:00 AM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 9)
pandy
post Apr 25 2012, 07:34 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



See what you have at the very top of the page when viewed in a browser?
="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">
Something is broken and that doesn't help. I'll have a look at the markup.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 25 2012, 07:36 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Start by fixing the markup and CSS errors found by the online tools:
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
http://jigsaw.w3.org/css-validator/validat...vorWebsite.com/

BTW, the first markup error actually refers to a non closed meta tag on Line 2.
Don't mix XHTML syntax with a HTML Strict DOCTYPE.
And, since you use CSS, don't use deprecated elements such as FONT (in the markup, I mean).

This post has been edited by Frederiek: Apr 25 2012, 07:37 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2012, 07:38 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, here is what you have.

CODE
<td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


See? You have closed the TD directly after 'style'. The rest, "="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">", becomes just a text string and thus is displayed on the page instead of adding the background
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Holly1
post Apr 25 2012, 08:55 AM
Post #5





Group: Members
Posts: 4
Joined: 25-April 12
Member No.: 16,981



QUOTE(pandy @ Apr 25 2012, 08:38 AM) *

Yeah, here is what you have.

CODE
<td style><td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


See? You have closed the TD directly after 'style'. The rest, "="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">", becomes just a text string and thus is displayed on the page instead of adding the background


Thank you! I really appreciate your help.

This post has been edited by Holly1: Apr 25 2012, 09:29 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Holly1
post Apr 25 2012, 09:00 AM
Post #6





Group: Members
Posts: 4
Joined: 25-April 12
Member No.: 16,981



QUOTE(Frederiek @ Apr 25 2012, 08:36 AM) *

Start by fixing the markup and CSS errors found by the online tools:
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
http://jigsaw.w3.org/css-validator/validat...vorWebsite.com/

BTW, the first markup error actually refers to a non closed meta tag on Line 2.
Don't mix XHTML syntax with a HTML Strict DOCTYPE.
And, since you use CSS, don't use deprecated elements such as FONT (in the markup, I mean).


Thanks Frederiek, but that is what got me into this mess in the first place. Part if this site uses shopping cart software, so some of the code is supposed to be left untouched. At least that is what i had been told. Each time I tried to correct this, it had just made matters worse.
At least we now have our background image placed correctly. Thank you!

This post has been edited by Holly1: Apr 25 2012, 09:30 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2012, 09:32 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Holly1 @ Apr 25 2012, 03:55 PM) *

I'm sorry but is it the two <td style><td style>=" types of code that need to be removed? I am honestly so ignorant to this that I don't want to make matters any worse. would correcting that, then also bring the yellow center image back to the correct place?


Sorry, the extra TD was me being sloppy when copy-pasting (corrected in my post above).

THIS is what you have.

CODE
<td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


You close the TD (with >) directly after style.
CODE
<td style>


With me so far? What isn't in a tag is content. That's why the rest of it displays on the page and doesn't do what it's supposed to. All of it must be in the start tag for TD. It's all there, it's just that you inserted that extra ">" in the middle of it.

Like so.
CODE
<td style="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Holly1
post Apr 25 2012, 10:01 AM
Post #8





Group: Members
Posts: 4
Joined: 25-April 12
Member No.: 16,981



Thank you so much Pandy. It worked! I sincerely appreciate your help. The site is back to normal now. I think for the time being, I will stay away from code validators as this is what started the whole mess. Thanks so much once again.

BTW I love your avatar!





QUOTE(pandy @ Apr 25 2012, 10:32 AM) *

QUOTE(Holly1 @ Apr 25 2012, 03:55 PM) *

I'm sorry but is it the two <td style><td style>=" types of code that need to be removed? I am honestly so ignorant to this that I don't want to make matters any worse. would correcting that, then also bring the yellow center image back to the correct place?


Sorry, the extra TD was me being sloppy when copy-pasting (corrected in my post above).

THIS is what you have.

CODE
<td style>="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


You close the TD (with >) directly after style.
CODE
<td style>


With me so far? What isn't in a tag is content. That's why the rest of it displays on the page and doesn't do what it's supposed to. All of it must be in the start tag for TD. It's all there, it's just that you inserted that extra ">" in the middle of it.

Like so.
CODE
<td style="vertical-align: top; background-image: url(http://partyfavorwebsite.com/images/floralyellowlight.jpg);">


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2012, 10:31 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Thank you. tongue.gif

No, it wasn't the validator's fault. The validator is all good, you can learn from it. But you must learn the basics or you will make new mistakes like this, validator or not.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
script_monkey
post May 2 2012, 03:38 PM
Post #10


Newbie
*

Group: Members
Posts: 14
Joined: 2-May 12
Member No.: 17,029



yeah, what he is trying to tell you is the language is wrong.

sorta like if you made a sentence in english and ended the sentence in the middle with a period like this

today I was on. The html help forum

the period is like a closing bracket tag. < > it tells the Browser in HTML where your code starts, stops and what actions it will take to render code as text or use it in script . If your code is wrong is more than only a code error that could be corrected, its a full on coding language error.

example
Today I was. On the html forums

if you say its not supposed to say forums at the end its supposed to say website, then they're tyring to tell you = before you fix what its saying, you have to fix your sentence /language structure. too biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:58 PM