background problems - rookie question(s)

[IdylliK]

I'm redesigning a site for my father who makes custom knives. The original design is far to dark, I think, and had Javascript. I settled on using CSS and I'm really enjoying working with CSS, but as a newbie I'm running into a few Newbie issues that have me pulling at my hair.

Here's the home page so far. I used the slanted menu on the site here with a few tweaks. Made the graphic between the links from a photo of a pocketknife with gold inlay.

Okay - update. Finally got the background to show. Was a silly capitalization error on the graphic file name. BUT... new problem, I set the top margin to 0, but the graphic is still spaced down from the menu line, leaving a white space.

Here is the link

http://www.cgraytaylor.net/index3.html

and the CSS files are global2.css and paragraph.css

[boogyman]

you could float the slanted menu to the left and make it have a relative position of bottom left.
then have you break element than continue on with the rest of the page.

[IdylliK]

Thanks for the suggestion. I was playing with it and used a negative top margin with a smaller spacer and padding.

how's this look?

http://www.cgraytaylor.net/index3.html

new css file is global2

Still stuck on why the background image isn't showing in the main section.

[boogyman]

your site navigation is on two lines, which generally is not a good thing

[IdylliK]

How do you mean on two lines? I see it on one. Is it a browser issue?

[djr33]

Hey, welcome, and don't be afraid to ask questions if you need help, but please use a descriptive title, not a generic excuse for posting.

[IdylliK]

Sorry about that. I edited the original post title and tried to be more specific about the background problem.

[djr33]

Thanks. Now more people will read it who have an answer, more people will read it who have a similar question, and everyone will have a better chance of finding it again.

[IdylliK]

Okay, I think I solved the menu problem that boogyman told me about. I've looked at the index and links page in IE7, Firefox, and Opera, and the title and site links seems okay in all three.

The two pages STILL both have the same problems with the background images in the div below the slanted menu. Both have an ugly white space between the top of the background and the top edge of the div. So far, I'm not having any luck figuring out why. In the CSS, both are coded to display left, top and right, top respectively.

I would deeply appreciate any suggestions that would help.

The two pages:

www.cgraytaylor.net/index3.html
www.cgraytaylor.net/links2.html

The CSS is in two files, one called global and the other that simply formats the text on the index page, paragraph by paragraph, since I wanted that to stagger.

/* CSS Document */

body {
	background-color: #1E1C1D;
	margins: 0 0 0 0;
}

html {
	height: 100%
}

br.clear {
	clear: both;
}

#wrapper {
	width: 800px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	background-color: #FFF;
	border-top: 2px solid #4d4d4d;
	border-right: 2px solid #4d4d4d;
	border-left: 2px solid #4d4d4d;
	border-bottom: 2px solid #4d4d4d;
}



/*formatting for index background*/

#main {
	background-image: url(graphics/frontgraphic.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	margin-top: 0;
	padding-top: 0;
}

img.top {
	float: right;
	margin-left: 0px;
	margin-bottom: 0px;
	border: None;
	padding: 0px;
}


/*formatting for links page*/

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: bold;
	font-variant: small-caps;
	color: #000;
	margin-left: 450px;
	margin-top: 40px;
}

p {
	margin-top: 5px;
	margin-bottom: 5px;
}

#linkspage {
	background-image: url(graphics/linksback.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 0px;
	height: 383px;
}

#linkspage a {
	font-family: Garamond, "Times New Roman", Serif;
	font-size: 16px;
	font-decoration: None;
	margin-left: 475px;
}

/*external links*/

a.external:link {
	color: #494949;
	text-decoration: none;
}

a.external:visited {
	color: #494949;
	text-decoration: none;
}

a.external:hover {
	color: #000;
	text-decoration: underline;
}

a.external:active {
	color: #000;
	text-decoration: none;
}

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*site links-menu*/

#slantedmenu{
font-family: "Book Antiqua", Garamond, "Times New Roman", serif;
font-weight: bold;
font-size: 14px;
}

#slantedmenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#slantedmenu ul{
text-indent: 10px;
padding: 7px 0;
margin: 0;
background-color: None;
border-top: None;
border-bottom: 1px solid #bebebe;
text-align: left; 
}

#slantedmenu ul li{
display: inline;
}

#slantedmenu ul li a{
color: #494949;
padding: 5px 0;
padding-right: 35px;
margin: 0;
text-decoration: none;
background-image: url(graphics/buttons/divider.jpg);
background-repeat: no-repeat;
background-position: right;
}

#slantedmenu ul li a:visited{
color: #494949;
} 

#slantedmenu ul li a:hover{
	color: black;
}

The paragraph CSS (which I don't think has anything to do with the problem, since it isn't used on the links page, but you never know.

  /* CSS Document */

p {
	text-align: justify;
	font-style: Garamond, "Times New Roman", "Book Antiqua", Serif;
	color: #747474;
	font-size: 14px;
}

.firstpar {
font-size: 14px;
color:#4d4d4d;
margin-left: 15px;
margin-right: 300px;
margin-top: 2.5em;
margin-bottom: .8em;
padding: 0px;
border: none;
}

.secondpar {
font-size: 14px;
color:#4d4d4d;
margin-left: 40px;
margin-right: 260px;
margin-top: .8em;
margin-bottom: .8em;
padding: 0px;
border: none;
}

.thirdpar {
font-size: 14px;
color:#4d4d4d;
margin-left: 75px;
margin-right: 175px;
margin-top: .8em;
margin-bottom: .8em;
padding: 0px;
border: none;
}

.forthpar {
font-size: 14px;
color:#4d4d4d;
margin-left: 130px;
margin-right: 120px;
margin-top: .8em;
margin-bottom: 1em;
padding: 0px;
border: none;
}

.showpar {
font-size: 16px;
font-style: strong;
color:#000;
margin-left: 14px;
margin-right: 120px;
padding: 0px;
border: none;
}

.showpar2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: strong;
color:#000;
margin-top: 0px;
margin-left: 75px;
margin-right: 120px;
margin-bottom: 30px;
padding: 0px;
border: none;
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: bold;
	font-variant: small-caps;
	text-decoration: underline;
	color: #000;
	margin-left: 14px;
	margin-bottom: 10px;
}

The html for the index page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>C. Gray Taylor - Custom Knives</title>
<style type="text/css">
@import url(global2.css);
@import url(paragraph.css);
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="wrapper">
	<div><img src="graphics/Tiltle.jpg" width="456" height="149" class="top">
	<br class="clear" />
	</div>
	<div id="slantedmenu">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="folders.html">Folding Knives</a></li>
	<li><a href="straight.html">Straight Blades</a></li>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="links.html">Links</a></li>
	<br class="clear" />
	</ul>
	</div>
	<div id="main">
	<p class="firstpar">Creating art in the form of custom knives is an obsession for this maker. For the past 30 years, C. Gray Taylor has devoted himself to this art form. He now specializes in reproductions of historical multi-blade gentleman's knives, using steel, precious metals and exotic handle materials to create his interpretations of these classics.</p>
	<p class="secondpar">He is a member of the Art Knife Invitational, a prestigious group of 25 of the most collectible knifemakers in the world. The AKI Show is held for one day every two years in San Diego, CA and is attended by invitation only by both makers and collectors. At this show you will only see the best work featured from each maker. </p>
	<p class="thirdpar">In 2007, the collectors attending the AKI selected C. Gray Taylor to receive 'The Buster' which is awarded for the best overall display of workmanship. The award honors the late Buster Warenski, the renown maker and undisputed master of the craft. </p>
	<p class="forthpar">Gray  and his wife, Evelyn live in the scenic countryside of Eastern Tennessee.</p>
	<br />
	<h1>UPCOMING SHOWS</h1>
	<p class="showpar2">Plaza Cutlery Show - Costa Mesa, CA - October 3rd &amp; 4th, 2008<br/>
	  Art Knife Invitational - San Diego, CA - October 2009</p>
	</div>
</div>
</body>
</html>

The HTML for the links page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
@import url(global2.css);

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="wrapper">
	<div><img src="graphics/Tiltle.jpg" width="456" height="149" class="top">
	<br class="clear" />
	</div>
<div id="slantedmenu">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="folders.html">Folding Knives</a></li>
	<li><a href="straight.html">Straight Blades</a></li>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="links.html">Links</a></li>
	</ul>
</div>

<div id="linkspage">

                            <p><h2>Other Knifemakers</h2></p>
                          
                     
                          <p><a href="http://www.gallagherknives.com" class="external">Barry Galagher</a></p>
                          <p><a href="http://www.dunkerleyhandmadeknives.com" class="external">Rick Dunkerly </strong></a></p>
                          <p><a href="http://www.warenskiknives.com/buster.htm" class="external">Julie Warenski - Tribute to Buster </a></p>
                          <br/>
                          <p><h2>Sites for Knife Enthusists</h2></p>
                          <p><a href="http://www.plazacutlery.com/" class="external">Plaza Cutlery </a></p>
						  <p><a href="http://www.artknife.net/aki.html" class="external">Art Knife Invitational</a></p>
                       
</div>


</div>
</body>
</html>