QUOTE(pyr0b0y @ 7 Nov, 2009 - 05:16 AM)
I'm having trouble figuring out how to write an external CSS file because the position isnt for the whole page, its for indiviual pics on the page. Can you please provide an example or a good website? Here is a screenshot of what the homepage looks like in safari:
You need to get rid of the {} in the HTML. I'm assuming you don't want them displayed on the page? They're (in your case) only for style blocks.
See the bit you have in STYLE tags?
CODE
<style media="screen" type="text/css">
body
{
background:
url('../Images/Header.jpg') no-repeat 125px 1px,
url('../Images/Wood_Background_Word.jpg') no-repeat 125px 280px,
url('../Images/Wood_Background_1.jpg') no-repeat 125px 800px;
background-color:black;
}
</style>
Put that into its own .css file. Remove the style tags:
CODE
body
{
background:
url('../Images/Header.jpg') no-repeat 125px 1px,
url('../Images/Wood_Background_Word.jpg') no-repeat 125px 280px,
url('../Images/Wood_Background_1.jpg') no-repeat 125px 800px;
background-color:black;
}
Link to it from your HTML page with (in the head section):
CODE
<link rel="stylesheet" media="screen,projection" type="text/css" href="YOUR_FILENAME_HERE.css" />
That will start you on the road to separating style from content. Now, to target a particular element, use classes or ids - the former represents a group of elements, the latter a single one. In your case it doesn't matter a lot, just don't use the same id more than once. Classes are indicated in stylesheets using a dot (.) and ids are indicated using a hash (#). I'll let you google or ask more about that later, but here's an example of what you could do.
In the HTML, add an id to an element you previously used inline styles for:
CODE
<div style="position: absolute; top:216px; left:130px;">
becomes:
CODE
In the stylesheet, add:
CODE
div#fred
{
position: absolute;
top:216px;
left:130px;
}
As to why your page doesn't work in different browsers, it would be helpful if you could point us to a hosted copy, where the images are available. It's fairly trivial to use a plugin such as firebug in firefox to tweak styles on the fly. I believe safari has a similar feature but I've not played with it beyond saying "ewww" once or twice.
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
| 
