Background question

Question

BobbyRags 0 Newbie Poster

20 Years Ago

I've included the image as well as the HTML and CSS. The top of the screen (masthead) is giving me a problem. May be becuase of the image. Can someone give me a hand? Thank you very much!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>BobbyRags Personal Homepage</TITLE>

</HEAD>

<div class="navbar">
<P><a href="Robert.htm">Robert</a></p>
<P><a href="Daniel.htm">Daniel</a></p>
<P><a href="Photos.htm">Photos</a></p>
<P><a href="Tips.htm">Computer Tips</a></p>
<P><a href="mailto:webmaster@bobbyrags.com">Email Me</a></p>
</div>

<p>
Welcome to my personal homepage! My very own piece of real estate on the internet.
The World Wide Web truly is a fascinating place. Please enjoy the photos and the content.
By no means is this site in its final version, it is solely in an introductory stage.
I will be adding links and updating the content as frequently as possible.</p>

<p>
If you enjoy the site, tell everyone. Maybe we can exchange links.
In the meantime, if you have any comments, critiques, questions,
or suggestions, please feel free to <a href="mailto:webmaster@bobbyrags.com">contact me.</a>
Just leave my mother out of it!<IMG SRC="Images/Smile.gif" alt="smile"></p>

<p align="center"><font color="#ff0000">
Site Last Updated September 10, 2004.</font></p>

//This script posts the exact day and time you arrived

RightNow = new Date();
document.write("Today's date is " + (RightNow.getMonth()+1) + "-" + RightNow.getDate() + "-" + RightNow.getFullYear() + ". You entered this Web Page at exactly: " + RightNow.getHours() + ":" + RightNow.getMinutes() + " and " + RightNow.getSeconds() + " seconds")
</SCRIPT>

</BODY>
</HTML>

**************************************************
*******

A:link {color:blue;}
A:visited {color:black;}
A:active {color:red;}
A:hover {color:green;}
.navbar {position:absolute;top:10px;left:10px;}
BODY {background-image: url("Images/Sideline.gif"); background-repeat: repeat-y; background-position: 0% 0%; font-family:verdana;}
#masthead {background-color: #008000; height: 100px;}
#content {position:absolute;top:0px;left:175px;right:350px;
}
UL LI {list-style-type: disc; margin-left: 100px;}

javascript

7 Contributors
22 Replies
291 Views
2 Years Discussion Span
Latest Post 17 Years Ago Latest Post by MidiMagic

mikeandike22 18 Nearly a Posting Virtuoso

20 Years Ago

Ok i dont know about the html but i do know that you should crop the pictures on the side they are not completely touching and are smushed.

mikeandike22 18 Nearly a Posting Virtuoso

20 Years Ago

Sorry i didnt clarify what pics, i was talking about the ones on the two pages robert and daniel, They are over on the side. Sorry i couldn't be more of a help to your original problem.

mikeandike22 18 Nearly a Posting Virtuoso

20 Years Ago

Save the files as txt files and then upload them and tell the people to click save as css and html

mikeandike22 18 Nearly a Posting Virtuoso

20 Years Ago

I think you are missing a file because in the html it says that there is another css file called bobbyragsnew or something.

DaveSW 15 Master Poster

20 Years Ago

Your style sheet is being addressed on your c drive...

Not having access to the contents of your harddrive I will have considerable difficulty reading it...

Upload it into the same folder and try:

You may wish to have it all in lower case.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

BobbyRags 0 Newbie Poster · Answer 1 · 2004-09-11T06:56:00+00:00

Ok i dont know about the html but i do know that you should crop the pictures on the side they are not completely touching and are smushed.

There's only one image in my example at the very top of the page? :confused:

BobbyRags 0 Newbie Poster · Answer 2 · 2004-09-11T07:38:43+00:00

No problem buddy. I should have been alittle more specific as well. You looked at my existing website. I am redoing my website and of course it's not online yet. The revised opening page is what my question entails.

Please follow the HTML and CSS code from the original post.

Sorry, html and css files are not valid extension types to attach to threads here.

Thanks!

BobbyRags 0 Newbie Poster · Answer 3 · 2004-09-11T08:21:39+00:00

BobbyRags 0 Newbie Poster

20 Years Ago

Here's the CSS the HTML is attached as a txt document

A:link {color:blue;}
A:visited {color:black;}
A:active {color:red;}
A:hover {color:green;}
.navbar {position:absolute;top:10px;left:10px;}
BODY {background-image: url("Images/Sideline.gif"); background-repeat: repeat-y; background-position: 0% 0%; font-family:verdana;}
#masthead {background-color: #008000; height: 100px;}
#content {position:absolute;top:0px;left:175px;right:350px;}
UL LI {list-style-type: disc; margin-left: 100px

index.txt (2.5 KB)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>BobbyRags Personal Homepage</TITLE>

<meta name="Keywords" Content="homepage, personal homepage, bobbyrags, rags, bobby, photos, links, Robert, Daniel, Christine, family, tips">
<meta name="Description" Content="The BobbyRags personal homepage. A homepage featuring family photos.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" CONTENT="Notepad">

<LINK REL=stylesheet HREF="C:\BobbyRags(New)\BobbyRagsNew.CSS" TYPE="text/css">

</HEAD>

<div class="navbar">
<P><a href="Robert.htm">Robert</a></p>
<P><a href="Daniel.htm">Daniel</a></p>
<P><a href="Photos.htm">Photos</a></p>
<P><a href="Tips.htm">Computer Tips</a></p>
<P><a href="mailto:webmaster@bobbyrags.com">Email Me</a></p>
</div>

<div id="content">

<div id="masthead">
<p align="center"><IMG SRC="Images/Starhome.gif" height="112" width="300" alt="logo"></p>
</div>

<p>
             Welcome to my personal homepage! My very own piece of real estate on the internet.
             The World Wide Web truly is a fascinating place. Please enjoy the photos and the content. 
             By no means is this site in its final version, it is solely in an introductory stage.
	     I will be adding links and updating the content as frequently as possible.</p>
                                         
<p>
             If you enjoy the site, tell everyone. Maybe we can exchange links. 
             In the meantime, if you have any comments, critiques, questions,
             or suggestions, please feel free to <a href="mailto:webmaster@bobbyrags.com">contact me.</a>
             Just leave my mother out of it!<IMG SRC="Images/Smile.gif" alt="smile"></p>
             
 
<p align="center"><!-- Copyright 2001, BobbyRags, All rights Reserved.-->
	&copy;Copyright 2001, BobbyRags, All Rights Reserved.</p>

<p align="center"><font color="#ff0000">
	Site Last Updated September 10, 2004.</font></p>

<SCRIPT LANGUAGE="JavaScript">

//This script posts the exact day and time you arrived

RightNow = new Date();
document.write("Today's date is " +  (RightNow.getMonth()+1) + "-" + RightNow.getDate() + "-" + RightNow.getFullYear() + ".         You entered this Web Page at exactly: " + RightNow.getHours() + ":" + RightNow.getMinutes()  + " and " + RightNow.getSeconds() + " seconds")
</SCRIPT>

<p align="center"><IMG SRC="Images/thanxsm.gif" height="37" width="245" alt="Thanks"></p></div>

</BODY>
</HTML>

BobbyRags 0 Newbie Poster · Answer 4 · 2004-09-11T09:06:45+00:00

BobbyRagsNew is the CSS file in the post above yours.

BobbyRags 0 Newbie Poster · Answer 5 · 2004-09-11T19:55:04+00:00

OK, here's the URL in question

http://members.fortunecity.com/bobbyrags2003/

And, here's the CSS

A:link {color:blue;}
A:visited {color:black;}
A:active {color:red;}
A:hover {color:green;}
.navbar {position:absolute;top:10px;left:10px;}
BODY {background-image: url("Images/Sideline.gif"); background-repeat: repeat-y; background-position: 0% 0%; font-family:verdana;}
#masthead {background-color: #008000; height: 100px;}
#content {position:absolute;top:0px;left:175px;right:350px;
}
UL LI {list-style-type: disc; margin-left: 100px;}

DaveSW 15 Master Poster · Answer 6 · 2004-09-11T23:18:27+00:00

You should also have a <body> tag after your </head> tag.

BobbyRags 0 Newbie Poster · Answer 7 · 2004-09-12T05:59:31+00:00

OK, DaveSW I fixed those two requests of yours.

BobbyRags 0 Newbie Poster · Answer 8 · 2004-09-12T18:22:33+00:00

OK, I got the "content" to begin below the "masthead". The "masthead" doesn't reach the "top" of the screen.

http://members.fortunecity.com/bobbyrags2003/

A:link {color:blue;}
A:visited {color:black;}
A:active {color:red;}
A:hover {color:green;}
.navbar {position:absolute;top:10px;left:10px;}
BODY {background-image: url("Images/Sideline.gif"); background-repeat: repeat-y; background-position: 0% 0%; font-family:verdana;}
#masthead {background-color: #008000; height: 100px; top;0px;}
#content {position:absolute;top:125px;left:175px;right:350px;}
UL LI {list-style-type: disc; margin-left: 100px;}

BobbyRags 0 Newbie Poster · Answer 9 · 2004-09-12T18:46:25+00:00

It has to be one of these two lines that needs a litlle tweak. :D

BODY {background-image: url("Images/Sideline.gif"); background-repeat: repeat-y; background-position: 0% 0%; font-family:verdana;}

#masthead {background-color: #008000; height: 100px; top;0px;}

I have masthead at top 0px but it's not quite at the top of the screen.

DaveSW 15 Master Poster · Answer 10 · 2004-09-13T15:53:01+00:00

add
margin: 0;
padding: 0;
to your body declaration (yes it was that line!)

hence:
BODY {background-image: url("Images/Sideline.gif"); background-repeat: repeat-y; background-position: 0% 0%; font-family:verdana; margin: 0; padding: 0;}

BobbyRags 0 Newbie Poster · Answer 11 · 2004-09-13T19:21:08+00:00

add
margin: 0;
padding: 0;
to your body declaration (yes it was that line!)
hence:
BODY {background-image: url("Images/Sideline.gif"); background-repeat: repeat-y; background-position: 0% 0%; font-family:verdana; margin: 0; padding: 0;}

It worked! Thank you so very much! I appreciate it! :)

I was going to start pulling my hair out. :mrgreen:

DaveSW 15 Master Poster · Answer 12 · 2004-09-13T19:55:43+00:00

I was going to start pulling my hair out. :mrgreen:

Not a good idea...
:cheesy:

JasonRCS 3 Newbie Poster · Answer 13 · 2004-09-15T22:38:54+00:00

JasonRCS 3 Newbie Poster

20 Years Ago

Message Deleted...

marketraise int 1 Light Poster · Answer 14 · 2007-02-28T16:48:15+00:00

Dear members
I take upon this opportunity 2 thank u people 4 permitting me 2 register 2 ur site.Hopefully with ur co-operation i will njoy my stay on ur site.I have read all the
requistes b4 i registered and i promise to abide by them
thanking you
Best Regards,
Shuvayu
MarketRaise Corp.
marketraise2005@gmail.com
marketraise@marketraise.com

MidiMagic 579 Nearly a Senior Poster · Answer 15 · 2007-03-03T04:16:00+00:00

I see quite a few errors which can confuse browsers:

1. You have capitalized tags which are closed with lowercase tags. This causes rendering problems with some browsers.

2. All tags must now be lowercase if CSS is used. An uppercase style selector won't select the same tag in lowercase, and vice versa.

3. Your script must be in the head portion of the page.

4. You can't have special symbols (such as the copyright symbol) in your source code. Instead, you must use the symbol code shown here for copyright.

&copy;

5. I don't understand your percentages in the body style. Percent of what??? Body is the outermost container.

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 16 · 2007-03-03T17:50:39+00:00

Setting a percentage for the body is a hack to try and scale the body to the window... Unfortunately, it doesn't work very well =P

HTML 4 or less doesn't care about tag case; those rules ONLY apply to XML and thus XHTML. Still; it's perhaps best to make tags lowercase incase XHTML is a future possibility.

http://wiki.whatwg.org/wiki/HtmlVsXhtml

MidiMagic 579 Nearly a Senior Poster · Answer 17 · 2007-03-04T12:50:43+00:00

HTML 4.0 doesn't care.

HTML 4.01 strict does care.

And style sheets do care. They have always been case sensitive except in IE. I have seen a style not applied to a tag because the tag was uppercase and the style selector was lowercase.