5 Replies - 1247 Views - Last Post: 21 March 2008 - 06:40 AM

#1 agentjk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 11-February 07

Borrowing a CSS Template is not working out?

Posted 20 March 2008 - 10:39 AM

I am trying to borrow CSS code from a site, http://www.mollio.org/typeB.html#, and only edit the text that will appear in the main portion of the page. I navigate to this site, select view pg source (in IE7/FF2) select all, copy and paste into notepad++. Then I edit the text in the main section and try to run it in both browsers. When I do ALL style disappears. The text I changed is correct, but all style is gone.

I have done this with another template I found but it was from an old site and is not XHTML. I need it to be XHTML.

What am I doing wrong? I'm not changing any of the "code", I'm just changing the actual text which will appear on the page.

Is This A Good Question/Topic? 0
  • +

Replies To: Borrowing a CSS Template is not working out?

#2 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6167
  • View blog
  • Posts: 10,655
  • Joined: 28-September 07

Re: Borrowing a CSS Template is not working out?

Posted 20 March 2008 - 10:43 AM

The reason your formatting is disappearing is because the site uses external style sheets. You will need to DL the style sheets for it to work.
Was This Post Helpful? 0
  • +
  • -

#3 agentjk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 11-February 07

Re: Borrowing a CSS Template is not working out?

Posted 20 March 2008 - 12:30 PM

Amazing, how simple that was! I read in the one of the CSS tutorials on dreamin that I shouldn't spend more than an hour troubleshooting and thats what made me decide to post. Excellent advice! Thanks
Was This Post Helpful? 0
  • +
  • -

#4 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6167
  • View blog
  • Posts: 10,655
  • Joined: 28-September 07

Re: Borrowing a CSS Template is not working out?

Posted 20 March 2008 - 01:19 PM

no problem :D
Was This Post Helpful? 0
  • +
  • -

#5 agentjk  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 11-February 07

Re: Borrowing a CSS Template is not working out?

Posted 20 March 2008 - 04:22 PM

View PostBenignDesign, on 20 Mar, 2008 - 01:19 PM, said:

no problem :D


Another question: This is what I have working as of now

<!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">
<!--
Copyright: Daemon Pty Limited 2006, http://www.daemon.com.au
Community: Mollio http://www.mollio.org $
License: Released Under the "Common Public License 1.0", 
http://www.opensource.org/licenses/cpl.php
License: Released Under the "Creative Commons License", 
http://creativecommons.org/licenses/by/2.5/
License: Released Under the "GNU Creative Commons License", 
http://creativecommons.org/licenses/GPL/2.0/
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FarCry - Mollio</title>
<link rel="stylesheet" type="text/css" href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/html/css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/html/css/print.css" media="print" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6_or_less.css" />
<![endif]-->
<script type="text/javascript" src="js/common.js"></script>
</head>
<body id="type-b">
<div id="wrap">

	<div id="header">
		<div id="site-name">Fall Creek Hospital</div>
		<div id="search">
			<form action="">
			<label for="searchsite">Site Search:</label>
			<input id="searchsite" name="searchsite" type="text" />
			<input type="submit" value="Go" class="f-submit" />
			</form>
		</div>
		<ul id="nav">
		<li class="first"><a href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/FCStart_2.html">Home</a></li>
		<li class="active"><a href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/PatientAdvice.html_2">Patient Advice</a></li>
		<li><a href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/ConceptMap.html_2">Future Site Map</a></li>
		</ul>
	</div>
	
	<div id="content-wrap">
	
		<div id="utility">

			<ul id="nav-secondary">
			<li class="first"><a href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/FCStart.html">Home</a></li>
			<li><a href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/PatientAdvice.html">Patient Advice</a></li>
			<li class="active"><a href="http://cot-itec2336-01.cougarnet.uh.edu/sec37493/jtkapner/pa01/ConceptMap.html">Future Site Map</a></li>
			</ul>
		</div>
		
		<div id="content">
		
			<h1>Welcome to the Fall Creek Hospital.</h1>
			<h3>Thank you for visiting our future webpage. The site is still under construction but feel free to browse around what content
		we have so far. We hope you have a wonderful day!</h3>
	
			
		<div class="featurebox"><h3>Completion!</h3><p>Jonathan Kapner has completed this work to partially demonstrate
					the course learning outcome: Design, develop and deploy for public
					consumption a simple maintainable web site with static content and
					interactive elements that employs XHTML, CSS, and Javascript
					technology.</p>
		</div>
				
		<hr />
			
			
			<h4>What I learned...</h4>
			<p>This page demonstrates that I used CSS to layout and format the web site. Here is a link to the externatl css style sheet
			that formats the page:<a href = "http://www.mollio.org/">http://www.mollio.org/</a></p>
				
			
			
		</div>
		
		<div id="poweredby"><a href="http://farcry.daemon.com.au/"><img src="wsimages/mollio.gif" alt="FarCry - Mollio" /></a></div>
		
	</div>
			
			
			
			
			
	
</div>
</body>
</html>



How do I insert a picture in the center of the page? Is there something special I have to do in order to comply with the style sheet?
Was This Post Helpful? 0
  • +
  • -

#6 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6167
  • View blog
  • Posts: 10,655
  • Joined: 28-September 07

Re: Borrowing a CSS Template is not working out?

Posted 21 March 2008 - 06:40 AM

A couple things I've noticed before I get into your actual question:

1. If you plan to use the site for any extended period of time, you will want to actually download the stylesheets. As it is set up right now, if the original site removes or modifies one of those css files, your layout will change too, as you are linking directly to the files on their server.

2. If you intend to use the drop-down capabilities of the menu system, you will also need to download the javascript file referenced in the header. Right now, on your code, it is just a superfluous line of code not linking to anything that actually exists. The actual file is still on the original server and you are not linking to it.

Ok.. that being said, back to the problem at hand. I will assume you are attempting to place an image between the "completion" section and the "what I learned section".... use standard HTML for an image.... for XHTML just add a / before the last >. As in:

<img src="image.png" />



If you are looking to align the image in valid XHTML, you'll need to add styling on the main stylesheet (again, the need to actually download the file rather than linking to it on someone's server), as in:

#image {position:relative;text-align:center;}



You could also use left or right for your alignment.

If you use the css method to style the image, you'll need to add it to your XHTML as well:

<div id="image"><img src="image.png" /></div>



You could also use this in your HTML:
<center><img src="image.png" /></center>



It will still work, but will not validate as XHTML.

Hope I didn't confuse you too much. Good luck!

This post has been edited by BenignDesign: 21 March 2008 - 06:42 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1