HTML - Stopping Background Colour Of Include Overriding Whole Page?

I'm quite new to this and used a tag generator thing, how do I make the background black and has anyone got any other tips to make this look more attractive?

Here is the code:

HTML Code:

<p style="text-align: center;"><span style="background-color: rgb(0, 0, 0);"><br></span></p>
<p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);">if this newsletter is not displaying properly, click  <a title="Sternberg Clarke New Talent - February 2010" href="http://www.scflyers.com/newsletterfeb10.html" target="_blank">here</a> to see it in its full splendour</span></span></span></span></p>
<p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);"><br></span></span></span></p>
<table style="border: 4px solid rgb(244, 249, 249); width: 751px; height: 604px; background-color: rgb(255, 255, 255);" align="center" border="4" cellpadding="0" cellspacing="6">
</table>
<table style="border: 0pt solid rgb(0, 0, 0); width: 600px; height: 183px;" align="center" border="0" cellpadding="0" cellspacing="0" frame="border">
<tbody>
<tr>
<td style="width: 20px; height: 20px;" colspan="8">
<p><img style="border: 1px solid black;" title="sclogo" src="http://www.scflyers.com/htmlfiles/logo_600px.gif" alt="sclogo" width="600"></p>
</td>
</tr>
<tr>
<td colspan="8">&nbsp;
<p style="text-align: center;">performers of the month - March 2010</p>
&nbsp;            
<hr>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="text-align: center;" colspan="6">
<p><span style="text-decoration: underline;"><span style="font-size: x-large;">the langley sisters</span></span></p>
<p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="text-align: center;" colspan="5" valign="middle">
<p style="text-align: center;"><img style="border: 1px solid black;" title="Langley Sisters" src="http://www.scflyers.com/langley-sisters_250px.jpg" alt="Langley Sisters" width="250" height="238"></p>
<p style="text-align: center;">
<object style="width: 250px; height: 206px;" data="http://www.youtube.com/v/1uSKPIZaZtg&amp;feature" type="application/x-shockwave-flash" width="250" height="206">
<param name="src" value="http://www.youtube.com/v/1uSKPIZaZtg&amp;feature">
</object>
</p>
</td>
<td>
<p style="padding-left: 30px;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis. </span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td colspan="8">&nbsp;           
<hr>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="text-align: center;" colspan="6">
<p><span style="text-decoration: underline;"><span style="font-size: x-large;">puncture kit</span></span></p>
<p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><br></td>
<td colspan="5" valign="middle">
<p style="text-align: center;"><img style="border: 1px solid black;" title="pk" src="http://www.scflyers.com/puncture_250px.jpg" alt="puncture kit" width="250" height="238"></p>
<p style="text-align: center;">
<object data="http://www.youtube.com/v/wCdauhGajBE&amp;feature" type="application/x-shockwave-flash" width="250" height="206">
<param name="src" value="http://www.youtube.com/v/wCdauhGajBE&amp;feature">
</object>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td style="padding-left: 30px;" valign="top">
<p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-size: small;"><br></span></p>
</td>
<td style="width: 20px; height: 20px;"><br></td>
</tr>
<tr>
<td colspan="8">
<hr>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="text-align: center;" colspan="6">
<p><span style="text-decoration: underline;"><span style="font-size: x-large;">cash cows</span></span></p>
<p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="5">
<p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong><img style="border: 2px solid black;" title="cashcows" src="http://www.scflyers.com/cashcows_250px.jpg" alt="cashcows" width="250" height="238"></strong></span></span></p>
<p style="text-align: center;">
<object data="http://www.youtube.com/v/IvTHGp8Yui8" type="application/x-shockwave-flash" width="250" height="206">
<param name="src" value="http://www.youtube.com/v/IvTHGp8Yui8">
</object>
</p>
<p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p>
<p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p>
</td>
<td style="padding-left: 30px;" align="left">
<p style="text-align: justify;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="font-size: small;"><br></span></p>
</td>
<td><br></td>
</tr>
<tr>
<td colspan="8">
<hr>
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="8">
<p><span style="font-size: x-large;"><span style="text-decoration: underline;">kate mlynar</span></span></p>
<p><span style="font-size: x-large;"><span style="text-decoration: underline;"><br></span></span></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="5"><img title="km" src="http://www.scflyers.com/km_250px.jpg" alt="km" width="250" height="238">
<p>
<object data="http://www.youtube.com/v/tz8BvSiop5Q" type="application/x-shockwave-flash" width="250" height="206">
<param name="src" value="http://www.youtube.com/v/tz8BvSiop5Q">
</object>
</p>
</td>
<td style="padding-left: 30px; text-align: justify;" valign="top">
<p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><img title="bottomleft" src="http://www.scflyers.com/htmlfiles/bl.gif" alt="bottomleft"></td>
<td colspan="5"><br></td>
<td>&nbsp;</td>
<td><img title="bottomright" src="http://www.scflyers.com/htmlfiles/br.gif" alt="bottomright" width="20" height="20"></td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;">click <a href="mailto:sarah@sternbergclarke.co.uk?subject=unsubscribe"> here</a> to unsubscribe</span></span></span></p>
<p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="color: rgb(0, 0, 0);"><br></span></span></span></p>
<p>&nbsp;</p>

Hi all, nooby web developer here, so sorry if this question has an obvious answer, but I've searched all over for an answer to this.

I've got a 'masthead' image at the top of my site, which has a colour gradient going from red to white. If I set the background colour for the element that its in to either red or white, it doesn't quite look right. What I'd really like is a different solid colour either side of the image. I was wondering: is there any way to set the background colour of one side of the image to red, and one side to white?

Many thanks in advance.

Hey guys, basically i'm not great with html and i've been wracking my brains trying to figure these out. (nothing has helped so far)

Anyways, heres my site

If you scroll to the bottom you can see the footer box, It's the same color as the posts.

I want to change the footer box to white, but everything I change doesn't effect it.

I'm also wondering how to create rounded corners on the main blog posts, as i believe this will make the layout smoother. yet i've not found any code that works!

Any help would be appreciated a billion

Hi All,

Nice site BTW,

my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ?

Can anybody help me out
Thanks

Hi,

I have a search form with the following code:#

<!-- Begin FusionBot.com site search engine code-->
<FORM NAME=fbsearch METHOD=GET ACTION="http://ss021.fusionbot.com/cgi-bin/ss_query">
<INPUT TYPE=text NAME=keys style="height: 18px; width: 100px; background-color:#1E7CC8;<input size="8" SIZE=10>
<INPUT TYPE=hidden NAME=sitenbr VALUE="154309449">
<INPUT TYPE="image" src="http://www.freewebs.com/hanifm/search.gif" name="go" value="go" alt="Click to Search"><BR>
</DIV>
</FORM>
<!-- End FusionBot.com site search engine code -->



What I want is, is for the form to be like the login area of this site: http://www.pixel2life.com/

if u look at the top right of that site u can see it has the bit with username.

I want that same style of the box with the white text inside and with the same border thickness and colour.

These are the colours:

Inside of the form (background): #1E7CC8
The Border colour: #64A2D6
The boder thickness has to be small like the one on the sie

If anyone could do this it would be much appreciated. Thank You

If you want to include a template file how do you do that inside a html page? I want to include a footer.dwt file inside my html file......
I want to implement the footer.dwt file for all the pages of website....so i just want to call the footer.dwt file below my html page......
Help?

hi everyone

this is my first page so i will probably have a couple of questions to help give me an idea of how to do that i want! basically someone has asked me to design them a site, i did a web design course but that was 6 months ago and i need to learn new things for it as well as try and remember what ive learned!

ive got a semi basic layout, ill post the html and css, hopefully ill pate them in the right way (this definitely wont be the colour scheme, ive been following an online tutorial, want to get the layout right before making other tweaks)

basically in the content section theyre looking for a rectangular box that has 4 imaes, 2 side by side and two below. these will change when theyre rolled over and when a particular image is clicked it will take them to the correct section of the site.

as far as i understand from the css i have the size of the content section will change depending on how much information is there. how would i know what size to make the flash for insertion into this section so it fits properly without any gaps? sorry im a bit new to this but the more i learn the better! i dont have a clue how to actually code the flash yet but getting the size right would be a good start! thanks for your help

HTML Code:

<link rel="stylesheet" type="text/css" href="css/master.css" /> 
</head>

<body>

<div id="page-container"> <!--this div will hold all the other elements of the page-->

<div id="main-nav">Main Nav</div>
	
	<div id="header">
    <h1> Kilmaclolm Dramatic Society logo to be placed here </h1>
    </div>
	
	<div id="sidebar-a">
    
    		<dl class="hidden">
				<dt id="about"><a href="#">About</a></dt>
				<dt id="services"><a href="#">Services</a></dt>
				<dt id="portfolio"><a href="#">Portfolio</a></dt>
				<dt id="contact"><a href="#">Contact Us</a></dt>
			</dl>
	</div>
	
	<div id="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
    </div>
	
	<div id="footer"><!--floated divs dhould come first to avoid any IE issues-->
			<div id="altnav">
				<a href="#">About</a> - 
				<a href="#">Services</a> - 
				<a href="#">Portfolio</a> - 
				<a href="#">Contact Us</a> - 
				<a href="#">Terms of Trade</a>
			</div>
			Copyright &copy; Kilmacolm Dramatic Society. A website by D Keenan
	</div>

</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

html, body {      /*resets the margins and padding on both the html and body tags to 0 to ensure theres
	              no space between the top of the browser and the top of the page */
	margin: 0;
	padding: 0;
}

h1 {
	margin: 0; /* takes away the default margin and padding on h1 tags */
	padding: 0;
}

.hidden {
	display: none; /* any element with this class wont be seen on the site */
}
#page-container {  /* there is a # as this is an id, to be used once on the page only, not repeated elsewhere 
                   this div's height will change depending on the content*/
	margin: auto; /* browser sets margin, should centre the div */
	width: 760px; /* sets the width of the container */

}

#main-nav {
	background: red;
	height: 50px; /* the width doesnt need to be specified, it will be 760px as this is the with of the containing div */
}

#header {
	background: blue;
	height: 150px;
}

#sidebar-a {
	float: left; /* floats sidebar to left of the screen */
	background: darkgreen; /*the height is dependend on the content so no height will be set for the time being*/
	width: 280px;
}

#content {
	background: green; /*the height is dependend on the content so no height will be set for the time being*/
	margin-left: 280px; /*creates a margin as wide as the sidebar to separate the sidebar information and the content */

}

#footer {
	clear:both; /*When an element has the clear property assigned, if it comes into contact with a float it is placed right below where that float ends.*/
	background: orange;
	height: 66px;
	
}

I'm assuming this is a pretty easy problem, but I don't even know where to begin. I've done a few google searches, but since I don't know what to search for, I can't find the answer! Hope you all can help!

I have a particular page that I don't want people to be able to just "surf" to. In a sense, I don't want them to be able to type the address of the page in the address bar.

I want it so that the only way to get to that page is by linking from another page. Is there a way to do this?

Thanks!

Hi,
How can I stop the table bacground image in this page from scrolling:

http://augustineleudar.110mb.com/music.htm

Its the bacground image of a table not the whole page

any help appreciated

Okay, so. Im completely new here! But I really need help fixing a tumblr theme code. The content/images is scrolling over/infront of the fixed header image, so what would be the code to fix that up? There is no CSS for the header as the original style didnt really include one.

The HTML for the header is:

<body>
<head>
<div style="width: 488px; height: 288px; margin: 0 auto; background: url(http://i56.tinypic.com/mwto2t.png) no-repeat top center fixed;"></div>
<div id="yes">
<div id="center">
<div id="info">
<a href="/"></a><br><br>

Thank you for any help

Hi,

Background: I have a small page that need to be embeded into a bounch of other html pages.

Help needed:
1. Please provide the html chunk that I can use to embed the small page in to other html pages.
2. Is there a way of not using iframe? Can I use <Object> or <embed>? How?
---------------------------
mba colleges in london
hospitality management diploma

I'm a newbie and I need help with using the #include directive. below is a sample file usinging the #include directive:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<!-- #include file="test.html" -->
</body>
</html>

Here is the contents of test.html:

<h1>header</h1>

When I display the test.html in my brower the text show up. When I run the main file above with the include statement the contents of the test file will not appear. I've tried using #include virtual and I get the same results. both files reside in the same directory. How can I get the above files to work. I'm working with windows XP on a home computer.

This problem occured in my actual website files becasue I want to include a header and a footer. These files of course have table tags etc in them and I get the same results where the include files contents do appear.

I need help asap if that is possible.

Hi
is there any code etc to enable me to change the background of a page every few seconds to another image.
Thanks.

Hello World! (Where did that tradition start anyways?)

Yes, I am fairly new at web design, and am using the method of "search-Google-whenever-you-have-a-problem-as-you-go" to learn HTML. I am pretty happy with the results I am getting in Dreamweaver, but there is one nagging thing that is throwing a kink into my designs. I have the majority of the content that is unique to each page within a table cell (<td>). Since I wanted to have the background color of the cell match exactly to an image that tops off the page body, I decided to have the background be one pixel of that color that repeats across the whole table cell.

Originally, I just defined the background in the starting tag using "style=" then specifying the background. (Dreamweaver made sure I had it right using its Code Hinting). The background shows up perfectly when in the Dreamweaver editing view, but when looking at the page in any other view (Live view, preview in browser, etc.), the background of that cell is just white.

I tried defining the background with a CSS ID, which has worked on other parts of the page, but no beans. What am I doing wrong? Is the fact it is only one pixel that has to repeat an issue?

Here is the code:

<td width="100%" height="103" colspan="8" align="center" id="page_background_beige" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium;">
<!-- TemplateBeginEditable name="Body" -->
//In here goes all of the content of the page
<!-- TemplateEndEditable --></td>


The CSS:

#page_background_beige {
background-image: url(Background_Pixel.png);
background-repeat: repeat;
}

Thanks,
Wookieguy

(Heh, I know tables are a fairly sloppy way to do things, but this is a fairly simple site anyways.)

Hello all,

First post here, been stalking for a few weeks and of course, I'm milking for information. Wish I knew enough to contribute.

I've undertaken a web design project for a friend and I've run into a few snags I've never seen.

I have a background color set, and the background color only extends the size of the browser window. It's grey when I scroll down.

www.thephoenixpages.com/ourstory

Forgive the design, not my doing.

Also, is there a discrepancy in positioning with Chrome vs FF ? The picture box is off in each browser.

Lastly, I attempted the sticky footer(as seen on some of the pages, but not the linked one) and it had the same problem. It wouldn't stick to the bottom, but the bottom of the window as seen on the screen.

If anyone could shed some light on these problems, I'll email you a high five.

Thanks.

larsy