I've just begun to use Aptana Studio 3. I used Aptana 2 in school and it worked fine. However in Studio 3, I can't get my external css to link to my XHTML document. I've tried using absolute path, the commented part of the code. With HTML traditional doc type the css links to the document just fine. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>We Rent Checkers</title>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Owner\My Documents\Aptana Studio 3
Workspace\We Rent Checkers\rent_checkers.css" media="screen" charset="UTF-8" />
<!--<style type="text/css" media="screen">
#import url(rent_rheckers.css);
</style> -->
</head>
try to point to your CSS, where it is located relative to your XHTML, if they are in the same folder:
<link rel="stylesheet" type="text/css" href="rent_checkers.css" media="screen" charset="UTF-8" />
never use a file location like c:\
if it is in a folder (like 'css') next to your XHTML:
<link rel="stylesheet" type="text/css" href="css/rent_checkers.css" media="screen" charset="UTF-8" />
before doing that, go to the folder where your html file is located, then create folder with name "css" in same folder. this is how people link external file with each other. you don't need to give exact path/complete path of file. Relevant path works better, as it works when you upload it on online server, reply for more question and clarification.
Related
I've just started using astro and have been finding a weird behavior when building my site. Specifically, although the build process creates a .css file in an assets folder and that is linked in the resulting .html file, my browser does not recognize the presence of this folder of .css file.
My index.astro looks like this:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<style> body {color: red;}</style>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
The resulting directory structure from npm run build is the following:
dist/assets/index.css
dist/index.html
Where index.html looks like the following:
<!DOCTYPE html>
<html lang="en" class="astro-5LR5QOZY">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Astro v1.7.2">
<title>Astro</title>
<link rel="stylesheet" href="/assets/index.css" />
</head>
<body class="astro-5LR5QOZY">
<h1 class="astro-5LR5QOZY">Astro</h1>
</body>
</html>
And index.css has one line, body {color:red;}. When I open index.html in Chrome, styling is plain and assets is not found within the directory structure:
Any help?
I've tried using type="text/css" and that didn't fix the problem.
It looks like you are double clicking the index.html file to view the file locally in your browser using the file:// protocol but websites are meant to be served from a server to view them properly using http:// | https://, Astro provides the npm run preview command which will run a server locally for you to view your build in /dist at http://127.0.0.1:3000/
Having resource tree like this:
picture
File index.html sees the CSS, but file registration does not see it. Both located in one folder. Both have the same html definition:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All people</title>
<link href="../../static/css/StyleCSS.css" th:href="#{css/StyleCSS.css}" rel="stylesheet" type="text/css" media="all" />
</head>
Files on github
What's wrong with it?
I know it is weird, but if you change
th:href="#{css/StyleCSS.css}"
to:
th:href="#{/css/StyleCSS.css}"
it is gonna work. Though I have no idea why it behaves differently on index.
I've to source a css file on my html5 file but out of the millions of ways I've seen on the internet none seem to work.
(Btw my css file is in the same folder as the html file.)
To load a css ressource in an HTML5 document, use the link element inside the head element.
In the following example, the ressource style.css is located in the same folder than the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> <!-- This lets the browser know it is a html5 document -->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Synta and Coding Style</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- This is the external stylesheet that links to the page and alters the feel and look of the page -->
1.close and tags.
2.select full address of your css or use base tag.
I just converted a site to Blueprint CSS today, and suddenly all my hyperlinks are showing their URL's in brackets, e.g.
This hyperlink
Read more
Renders like this
Read More (Products/List.aspx)
I wonder if this might be related to one of the bundled plug-ins in Blueprint?
ADDED: The link renders normally, i.e. the unwanted url part is being generated client-side. Folks have asked for source code, so here it is (irrelevant text removed):
<!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>
<title></title>
<link href="Styles/Blueprint/screen.css" rel="stylesheet" type="text/css" />
<link href="Styles/Blueprint/print.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link rel="stylesheet" href="Styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
Read more
</body>
</html>
SOLVED: By removing the 'print.css' sheet that all tutorials suggest including, I was able to solve the problem in this example and my whole site. I'm still very curious as to why the venerable 'print.css' is acting up like this.
It's likely you have something like this in your CSS:
a:link:after { content:" (" attr(href) ") "; }
That will produce the behavior you describe.
Typically, you would only use this kind of style for the print version of your stylesheet.