Soldato
- Joined
- 1 Sep 2005
- Posts
- 10,001
- Location
- Scottish Highlands
Im currently working on my website. Im very pleased with how its coming along, especially as im a complete programming noob. But im a bit stuck with trying to colour the background of the main content area. All other variables seem to work, but background, background-color etc simply doesn't seem to work. Its probably something obvious, but what am I doing wrong?
Css
html;
Any suggestions as to how to make the code better are also greatly appreciated
Edit; I basically want the <div id="content"> section to have a black background 800px wide, and stretching to fit the content.
Css
Code:
hr {color: sienna}
p {margin-left: 20px}
body {
background: url(Backgroundpinstripe.gif);
text-align: center;
}
#content {
text-align: left;
width: 800px;
margin: 0 auto
background: #000000;
font: 13px 'Trebuchet MS', Trebuchet, sans-serif;
color: #ffffff;
}
#navbar {
margin: 0 auto;
padding: 3px 0;
}
div#navbar {
text-align: center;
width: 800px;
height: 0%;
border-top: solid #ffffff 1px;
border-bottom: solid #ffffff 1px;
background: #000000;
}
div#navbar ul {
margin: 0px;
padding: 0px;
font: 9px 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 9pt;
color: #FFF;
line-height: 20px;
white-space: nowrap;
}
div#navbar li {
list-style-type: none;
display: inline;
}
div#navbar li a {
text-decoration: none;
padding: 7px 20px;
color: #FFF;
font-weight: bold;
}
div#navbar lia:link {
color: #FFF:
font-weight: bold;
}
div#navbar lia:visited {
color: #CCC;
font-weight: bold;
}
div#navbar lia:hover {
font-weight: bold;
color: #FF00F0;
background-color: #3366FF;
}html;
Code:
<html>
<title>Alasdair Fowler Photography</title>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<div align="center">
<script type="text/javascript" src="swfobject.js"></script>
<div id="monoSlideshow1">
<p><strong>Please install Flash and turn on Javascript.</strong></p>
</div>
<div align="center" id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Messages.html">Messages</a></li>
<li><a href="Links.html">Links</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<p>lorum ipsum blah blah blah</p>
</div>
<script type="text/javascript">
var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "100", "7", "#000000");
fo.addVariable("showLogo", "false");
fo.addVariable("dataFile", "monoslideshow2.xml");
fo.write("monoSlideshow1");
</script>
<img src="Roundedbarbottom.gif" alt=""></img>
</body>
</html>Any suggestions as to how to make the code better are also greatly appreciated
Edit; I basically want the <div id="content"> section to have a black background 800px wide, and stretching to fit the content.
