6 Replies - 929 Views - Last Post: 11 November 2009 - 10:09 PM

#1 pyr0b0y  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 44
  • Joined: 22-February 09

Inline CSS in HTML Website

Posted 05 November 2009 - 08:56 PM

I'm working on my first website using HTML for all of the content, and postion, color, etc are being done with inline CSS. For my homepage, I defined the background image and positioned it as well with the <style> tag. I have no problem opening my site in Safari, but the webpage will not open in any other browser, not even Firefox. Can someone please point me in the right direction? Thanks

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to David Copello Woodworks</title>
<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>
</head>
{
<div style="position: absolute; top:216px; left:130px;">
	<a href="../Webpages/Homepage.html">
		<img src="../Images/Home_Tab.jpg" alt="" width="94" height="60" />		
	</a>
</div>

<div style="position: absolute; top:216px; left:260px;">
	<a href="../Webpages/Products & Services.html">
		<img src="../Images/Products_Tab.jpg" alt="" width="263" height="60" />	
	</a>
</div>

<div style="position: absolute; top:216px; left:550px;">
	<a href="../Webpages/About Us.html">
		<img src="../Images/About_Tab.jpg" alt="" width="150" height="60" />	
	</a>
</div>

<div style="position: absolute; top:215px; left:730px;">
	<a href="../Webpages/Contact Us.html">
		<img src="../Images/Contact_Tab.jpg" alt="" width="150" height="60" />	
	</a>
</div>
}

<body>

<a href="http://www.google.com" style="position:absolute; color:black; top:1400px; left:1200px;">Google</a>
</body>
</html>

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: Inline CSS in HTML Website

#2 ravish012  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 3
  • Joined: 05-November 09

Re: Inline CSS in HTML Website

Posted 06 November 2009 - 12:05 AM

Hi,
Try having a seperate CSS file cuz its easier to read the code then... just try the following n see if it works

1. watch out for { } u might wanna remove them in a few places.
2. check <body> declaration
3. check image paths
4. Try creating a separate CSS file for better viewing

If possible post a screenshot of how ur page looks in safari.
Was This Post Helpful? 0
  • +
  • -

#3 sam_benne  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 16
  • View blog
  • Posts: 732
  • Joined: 16-January 08

Re: Inline CSS in HTML Website

Posted 06 November 2009 - 04:57 AM

Its best to use an external CSS file as this can edit all pages that are connected to it plus it makes life easier.
Was This Post Helpful? 0
  • +
  • -

#4 pyr0b0y  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 44
  • Joined: 22-February 09

Re: Inline CSS in HTML Website

Posted 06 November 2009 - 11:16 PM

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:

Posted Image

Attached image(s)

  • Attached Image
  • Attached Image

This post has been edited by pyr0b0y: 06 November 2009 - 11:17 PM

Was This Post Helpful? 0
  • +
  • -

#5 sam_benne  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 16
  • View blog
  • Posts: 732
  • Joined: 16-January 08

Re: Inline CSS in HTML Website

Posted 07 November 2009 - 01:48 AM

External css is just CSS in a CSS file you can then use the link rel tag to include it to your page in the header.
Was This Post Helpful? 0
  • +
  • -

#6 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: Inline CSS in HTML Website

Posted 07 November 2009 - 01:51 AM

View Postpyr0b0y, on 7 Nov, 2009 - 05:16 AM, said:

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:

Posted Image


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?
<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:
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):
<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:
<div style="position: absolute; top:216px; left:130px;">


becomes:
<div id="fred">


In the stylesheet, add:
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.
Was This Post Helpful? 0
  • +
  • -

#7 pyr0b0y  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 44
  • Joined: 22-February 09

Re: Inline CSS in HTML Website

Posted 11 November 2009 - 10:09 PM

Thanks for the help, I managed to write my CSS in another file and link it in the HTML. Using I have no problem and it's a lot easier to rewrite changes in CSS. I'm still having the problem of IE and Firefox not displaying as Safari does. Here are the pics of what my homepage looks like in IE and Firefox. (They both display the same webpage)

Posted Image

This post has been edited by pyr0b0y: 11 November 2009 - 10:10 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1