Images in tables

[Sunmune]

I'm very new to CSS and am working on a test page to help me learn a little better.

I have a sidebar and maincontent. For the "home page" I want an image as the background in the maincontent table.

The problem I'm having is it's starting to tile when its published. you can see it here:

http://www.turnyourhead.com/worksheet.htm

Is there a way to make this not happen? I've been searching the web for an hour trying to find an answer and have found zilch.

ANy helpwould be much appreciated!
Thanks!

 

[ChrisHirst]

background-repeat:no-repeat;

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[Sunmune]

THank you Chris, worked like a charm. Now I have another problem If my resolution is 800x600, it's cutting off the picture. this is the CSS that I have and I've using a tutorial through project7:

body {
background-color: #eee5d6;
font-family: Ariel arrow, "Times New Roman", Times, serif;
font-size: 14px
margin: 0px;
padding: 0px;
}
#mainTable {
border: 0px solid #000000;
/*/*/line-height: 1.5em; /* */
}
#mainTable td {
padding:0px;/*Pads each table cell in modern browsers*/
}
#maincontent {
border-left: 0px dotted #333;
font-size: 14px;
background-image:url(pirobackgroundjpg.jpg);
background-repeat:no-repeat;
/*/*/font-size: 100%; /* */
}
#sidebar {
width: 20%;
font-size: 12px;
vertical-align: top;
/*/*/font-size: 85%; /* */
}
#header {
background-color: #eee5d6;
color: #695a3f, #B5AF9F;
horizontal-align: right;

}
#footer {
background-color: #eee5d6;
color: #695a3f;
background-image: url(csst_bg.gif);

}
td, p, ul {
font-family: Ariel Narrow, "Times New Roman", Times, serif;
}
h1:first-child {margin-top: 0;}/*starts first h1 in TD flush top*/
h2:first-child {margin-top: 0;}/*starts first h2 in TD flush top*/
h1 { font-size: 160%; }
h2 { font-size: 140%; }
#sidebar a {
/*/*/padding: 3px;
display: block;
border: 2px dotted #CCC;
text-decoration: none;
line-height: 1em;
width: 160px; /* */
}
#sidebar a:link, #sidebar a:visited {
color: #666;
}
#sidebar a:hover, #sidebar a:active {
color: #FFFFFF;
background-color: #CC0000;
border: 2px solid #000;
}
#sidebar ul {
/*/*/padding-left: 1em;
margin-left: 1em;
list-style-type: none; /* */
}
#sidebar li {
/*/*/margin: 0px 0px 6px 0px; /* */
}


Some of this is just there because that's what it said to do Not sure if I'm using it or not. Really, I need CSS for the "resolution" problem. I like the idea of "fluid" tables and I think it looks great. I don't expect the page to fit perfect in everything but I don't want anything cut off either and I'd like to avoid the scrolling to the right or left.

Again,thanks for any help you can give...I'll try not to abuse your wisdom

 

[Vragabond]

 body {
     background-color: #eee5d6;
     font-family: "Ariel Narrow", "Times New Roman", Times, serif;
     font-size: 14px;
     margin: 0px;
     padding: 0px;     
 }

 #mainTable {
    border: 0px solid #000000;
    /* line-height: 1.5em; */
 }

 #mainTable td {
     padding: 0; /* Pads each table cell in modern browsers */
 }

 #maincontent {
     border-left: 0px dotted #333;
     font-size: 14px;
     background-image: url(pirobackgroundjpg.jpg);
     background-repeat: no-repeat;
     /* font-size: 100%; */
 }

 #sidebar {
     width: 20%;
     font-size: 12px;
     vertical-align: top;
 /*  font-size: 85%; */
 }

 #header {
     background-color: #eee5d6;
     color: #695a3f;
 }

 #footer {
     background-color: #eee5d6;
     color: #695a3f;
     background-image: url(csst_bg.gif);
 }

 td, p, ul {
     font-family: "Ariel Narrow", "Times New Roman", Times, serif;
 }

 h1:first-child { margin-top: 0; } /* starts first h1 in TD flush top */

 h2:first-child { margin-top: 0; } /* starts first h2 in TD flush top */

 h1 { font-size: 160%; }

 h2 { font-size: 140%; }

 #sidebar a:link, #sidebar a:visited {
     color: #666;
 }

 #sidebar a:hover, #sidebar a:active {
     color: #FFFFFF;
     background-color: #CC0000;
     border: 2px solid #000;
 }
 /* ---------------
  Commented out section 

 #sidebar a {
     padding: 3px;
     display: block;
     border: 2px dotted #CCC;
     text-decoration: none;
     line-height: 1em;
     width: 160px;
 }

 #sidebar ul {
     padding-left: 1em;
     margin-left: 1em;
     list-style-type: none;
 }

 #sidebar li {
     margin: 0px 0px 6px 0px;
 }
 -------------------- */

Here's your CSS, a little neater and more correct (got rid of some wrong stuff). If you have questions about it, let me know. Regarding the cut off. Yes, that is normal behaviour. Backgrounds do not expand the size of their containers and as such will be cut off if container is not big enough to hold them anymore. My suggestion would be to get rid of the fixed width on the sidebar and replace it with a percentage value. When the going gets narrow, you'll still have your menu links holding the sidebar at at least 160px.

 

[Sunmune]

Thank you very much! I do have a question.

My sidebar (when I get this down) will be on the right side. I would like the picture (background) for the home page only, to actually "stretch" (if that's the right term) into the side bar.

It would look like

http://www.turnyourhead.com/home.htm

Is that possible to have one backgound image for 2 tables?

My links are actually flash made buttons. I'm assuming this can be inserted where the "fake" links are, if I add extra cells (to contain them)?

I guess that's more than one question...but I was just curious. I haven't found much on css/flash.

 

[Vragabond]

Oh what the hell. It is Saturday morning:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title>Turn your head!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
	body {
		margin: 0.5em;
		padding: 0;
		text-align: center; /* IE5 hack */
		background: #eee5d6;
		font: normal 0.9em "Arial Narrow", Arial, sans-serif;
	}

	#header {
		margin: 0 auto;
		width: 755px;
		text-align: right;
		text-transform: uppercase;
		font-size: 2.8em;
		color: #695a3f;
		padding-right: 10px;
	}

	.emphasize {
		color: #b5af9f;
	}
	
	#main {
		width: 765px;
		height: 480px;
		margin: 0 auto;
		background: url([URL unfurl="true"]http://www.turnyourhead.com/pirobackgroundjpg.jpg)[/URL] no-repeat;
		text-align: left;
	}

	#main ul {
		padding-top: 165px;
		margin-left: auto;
		width: 130px;
		list-style: none;
	}

	#main ul li a {
		display: block;
		text-decoration: none;
		text-transform: uppercase;
		color: #695a3f;
		font-size: 1em;
		font-weight: bold;
		width: 100%;
		margin: 0.5em 0;		
	}
	
	#main ul li a:hover {
		font-style: italic;
	}
	
    </style>
  </head>
  <body>
    <div id="header"><span class="emphasize">turn</span> your head</div>
    <div id="main">
      <div id="menu">
        <ul>
          <li><a href="#">about us</a></li>
          <li><a href="#">what is it</a></li>
          <li><a href="#">submit profile</a></li>
          <li><a href="#">faq</a></li>
          <li><a href="#">contact us</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Enjoy.

 

[Sunmune]

Why thank you I'm learning more through this then I have in the last 2 days trying to read about it But there is one teensy little problem The picture is showing up..... I see that you have the background url there so I figured it is supposed to show up...or am I missing something (a complete possibility).

 

[Vragabond]

To display the background I referrenced your site. That is where it loads it from. For your code, you would simply use relative rather than absolute url.

 

[traingamer]

Try:

 #maincontent {
        width: 765px;
        height: 480px;
        margin: 0 auto;
        background-image:  url(pirobackgroundjpg.jpg); background-repeat: no-repeat;
        text-align: left;
    }

Somewhere in there the id got changed from maincontent to main - just change that and you should be ok.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill